查詢輸入框幾乎是**中必不可少的元素,在主流**中,查詢輸入框的樣式大體相同,例如csdn主頁右上方上的查詢輸入框。
近期由於專案的需要,本人動手實現了基於extjs框架的「標準」樣式的查詢輸入框元件。
實現的效果如下:
元件**如下:
ext.define('ext.ux.searchinput', );
},initrenderdata: function()
inputname: me.inputname,
inputcls: inputcls,
emptyval: me.emptyval,
inputwidth: me.inputwidth
});},
getinputdom: function() ,
initevents: function() );}},
onfocus: function()
inputel.dom.style.color = '#7eadd9';
return true;
},onblur: function()
inputel.dom.style.color = '#b5b8c8';
return true;
},onenter: function()
},doaction: function() ,
getvalue: function() ,
ondestroy: function()
});
使用示例如下:
ext.create('ext.ux.searchinput', ,
renderto: ext.getbody()
});
元件的實現比較簡單,主要包含以下「注意點」:
1.監聽input標籤元素的回車事件,通過配置元件的handler方法,執行回車查詢動作。
2.提供doaction方法手動執行查詢動作(即呼叫回車事件的實現方法)。
3.通過元件提供的getvalue方法可以獲取input標籤的value。
當然為了達到效果,你需要引入以下樣式:
.x-ux-input-search
.x-ux-input-search-radius
本文第一次發表於:基於extjs框架的查詢元件
ExtJS4 按條件查詢的方法
grid的分頁查詢預設只是傳入了 start limit sort dir 等引數,如果需要傳入其他的引數 比如 控制項中的條件,可以按如下方法 1.條件引數是通過額外引數的方式傳遞到後台,所以 store 的url 不用去鳥,該怎麼寫就怎麼寫。var store ext.create ext.da...
Extjs表單輸入框非同步校驗的外掛程式實現
一 效果如圖所示 特點 1 非同步後台校驗不會對使用者操作產生阻塞感 2 可在使用者停止輸入後自動校驗,避免頻繁進行無謂的後台校驗 3 以外掛程式方式實現,方便使用 二 外掛程式原始碼如下 created by jiawenjun on 2016 10 19.三 應用方式 可用配置項 1 buffe...
extjs清空表單中所有輸入框的值 重置功能
比如已知前提條件 所有輸入框 classname屬性為xxoo 原理 根據classname獲得所有元素即input元素,儲存到元素陣列中 利用迴圈依次賦值null。var inputel ext.select xxoo input elements for var i 0 i關鍵 ext.sele...