乙個簡單的ExtJS搜尋建議框

2021-09-07 14:15:04 字數 1719 閱讀 9315

封裝的是乙個ext4.2的元件,繼承並相容於ext的combobox.

實現原理非常easy,在 combo 中監聽 keyup 事件就可以.

搜尋建議的combo.基本上全然相容, 使用方式與combo下拉框一樣.

須要後台程式依據keyword進行搜尋建議.

源**例如以下: 

// 搜尋建議框,使用時請適當改動包名

ext.define("cnc.view.searchcombobox",

, keyupfn : function(combo, e)

//var proxy = store.getproxy();

if(!proxy)

// 獲取輸入的文字內容

var text = this.getrawvalue() || "";

// 設定到引數裡面

var extraparams = proxy.extraparams || {};

proxy.extraparams = extraparams;

//var searchwordkey = this.searchwordkey;

var searchsizekey = this.searchsizekey;

var searchsize = this.searchsize || 5;

// 設定到引數裡面

extraparams[searchwordkey] = text;

extraparams[searchsizekey] = searchsize;

// 使用 store 載入

store.load();

}});

元件使用配置:

,

actionmethods: ,

reader: ,

extraparams: }})

}

contoller 使用方式, 相似以下這樣:

var actype = "";

var actypename = "";

var actypecombo = ***form.query('searchcombo[name=actype]')[0];

if(actypecombo)

假設要監聽事件,應該監聽 select 事件:

select(combo, records, eopts )

說明: 僅僅支援遠端載入的store。

當然,也能夠進行定製。如監聽多個事件:

initcomponent : function()

還能夠對反覆的文字進行攔截,避免過多請求:

// 獲取輸入的文字內容

var text = this.getrawvalue() || "";

text = text.trim();//.replace(/\w/g, "");

if(text == this.prevkeyword)

//this.prevkeyword = text;

上面**中凝視掉的部分, 是用正規表示式將數字字母給清理掉,有些中文輸入法會有這樣的問題。

此外,你還能夠使用延遲函式,比方500毫秒之內僅僅觸發一次。有些時候會非常實用的,這就須要你自己來實現啦。

乙個簡單的JS搜尋例項

最近在看正則,於是自己動手做了乙個基於js 使用正規表示式的搜尋例項,主要功能就是在文字中搜尋特定的內容。可以先寫個簡易的樣式 html id box id textcon rows 10 cols 70 textarea please enter content id searchcon type...

製作乙個簡單的toast彈框

import toast from toast const obj install 是預設的方法。當外界在 use 這個元件的時候,就會呼叫本身的 install 方法 對外暴露乙個install方法即可 同時傳乙個 vue 這個類的引數。obj.install function vue expor...

乙個好看的搜尋框 Day01

於是再三考慮,我同樣選擇了同樣從介面開始著手,可不同的是我沒有整天的時間任由自己安排,我還需要工作,我也沒學過藝術,總少了那麼點優雅的氣質,只能從簡單的美化和應用上開始了。首先進行的是搜尋框 我瀏覽了很多 看了很多模板,大致總結為幾種搜尋框,在接下來的日子裡,我將一一實現它,揭秘它 在會之前是真的是...