如何添加空项目到ExtJS组合框？ [英] How to add an empty item to ExtJS combobox?

问题描述

我要添加和清空项目（显示值为空，项目高度保持正常）到Ext.form.ComboBox。我参考以下2个链接配置我的组合框，但它仍然不显示空项：

• http://www.ashlux.com/wordpress/2009/09/04/ handling-empty-options-with-ext-js-combo-box /


• http://www.sencha.com/forum/showthread.php?52340-How-to-add -a-quot-blank-quot-entry-to-a-ComboBox

这是我的代码： p>

  this.abcCombo = new Ext.form.ComboBox（{
 name：'abcCombo'，
 hiddenName： 'abcCombo-id'，
 fieldLabel：My Combobox，
 width：250，
 editable：false，
 forceSelection：true，
 mode： ，
 triggerAction：'all'，
 valueField：'id'，
 displayField：'fullName'，
 store：new Ext.data.JsonStore（{
 fields ：['id'，'fullName'] 
}），
 tpl：'< tpl for =。>< div class =x-combo-list-item> {fullName}& nbsp;< / div>< / tpl>'
}）; 
 

组合框商店的数据将在Ajax请求之后加载（即数据项中的3个项目）。而组合框只有3项（不是我预期的4）。
你对我的问题有什么想法吗？
非常感谢！

解决方案

因为你以后添加combobox的值，空值：

  store：new Ext.data.JsonStore（{
 fields：['id'，'fullName ']，
 data：[{id：0，fullName：'& nbsp;'}] //这是一个空格现在
}），
  

稍后当您执行 store.add（theRestOfThem）时，

今天（2014年2月2日）重审这个问题：

使用下面的模板答案，但它是在ExtJS 4.2杂乱的

最简单的做法似乎是包括一个& nbsp ;在存储中的值（如上 - 在客户端或通过使用其他组合选项从服务器端发送它） - 然后使用监听器扩展默认组合框& nbsp; 值将其转换为null。例如：

  Ext.define（'App.ux.DropBox'，{
 extend：'Ext.form .field.ComboBox'，
别名：['widget.dropbox']，
 
 autoSelect：true，
 
 listeners：{
 
 / ** 
 *防止在选择时显示& nbsp;文本
 * / 
 select：function（comp，record，index）{
 if .getValue（）==|| comp.getValue（）==& nbsp;）
 comp.setValue（null）; 
} 
 
} ; 
 
 
 / * 
 *在商店 - 如果不是
 *，将在客户端插入空白值。剩余的组合项
 * 
 load：function（store，records）{
 store.insert（0，[{
 name：'& nbsp;'，
 id：null 
}]）; 
} 
 * / 
} 
  

像这样：

  {
 xtype：'timefield'，
 name：'arrivalTime'，
 fieldLabel：'Arrival Time'，
 minValue：'6:00 AM'，
 increment：60 
}，{
 xtype：'dropbox'，//< - 扩展组合框类
 name：'arrivalStatus'，
 fieldLabel：'Arrival Status'，
 forceSelection：true，
 valueField：'id'，
 displayField： 'name'，
 store：scheduleStatusRef，
 queryMode：'local'
}，
 // ...其他字段
  / pre> 
I want to add and empty item (display value is blank, item height is kept as normal) to an Ext.form.ComboBox. I refered 2 links below to configure my combobox, but it still not display the empty item:


http://www.ashlux.com/wordpress/2009/09/04/handling-empty-options-with-ext-js-combo-box/
http://www.sencha.com/forum/showthread.php?52340-How-to-add-a-quot-blank-quot-entry-to-a-ComboBox  


Here is my code:
this.abcCombo = new Ext.form.ComboBox({
    name : 'abcCombo',
    hiddenName : 'abcCombo-id',
    fieldLabel : "My Combobox",
    width : 250,
    editable : false,
    forceSelection : true,
    mode : 'local',
    triggerAction : 'all',
    valueField : 'id',
    displayField : 'fullName',
    store : new Ext.data.JsonStore({
        fields : ['id', 'fullName']
    }),
    tpl : '<tpl for="."><div class="x-combo-list-item">{fullName}&nbsp;</div></tpl>'
});
The combobox store's data will be loaded after an Ajax request (i.e 3 items in data items). And the combobox has only 3 item (not 4 as I expected).
Do you have any idea about my problem?!
Thank you so much!
解决方案
Since your adding the combobox values later, why not just initialize the store with one blank value:
store : new Ext.data.JsonStore({
    fields : ['id', 'fullName'],
    data : [{id: 0, fullName: '&nbsp;'}] // this is a space now
}),
Later when you do store.add(theRestOfThem), that blank one will still be there.

Had to revisit this today (2 Feb 2014):

I tried using the template answers below but it was kind of messy in ExtJS 4.2

The cleanest way to do it seems to be to include an &nbsp; value in the store (as above - either in the client side or by sending it from the server side with the rest of the combo options) - and then to extend the default combobox with a listener that handles the &nbsp; value to convert it to null. For example:
Ext.define('App.ux.DropBox', {
    extend:'Ext.form.field.ComboBox',
    alias: ['widget.dropbox'],

    autoSelect: true,

    listeners: {

    /**
     * Prevents "&nbsp;" text from being displayed on selection
     */
        select: function (comp, record, index) {
            if (comp.getValue() == "" || comp.getValue() == "&nbsp;") 
               comp.setValue(null);
        }

});


    /* 
     * On the store - this will insert the blank value on the client side if it isn't 
     * passed from the server side with the rest of the combo items
     *
        load: function(store, records) {
          store.insert(0, [{
              name: '&nbsp;',
              id: null
          }]);
        }
    */
    }
Then it can be used like this:
{
    xtype: 'timefield',
    name: 'arrivalTime',
    fieldLabel: 'Arrival Time',
    minValue: '6:00 AM',
    increment: 60
}, {
    xtype: 'dropbox', // <-- extended combobox class
    name: 'arrivalStatus',
    fieldLabel: 'Arrival Status',
    forceSelection: true,
    valueField: 'id',
    displayField: 'name',
    store: scheduleStatusRef,
    queryMode: 'local'
},
// ... other fields


                        
这篇关于如何添加空项目到ExtJS组合框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！