EXTJS 4.2 资料 控件之combo 联动

写两个数据源：

1.IM_ST_Module.js

{ 
    success:true,
    data:[
          { ModuleId: '1', ModuleName: '资讯' }
        , { ModuleId: '2', ModuleName: '交流' }
        , { ModuleId: '3', ModuleName: '图集' }
        , { ModuleId: '4', ModuleName: '商品' }
    ]
}

2.IM_ST_Module_subl.js

{ 
    success:true,
    data: [
      {  ModuleId_sub: '01', ModuleName_sub: '新闻',ModuleId:'1'  }
    , {  ModuleId_sub: '02', ModuleName_sub: '文章',ModuleId:'1'  }
    , {  ModuleId_sub: '03', ModuleName_sub: '娱乐',ModuleId:'1'  }
    , {  ModuleId_sub: '04', ModuleName_sub: '下载',ModuleId:'1'  }
    , {  ModuleId_sub: '11', ModuleName_sub: '交流01',ModuleId:'2'  }
    , {  ModuleId_sub: '12', ModuleName_sub: '交流02',ModuleId:'2' }
    , {  ModuleId_sub: '13', ModuleName_sub: '交流03',ModuleId:'2'  }
    , {  ModuleId_sub: '14', ModuleName_sub: '交流05',ModuleId:'2'  }
    , {  ModuleId_sub: '21', ModuleName_sub: '图集21',ModuleId:'3'  }
    , {  ModuleId_sub: '22', ModuleName_sub: '图集22',ModuleId:'3'  }
    , {  ModuleId_sub: '23', ModuleName_sub: '图集23',ModuleId:'3' }
    , {  ModuleId_sub: '24', ModuleName_sub: '图集24',ModuleId:'3'  }
    , {  ModuleId_sub: '25', ModuleName_sub: '图集25',ModuleId:'3'  }
    , {  ModuleId_sub: '26', ModuleName_sub: '图集26',ModuleId:'3' }
    , {  ModuleId_sub: '31', ModuleName_sub: '商品31',ModuleId:'4'  }
    , {  ModuleId_sub: '32', ModuleName_sub: '商品32',ModuleId:'4'  }
    , {  ModuleId_sub: '33', ModuleName_sub: '商品33',ModuleId:'4' }
    ]
}

页面JS代码：

1.定义模型、 store

//下拉框模块数据开始
Ext.define("ModuleModel", {
    extend: "Ext.data.Model",
    fields:
        [{ name: "ModuleId", type: "string" },
        { name: "ModuleName", type: "string" },
        { name: "ModuleId_sub", type: "string" },
        { name: "ModuleName_sub", type: "string" }]
});

var comboData_Module = Ext.create("Ext.data.Store", {
    model: "ModuleModel",
    autoLoad: true,
    proxy: {
        type: "ajax",
        url: "/UI/Js/InformationManagement_Extjs4.2/Data/IM_ST_Module.js",
        reader: {
            type: "json",
            root: "data"
        }
    }
});

var comboData_Module_sub = Ext.create("Ext.data.Store", {
    model: "ModuleModel",
    proxy: {
        type: "ajax",
        url: "/UI/Js/InformationManagement_Extjs4.2/Data/IM_ST_Module_subl.js",
        reader: {
            type: "json",
            root: "data"
        }
    }
});
//下拉框模块数据结束

2.控件：combo

    {
        xtype: "fieldcontainer",
        layout: "hbox",
        items: [
           {
               xtype: 'combo',
               name: 'ModuleId', allowBlank: false,
               fieldLabel: '来自模块', width: 300,
               store: comboData_Module,
               emptyText: '选择模块...',
               valueField: "ModuleId",
               displayField: "ModuleName",
               mode: 'local',//local
               editable: false,
               triggerAction: 'all',
               allowBlank: false,
               autoload: true,
               listeners: {
                   change: function (field, newValue, oldValue, op) {
                       //当下拉框选择改变的时候，也就是原值不等于新值时
                       if (newValue != oldValue) {
                           //清空原来的下拉框 
                           form_Step3_1_left.form.findField('ModuleIdsub').clearValue();
                           //过滤数据源
                           comboData_Module_sub.clearFilter();
                           comboData_Module_sub.filterBy(function (item) {
                               return item.get("ModuleId") == newValue;
                           });
                           //绑定数据源
                           form_Step3_1_left.form.findField('ModuleIdsub').bindStore(comboData_Module_sub);
                       }
                   }
               }
           },
           {
               xtype: 'combo',
               name: 'ModuleIdsub', allowBlank: false,
               fieldLabel: '', width: 200,
               store: comboData_Module_sub,
               emptyText: '选择子模块...',
               valueField: "ModuleId_sub",
               displayField: "ModuleName_sub",
               mode: 'local',//local
               editable: false,
               triggerAction: 'all',
               allowBlank: false
           }
        ]
    }

 相关链接：http://www.cnblogs.com/mayantao/p/extjs4.html

转载于:https://www.cnblogs.com/foreverfendou/p/4360516.html