ExtJs combo的二级联动

最新推荐文章于 2019-06-12 17:55:22 发布

java_wliang

最新推荐文章于 2019-06-12 17:55:22 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs 文章标签： extjs

本文链接：https://blog.youkuaiyun.com/java_wliang/article/details/39340801

ExtJs 专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细介绍了如何使用ExtJS实现二级联动下拉框功能，通过监听一级下拉框的选值，将其作为参数动态加载二级下拉框的数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二级联动主要是监听一级下拉框的取值，然后将该值作为二级下拉框请求数据时参数。下拉框和其对应的数据源都进行单独定义

var typeData =[{'id':1,'type':'AAAAA'},  
               {'id':2,'type':'BBBBB'},  
               {'id':3,'type':'CCCCC'}  
     ];  
  
var ConcludeStore = new Ext.data.JsonStore({  
        data:typeData,  
        fields:['id','type']  
});  

var TypeNameStore = new Ext.data.JsonStore({
	fields:[
	        'id',
	        'typename'
	        ]
}); 

var newsStore = new Ext.data.Store({
	reader : new Ext.data.JsonReader({
		totalProperty : 'totalProperty',
		root : 'root'
	}, news),
	proxy : new Ext.ux.data.DWRProxy({
		dwrFunction : DedeNewsController.getNewsPublicByPageInit
	})
});

 {
	columnWidth : .5,
	layout : 'form',
	items : [ {
		xtype : 'combo',
		fieldLabel : '所属版块',
		hiddenName : 'type',
		triggerAction : 'all',
		store : ConcludeStore,
		displayField : 'type',
		valueField : 'id',
		mode : 'local',
		anchor : '80%',
		editable : false,
		allowBlank : false,
		emptyText : '---请选择---',
		listeners : {     
            select : function(combo, record, index){ 
            	var typeid = combo.value;
				DedeNewstypeController.getTypeNameList(typeid,function(data){
					if(data){
						// 加载数据
						TypeNameStore.loadData(data);
					}
				});
            }
		}
	} ]
}, {
	columnWidth : .5,
	layout : 'form',
	items : [ {
		xtype : 'combo',
		fieldLabel : '所属类型',
		hiddenName : 'typename',
		triggerAction : 'all',
		store : TypeNameStore,
		displayField : 'typename',
		valueField : 'id',
		mode : 'local',
		anchor : '80%',
		editable : false,
		allowBlank : false,
		emptyText : '---请选择---'
	} ]
}