Ext实现级联菜单

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

废话不多说,直接上代码

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
			})]


//级联菜单 标准主题store
var 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' "
	}
});

//级联菜单 标准大类store
var 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'
				}])
	});

//级联菜单 标准子类store
var 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'
				}])
	});

//级联菜单 三级分类store
var 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'
					}])
		});


你可能感兴趣的:(ExtJs,combo,级联菜单)