[ExtJS]TriggerField建立ComboGrid下拉選單

預設的ExtJS 3.4版裡只有單純的下拉選單ComboBox的Form元件,假如要顯示的欄位數比較多時,像是顯示姓名、電話,選取後可以設值為使用者編號,就可以利用TriggerField來制作ComboGrid。

Ext.form.TriggerField是ComboBox、DateField、TimeField的父類別,可以直接輸入資料也可以利用選取來取得資料。

ExtJs ComboGrid遠端stor




範例的的作法是把html元件tag input轉換成Ext.form.TriggerField,然後再針對這個TriggerField做onTriggerClick動作,來show選取Grid,選取Grid的內容,再setValue回去TriggerField,其中還有做了個小技巧,把TriggerField的name屬性值轉到另一個HiddenField裡,如此一來當Form Submit時,回傳的值才會正確。

上圖利用FireBug查看它的原始碼,可以看到有一個hidden的input會把選取的值存在這裡。

FireBug ComboGrid

如果只給input的ID時,也會有預設的效果。

ComboGrid預設

FireBug查看預設的ComboGird實際值

範例Demo

程式碼:

需要載入ExtJS

JavaScript

html




發表迴響