当前位置：文江博客话题详情

如何向 ExtJS 组合框添加一个空项目？

发布于 2025-01-08 02:32:56 字数 1174 浏览 1 评论 0 原文

我想向 Ext.form.ComboBox 添加和清空项目（显示值为空白，项目高度保持正常）。我引用了下面的 2 个链接来配置我的组合框，但它仍然不显示空项目：

这里是我的代码：

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>'
});

组合框存储的数据将在 Ajax 请求后加载（即数据项中的 3 项）。并且组合框只有 3 个项目（不是我预期的 4 个）。你对我的问题有什么想法吗？！太感谢了！

原文

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:

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} </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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长亭外，古道边 2025-01-15 02:32:56

您可以在开头添加一条“空”记录：

 listeners: {
     load: function(store, records) {
          store.insert(0, [{
              fullName: ' ',
              id: null
          }]);
     }
  }

You can add an "empty" record at the beginning:

 listeners: {
     load: function(store, records) {
          store.insert(0, [{
              fullName: ' ',
              id: null
          }]);
     }
  }

回复收藏 0 原文

笨笨の傻瓜 2025-01-15 02:32:56

既然您稍后添加组合框值，为什么不直接使用一个空白值来初始化存储：

store : new Ext.data.JsonStore({
    fields : ['id', 'fullName'],
    data : [{id: 0, fullName: ''}]
}),

稍后当您执行 store.add(theRestOfThem) 时，该空白值仍将存在。

今天（2017 年 4 月 15 日）必须重新审视 ExtJS 4.2：

最简单的方法是在存储中包含一个空字符串，如上所示，也可以在存储中使用加载侦听器来完成：

listeners: 
{
    load: function(store, records) 
    {
        store.insert(0, [{
            fullName: '',
            id: null
        }]);
    }
}

然后在显示字段后面添加一个 tpl 配置到组合框，并使用：（

tpl: '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>',

显示字段是 OP 中的 fullName 案件）

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: ''}]
}),

Later when you do store.add(theRestOfThem), that blank one will still be there.

Had to revisit this today (15 Apr 2017) for ExtJS 4.2:

The easiest way is to include an empty string in the store as above, it can also be done with a load listener on the store:

listeners: 
{
    load: function(store, records) 
    {
        store.insert(0, [{
            fullName: '',
            id: null
        }]);
    }
}

Then add a tpl config to the combobox with after the display field:

tpl: '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>',

(the display field is fullName in the OPs case)

回复收藏 0 原文

看海 2025-01-15 02:32:56

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} </div></tpl>'

    //make sure to add this
    //if not added, empty item height is very small
    listConfig : {
        getInnerTpl: function () {
            return '<table><tr><td height="12">{fullName}</td></tr></table>';
        }
    }

});

在初始化组件时，您可以（在控制器上）执行以下操作：

populateMyComboBox([yourComboBoxComponent], true);

在填充函数上：

populateMyComboBox : function(comboBox, insertEmpty) {
    var list;
    if (insertEmpty) {
        list.push({id : 0, fullName : ''});
    }

    var mStore = Ext.create('Ext.data.Store', {
        fields: ['data', 'label'],
        data : list.concat([real_data])
    }),

    comboBox.bindStore(mStore);
}

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} </div></tpl>'

    //make sure to add this
    //if not added, empty item height is very small
    listConfig : {
        getInnerTpl: function () {
            return '<table><tr><td height="12">{fullName}</td></tr></table>';
        }
    }

});

on initializing the component, you can do this (on controller):

populateMyComboBox([yourComboBoxComponent], true);

on the populate function:

populateMyComboBox : function(comboBox, insertEmpty) {
    var list;
    if (insertEmpty) {
        list.push({id : 0, fullName : ''});
    }

    var mStore = Ext.create('Ext.data.Store', {
        fields: ['data', 'label'],
        data : list.concat([real_data])
    }),

    comboBox.bindStore(mStore);
}

回复收藏 0 原文

野鹿林 2025-01-15 02:32:56

这就是我们如何在组合框中添加空白字段

在java Map或任何其他集合中放置像这样的键值

fuelMap.put(""," "); // we need to add " " not ""," " or null 
                          // because these will add a fine blank line in Combobox 
                          // which will be hardly noticeable.

在js文件中，它应该像这样：

组合框的监听器

