Question

我想知道如何更新或重新加载ExtJs ComboBox的列表值的方法。例如，我有一些复选框。这些复选框确定ComboBox应具有的值。因此，在选择其中一些之后，我点击了drowndown列表（组合框）来查看值。

简而言之，我如何更改已有的ComboBox的值（存储）。

希望有人可以帮助我

由于

Answer 1

我一直在使用这个未记录的ExtJs API函数来在运行时更改存储：

mycombobox.bindStore(newStore);

正如支持小组在http://www.sencha.com/forum/showthread.php?40749-Change-Combobox-store-data-update中所述。

编辑：如果我想在填充商店时放入新数据，我会做这样的事情

storeMyStore = new Ext.data.Store({
    ...
    listeners: {
        load: function(this, records, options) {
            cbMyCombo.bindStore( storeMyStore );
        }
    }
});

Answer 2

它有点像这样

{
  xtype: 'checkbox',
  //configs
  listeners : {
     checked : function (checkbox, checkedBool) {
         var yourCombo = Ext.getCmp(yourComboID);

         //I'm not sure what params you will need to reload the comboBox from your
         // service but hopfully this will give the jist of things. . .

         yourCombo.store.reload(
                  {   
                     params: 
                         {yourParam : checkedBool},
                         {yourRowID : rowID}
                    });
      }
 }

Answer 3

这里我制作了一个在另一个ComboBox上进行选择后更新的组合框。基本上，最终用户可以使用两个组合框来选择主类别和子类别，这是基于在第一个组合框上进行的选择。

这是First comboBox的商店：

Ext.define("StoreSubject", {
extend: "Ext.data.Model",
fields: [
{
    name: 'i_Id'
},
{
    name: 's_Value'
}
]
});

var StoreSubject = Ext.create('Ext.data.JsonStore', {
model: 'StoreSubject',
proxy: {

    type: 'ajax',
    url: '../General/AdministrationDefaultXMLDOM.aspx?qid=15',
    reader: {
        type: 'json'
    }
}
});
StoreSubject.load();

这是第二个comboBox的商店：

Ext.define("StoreLanguageGroup", {
extend: "Ext.data.Model",
fields: [
{
    name: 'i_Id'
},
{
    name: 's_Value'
}
]
});
var StoreLanguageGroup = Ext.create('Ext.data.JsonStore', {
model: 'StoreLanguageGroup',
proxy: {

    type: 'ajax',
    url: '../General/AdministrationDefaultXMLDOM.aspx?qid=16',
    reader: {
        type: 'json'
    }
}
});

我的Comobox代码看起来像这样..

First ComboBox：

var cmbSubjectName = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbSubjectName',
fieldLabel: '<b>Subject</b>',
name: 'cmbSubjectName',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreSubject,
queryMode: 'local',
typeAhead: true,
listeners: {
    'select': {
        fn: function (combo, value) {
            var strSubjectName = Ext.getCmp('cmbSubjectName').getValue();
            Ext.getCmp('cmbLanguageType').clearValue();
            Ext.getCmp('cmbLanguageType').getStore().load({
                params: {
                    SubjectName: strSubjectName
                }
            });
        }
    }

},
});

此代码用于调用和覆盖combox存储（无效，否则将继续加载）

Ext.override(Ext.LoadMask, {
onHide: function () {
    this.callParent();
}
});

// ---------------------------

第二个ComboBox：

var cmbLanguageType = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbLanguageType',
fieldLabel: '<b>Language</b>',
multipleSelect: false,
name: 'cmbLanguageType',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreLanguageGroup,
queryMode: 'local',
typeAhead: true,
});

希望这会对你有帮助..并且请评价我的答案

Answer 4

在复选框上的事件监听器中，获取对ComboBox正在读取的商店的引用。然后根据复选框checked调用其添加或删除函数来更新商店中的数据。一旦更新完成，在ComboBox组件上调用doLayout()，它应该重新呈现自己关于商店的现状。

虽然我认为有一种方法可以让它在商店更新时自动更新 - 我还没有使用它。

更新或重新加载ExtJs ComboBox的存储

4 个答案: