`
leiwuluan
  • 浏览: 711105 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

Ext ComboBox两级联动

EXT 
阅读更多
var resultOrderTpl = new Ext.Template( 
        '<div class="search-item-comboBox">','{orderNo} -{customerName}','</div>' 
); 
    
var dsOrder = new Ext.data.Store({ 
	proxy: new Ext.data.ScriptTagProxy({ 
		url: CONTEXT_PATH+'/order/orderLiveSearch.action' 
	}), 
	reader: new Ext.data.JsonReader({ 
			root: 'gridRows', 
			totalProperty: 'totalCount', 
			id: 'id' 
	}, [ 
			{name: 'id', mapping: 'id'}, 
			{name: 'orderNo', mapping: 'orderNo'}, 
			{name: 'customerName',mapping: 'customerName'} 
	]) 
}); 

var orderCmb = new Ext.form.ComboBox({ 
	fieldLabel:'合同号', 
	emptyText : '合同号检索(必输项)', 
	store: dsOrder, 
	displayField:'orderNo', 
	valueField: 'id', 
	typeAhead: false, 
	tpl: resultOrderTpl,         
	hiddenName:'orderId', 
	pageSize:10, 
	loadingText: 'loading...', 
	width: 220, 
	hideTrigger:true, 
    allowBlank:false, 
    minChars:1, 
    forceSelection:true, 
    triggerAction: 'all' 
}); 

var selReader = new Ext.data.JsonReader({ 
	id: 'id', 
	root:'gridRows' 
	}, [ 
		{name: 'id', mapping: 'id'}, 
		{name: 'styleNo', mapping: 'styleNo'}, 
		{name: 'description', mapping: 'description'} 
]); 
     
//款式 
var styleDs = new Ext.data.Store({ 
	proxy: new Ext.data.HttpProxy({ 
		url: CONTEXT_PATH+'/res/styleAll.action' 
	}), 
	reader: selReader 
}); 
var resultStyleTpl = new Ext.Template( 
        '<div class="search-item-comboBox">', 
            '{styleNo} -{description}', 
        '</div>' 
); 
    
var styleCmb = new Ext.form.ComboBox({ 
	id:'styleCmbId', 
	fieldLabel: '款式号', 
	store: styleDs, 
	emptyText : '根据合同号选择款式(必输项)', 
	allowBlank:false, 
	hiddenName:'styleId', 
	loadingText: 'searching...', 
	displayField : 'styleNo', 
	mode:'local', 
	tpl: resultStyleTpl, 
	editable : false, 
	valueField: 'id', 
	width: 220, 
	triggerAction: 'all' 
}); 

orderCmb.on('select', function () { 
	styleCmb.reset(); 
	styleDs.proxy = new Ext.data.HttpProxy({ 
		url:CONTEXT_PATH+'/res/styleAll.action?orderId='+orderCmb.getValue() 
	}); 
	styleDs.reload(); 
}); 
	this.orderCmb = orderCmb; 
	this.styleCmb = styleCmb; 

 

 

{
		            xtype:'fieldset',
		            title: '选择商品主类',
		            defaultType: 'textfield',
		          	items:[{
		          		xtype:'combo',
		          		id:'ComboMainMerchandiseSortId', 
		          		fieldLabel: '商品分类',
					    name:'name',//name只是改下拉的名称 
					    hiddenName:'mainMerchandiseSortId',//提交到后台的input的name 
					    width:190, 
					    store:new Ext.data.JsonStore({ 
							url:'merchandiseManager/AJAXDofindAllMainMerchandiseSort.action' ,
							autoLoad:true ,
							//totalProperty: "totalsize" ,
							root:"root" ,
							fields:['name','value'] 
						}),//填充数据 
					    emptyText : '请选择', 
					    mode : 'local',//数据模式,local代表本地数据 
					    readOnly : true,//是否只读 
					    triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all 
					    allowBlank : false,//不允许为空 
					    valueField : 'value',//值 
					    displayField : 'name',//显示文本 
					    editable: false,//是否允许输入 
					    forceSelection: true,//必须选择一个选项 
					    blankText:'请选择',//该项如果没有选择,则提示错误信息
					    listeners:{
					    	select:function(){
								var mainMerchandiseId=Ext.get("mainMerchandiseSortId").getValue(); //获取id为combo的值
								var combo=Ext.getCmp('ComboMerchandiseSortId');
								
								var store=new Ext.data.JsonStore({ 
									url:'merchandiseManager/AJAXDofindAllByMainMerchandiseSortId.action' ,
									autoLoad:true ,
									root:"root" ,
									fields:['name','value'],
									baseParams:{mainMerchandiseId: mainMerchandiseId}
								});
								combo.store=store;
								combo.reload();    
							}
						}
					     
            		}]
		        },{
		            xtype:'fieldset',
		            title: '选择商品分类',
		            defaultType: 'textfield',
		            items:[{
		          		xtype:'combo',
		          		id:'ComboMerchandiseSortId',
            				hiddenName:'merchandiseSortId',
				fieldLabel:'商品子分类',
	            			displayField:'name',
	            			valueField:'value',
	            			typeAhead: true,
	            			mode: 'local',
	            			triggerAction: 'all',
	            			emptyText:'请选择',
	            			selectOnFocus:true,
	            			width:190
            			}]
		        }

 

 



 

  • 大小: 16 KB
0
0
分享到:
评论

相关推荐

    ExtJS Combobox二级联动列子

    2. 二级联动:指两个或多个Combobox之间存在依赖关系,当一个Combobox的值改变时,另一个Combobox的选项也会相应更新。 二、实现原理 1. 数据模型:通常使用Store来存储数据,Store中每个记录包含多个字段,对应...

    extjs的ComboBox 2级联动

    在实现二级联动时,通常会涉及两个ComboBox,一个用于一级选择(如省份),另一个用于二级选择(如城市)。当一级选择改变时,我们需要更新二级ComboBox的store,使其只显示与选定的一级选项相关的数据。 以下是一...

    Ext二级联动完整例子

    在ExtJS中,"二级联动"通常指的是两个或多个下拉框(ComboBox)之间的联动效果,即在一个下拉框选择一个选项后,另一个下拉框会根据前者的选值动态更新其选项。这在数据筛选、地区选择、分类细化等场景中非常常见。 ...

    EXT中COMBOX联动

    "EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...

    Extjs4---combobox省市区三级联动+struts2

    本案例涉及的关键技术主要包括Extjs4框架中的`combobox`组件以及Struts2框架,通过这两种技术实现了省市区三级联动的效果。下面将详细介绍其中涉及到的核心知识点。 #### 二、Extjs4 combobox组件介绍 1. **基础...

    Extjs4.0 ComboBox如何实现三级联动

    在ExtJS 4.0中实现ComboBox的三级联动,我们需要创建三个不同的数据存储(Store),分别对应省份、城市和区县。每个Store都需要一个Model来定义数据结构,并配置代理(Proxy)来从服务器获取数据。这里我们将详细...

    Ext combo 下拉框级联

    1. **创建Ext JS ComboBox**:在前端代码中,首先需要创建两个ComboBox组件,分别对应省份和城市。设置好它们的基本属性,如宽度、高度、字段名等,并为第一个ComboBox添加`select`事件监听器。 2. **定义级联逻辑*...

    Extjs3+MySQL后台数据库实现省份城市二级联动

    本文将深入探讨如何使用ExtJS 3结合MySQL来实现一个省份城市二级联动的前端与后台系统。 首先,ExtJS 3提供了丰富的组件和API,使得开发者可以轻松创建各种复杂的用户界面,如下拉菜单、表格、表单等。在这个案例中...

Global site tag (gtag.js) - Google Analytics