基於ExtJS4的查詢輸入框元件

2021-06-19 01:46:13 字數 1255 閱讀 7095

查詢輸入框幾乎是**中必不可少的元素,在主流**中,查詢輸入框的樣式大體相同,例如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...