ExtJs的ComboBox組件中追加空選項

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

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

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

 

1、store定義：（紅色字體部分是在store開頭加入空白數據）

Ext.define('YakApp.store.Branchs', {
    extend: 'Ext.data.Store',
    model: 'YakApp.model.Branch',
    autoLoad: true,
    sorters: ['name'],
    
 7     listeners:{
 8         'load': function(store, records, options) {
 9             store.insert(0, Ext.create('YakApp.model.Branch',{id:'',name:''}));
10          }
11     }

});

 

2、model定義：

Ext.define('YakApp.model.Branch', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
    
    proxy: {
        type: 'ajax',
        url: 'data/branch.json',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    }
});

 

3、在Controller類引入store

stores: ["Branchs"]

 

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

{
    xtype: 'combo',
    width: 150,
    store: 'Branchs',
        editable: false,                        
    queryMode: 'remote',
    displayField: 'name',
        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     )
}

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

 

5、實現效果如下：