ExtJs的ComboBox組件中追加空選項

標籤：style   blog   io   color   ar   os   使用   for   sp   

在ComboBox作為選擇條件時，需要可以把ComboBox的值選擇為空白的情況，同時也

把作為該ComboBox的取值的store作為Grid的內容，這樣就不能在伺服器端取得值

構造json資料加入空白選擇，只能在用戶端實現。具體實現方法如下：

 

1、store定義：（紅色字型部分是在store開頭加入空白資料）

 1 Ext.define(‘YakApp.store.Branchs‘, { 2     extend: ‘Ext.data.Store‘, 3     model: ‘YakApp.model.Branch‘, 4     autoLoad: true, 5     sorters: [‘name‘], 6      7     listeners:{ 8         ‘load‘: function(store, records, options) { 9             store.insert(0, Ext.create(‘YakApp.model.Branch‘,{id:‘‘,name:‘‘}));10          }11     }12 13 });

 

2、model定義：

 1 Ext.define(‘YakApp.model.Branch‘, { 2     extend: ‘Ext.data.Model‘, 3     fields: [‘id‘, ‘name‘], 4      5     proxy: { 6         type: ‘ajax‘, 7         url: ‘data/branch.json‘, 8         reader: { 9             type: ‘json‘,10             rootProperty: ‘data‘11         }12     }13 });

 

3、在Controller類引入store

1 stores: ["Branchs"]

 

4、在View類中使用上面的Store定義ComboBox組件

 1 { 2     xtype: ‘combo‘, 3     width: 150, 4     store: ‘Branchs‘, 5         editable: false,                         6     queryMode: ‘remote‘, 7     displayField: ‘name‘, 8         valueField: ‘id‘, 9     tpl: Ext.create(‘Ext.XTemplate‘,10            ‘<tpl for=".">‘,11          ‘<div class="x-boundlist-item" style="height:21px">{name}</div>‘,12          ‘</tpl>‘13     )14 }

  其中9-13代碼是為了顯示空白值時顯示高度和正常值一樣，做的一個設定。

 

5、實現效果如下：

ExtJs的ComboBox組件中追加空選項