如何从定义之外更改组合框(ExtJS）的模型

How to change model of a combobox (Ext JS) from outside its definition

本文关键字：ExtJS 模型 组合 定义      更新时间：2023-09-26

我这里有两个Ext组合框，当调用combobox1的select事件时，我需要更改第二个组合框的值，我的问题是我不知道如何更改组合框的模型。

   items: [{
        xtype:'combo',
        fieldLabel: 'Course',
        afterLabelTextTpl: required,     
        store: new Ext.data.SimpleStore({
            data: [
                [1, 'Bsc CS'],
                [2, 'MSc CS'],
            ],
            id: 0,
            fields: ['value', 'text']
        }),             
        name: 'first',
        listeners:{
          select: function( combo, records, eOpts )
          {
              if(this.getValue()=="Bsc CS")
              {
                 // Ext.get('semcombo').getStore.loadData(msc);
              }
              else if(this.getValue()=="MSc CS")
              {
              }
          }  
        },
        editable:false,
        allowBlank: false
    },{
        xtype:'combo',
        fieldLabel: 'Semester',
        id : 'semcombo',
        afterLabelTextTpl: required,
        name: 'last',
        allowBlank: false,
    }

对于第二个组合框，为每个模型类型配置一个组合框。在第一个组合框中进行选择时，隐藏或显示相应的组合框。

如果您需要完全更改数据（JSFiddle）

select: function(checkbox,records) {
      comp.clearValue();
      comp.bindStore(Ext.StoreMgr.lookup(records[0].data.store));
      // you can change the value field if needed
      comp.displayField = 'petname'; 
      // you can change the display field if needed
      comp.valueField = 'id'; 
      // you can change the display template if needed
      comp.displayTpl = new Ext.XTemplate(
          '<tpl for=".">' +
              '{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
              '<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
          '</tpl>'
      );
      comp.picker = null;
 }

如果您只需要过滤（加载）第二个组合框中的数据，您可以执行类似的操作

在第一个组合框的选择事件上，准备第二个组合框来过滤数据

combobox2.queryData = [{ property: 'fieldName', value: value}];
combobox2.reset();
combobox2.doQuery(combobox.queryData);

其中CCD_ 1是对激活的组合的引用，而CCD_。为了确保使用您的新查询，请使用

combobox2.on('beforequery', function (e) {
    e.query = e.combo.queryData;
});
相关文章：