Ext实现级联菜单

来源：互联网发布：时时彩后二做号软件编辑：程序博客网时间：2024/05/15 00:35

如图，标准主题、大类、子类、三级分类依次是级联上下级关系，下一级的选择的应该是基于上一级的选择，而且上一级没有选择的话下一级是不允许被选择的

废话不多说，直接上代码

items : [{columnWidth : .5,xtype : 'fieldset',layout : 'form',border : false,style : 'margin-left: 10px;padding-left: 5px;margin-top:20px;',// 第一列中的表项items : [{xtype : 'combo',fieldLabel : '<span style ="color:red"> *</span>标准主题',anchor : '80%',id : "std_topc",name : 'std_topc',triggerAction : 'all',forceSelection : true,mode : 'local',blankText : '标准主题不能为空',emptyText : '请选择',valueField : 'dd_id',displayField : 'dd_text',store : stdTopcStore,listeners : {select : function(combo, record, index) {// 标准大类Ext.getCmp("std_lrgcls").setValue("");Ext.getCmp("std_subcls").setValue("");Ext.getCmp("lv3_cls").setValue("");var str=Ext.getCmp("std_topc").getValue();stdLrgclsStore.load({start : 0,limit : 100,params : {'tableName' : 'sys_datadictionary','columnValue' : 'dd_id','columnDisplay' : 'dd_text','condition' : "dd_dictname='STD_LRGCLS_"+str+"'"}});}},allowBlank : false}, {xtype : 'combo',fieldLabel : '<span style ="color:red"> *</span>标准大类',anchor : '80%',id : "std_lrgcls",name : 'std_lrgcls',triggerAction : 'all',forceSelection : true,mode : 'local',blankText : '标准大类不能为空',emptyText : '请选择',valueField : 'dd_id',displayField : 'dd_text',store : stdLrgclsStore,listeners : {select : function(combo, record, index) {// 标准子类Ext.getCmp("std_subcls").setValue("");Ext.getCmp("lv3_cls").setValue("");var std_topc=Ext.getCmp("std_topc").getValue();var std_lrgcls=Ext.getCmp("std_lrgcls").getValue();stdSubclsStore.load({start : 0,limit : 100,params : {'tableName' : 'sys_datadictionary','columnValue' : 'dd_id','columnDisplay' : 'dd_text','condition' : "dd_dictname='STD_SUBCLS_"+std_topc+"_"+std_lrgcls+"'"}});}},allowBlank : false}, {xtype : 'combo',fieldLabel : '<span style ="color:red"> *</span>标准子类',anchor : '80%',id : "std_subcls",name : 'std_subcls',triggerAction : 'all',forceSelection : true,mode : 'local',blankText : '标准子类不能为空',emptyText : '请选择',valueField : 'dd_id',displayField : 'dd_text',store : stdSubclsStore,listeners : {select : function(combo, record, index) {// 三级分类Ext.getCmp("lv3_cls").setValue("");var std_topc=Ext.getCmp("std_topc").getValue();var std_lrgcls=Ext.getCmp("std_lrgcls").getValue();var std_subcls=Ext.getCmp("std_subcls").getValue();stdLv3clsStore.load({start : 0,limit : 100,params : {'tableName' : 'sys_datadictionary','columnValue' : 'dd_id','columnDisplay' : 'dd_text','condition' : "dd_dictname='LV3_CLS_"+std_topc+"_"+std_lrgcls+"_"+std_subcls+"'"}});}},allowBlank : false}, {xtype : 'combo',fieldLabel : '<span style ="color:red"> *</span>三级分类',anchor : '80%',id : "lv3_cls",name : 'lv3_cls',triggerAction : 'all',forceSelection : true,mode : 'local',blankText : '三级分类不能为空',emptyText : '请选择',valueField : 'dd_id',displayField : 'dd_text',store : stdLv3clsStore,allowBlank : false})]

//级联菜单 标准主题storevar stdTopcStore = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : '../../../extjs.do?action=getSelectAction'}),reader : new Ext.data.JsonReader({root : 'root',id : 'dd_id'}, [{name : 'dd_id'}, {name : 'dd_text'}])});stdTopcStore.load({start : 0,limit : 100,params : {'tableName' : 'sys_datadictionary','columnValue' : 'dd_id','columnDisplay' : 'dd_text','condition' : "dd_dictname='STD_TOPC' "}});

//级联菜单 标准大类storevar stdLrgclsStore = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : '../../../extjs.do?action=getSelectAction'}),reader : new Ext.data.JsonReader({root : 'root',id : 'dd_id'}, [{name : 'dd_id'}, {name : 'dd_text'}])});

//级联菜单 标准子类storevar stdSubclsStore = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : '../../../extjs.do?action=getSelectAction'}),reader : new Ext.data.JsonReader({root : 'root',id : 'dd_id'}, [{name : 'dd_id'}, {name : 'dd_text'}])});

//级联菜单 三级分类storevar stdLv3clsStore = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : '../../../extjs.do?action=getSelectAction'}),reader : new Ext.data.JsonReader({root : 'root',id : 'dd_id'}, [{name : 'dd_id'}, {name : 'dd_text'}])});

1 0