listeners: {
    select: function (comp, record, index) {
        if (comp.getValue() === "" || comp.getValue() === " ") {
            comp.setValue(null);
        }
    }
}

This is how we can add a blank field in Combo box

In java Map or any other collection put key value like this

fuelMap.put(""," "); // we need to add " " not ""," " or null 
                          // because these will add a fine blank line in Combobox 
                          // which will be hardly noticeable.

In js file, it should be like this :

Listener for combo box

listeners: {
    select: function (comp, record, index) {
        if (comp.getValue() === "" || comp.getValue() === " ") {
            comp.setValue(null);
        }
    }
}

回复收藏 0 原文

窝囊感情。 2025-01-15 02:32:56

在 Ext 4.2.1（可能是其他版本）中，只需添加到组合框配置中：

tpl : '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>'

In Ext 4.2.1 (probably others), just add to combobox config:

tpl : '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>'

回复收藏 0 原文

四叶草在未来唯美盛开 2025-01-15 02:32:56

如果商店使用内联数据，则 store.load 甚至不会触发。也许有更好的解决方案，但我最终在 combobox.render 上插入商店记录：

{
    xtype: 'combo',
    displayField: 'name',
    valueField: 'value',
    store: {
        type: 'MyInlineStore',
    },
    listeners: {
        render: function(el){
            el.getStore().insert(0, [{name: '[Any]', value: ''}]);
            el.setValue(''); //select [Any] by default
        }
    },
}

If the store uses inline data then store.load even won't fire. Maybe there is a better solution, but I ended up inserting store records on combobox.render:

{
    xtype: 'combo',
    displayField: 'name',
    valueField: 'value',
    store: {
        type: 'MyInlineStore',
    },
    listeners: {
        render: function(el){
            el.getStore().insert(0, [{name: '[Any]', value: ''}]);
            el.setValue(''); //select [Any] by default
        }
    },
}

回复收藏 0 原文

℡寂寞咖啡 2025-01-15 02:32:56

这对我有用，我尝试将 ' ' 放入我设置为模型上组合框的显示字段的字段中，我想在该模型中显示空白组合框的下拉菜单但不在文本框中，选择它后会显示我不想要的 ' ' 。因此，我在组合框中使用了 displayTpl 配置，它会影响在组合中选择某些内容后显示的文本框。

这是我添加到附加到组合框的商店中的模型，并且显示字段是 contactName。

var blankModel = Ext.create('myefiles.jobs.pdd.model.Contact', {
    id: null,
    contactName: ' ',
    tel: null,
    cell: null,
    email: null,
    vendorUUID: null,
    vendorName: null,
    active: null,
    deleted: null
});

这是我的组合框上的 displayTpl 配置

displayTpl: Ext.create('Ext.XTemplate',
   '<tpl for=".">',
      '<tpl switch="contactName">',
         '<tpl case=" ">',
         '<tpl default>{contactName}',
      '</tpl>',
   '</tpl>'
)

这可能可以使用 if 语句而不是我所做的 switch 来完成，但老实说我从未使用过 XTemplates 并且我不知道我在做什么我也有switch 语句的示例并使其正常工作。我基本上只是说如果 contactName = ' ' 则不要放置任何内容，如果有其他内容则显示 contactName。

This is what worked for me I tried putting ' ' into the field that I had set as the display field for the combo box on the model that I wanted to show up blank that worked in the drop down of the combo box but not in the text box after it's been selected it would show ' ' which I didn't want. So, I used the displayTpl config on my combo box which affects the text box shown after selecting something in a combo.

This is my model that I added to the store attached to the combo box and the displayField is contactName.

var blankModel = Ext.create('myefiles.jobs.pdd.model.Contact', {
    id: null,
    contactName: ' ',
    tel: null,
    cell: null,
    email: null,
    vendorUUID: null,
    vendorName: null,
    active: null,
    deleted: null
});

This is the displayTpl config on my combobox

displayTpl: Ext.create('Ext.XTemplate',
   '<tpl for=".">',
      '<tpl switch="contactName">',
         '<tpl case=" ">',
         '<tpl default>{contactName}',
      '</tpl>',
   '</tpl>'
)

This probably could be done with an if statement instead of the switch thing I did but I'll be honest I have never worked with XTemplates and I don't know what I'm doing also I had an example of a switch statement and got it to work so. I'm basically just saying if the contactName = ' ' then don't put anything and if its anything else display the contactName.

回复收藏 0 原文

~没有更多了~