`
leiwuluan
  • 浏览: 707272 次
  • 性别: 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
分享到:
评论

相关推荐

    ext combobox二级联动

    ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...

    ExtJS Combobox二级联动列子

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

    extjs的ComboBox 2级联动

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

    datagridview使用combobox进行二级联动

    当需要实现二级联动效果时,即一个`ComboBox`的选择会影响到另一个`ComboBox`的选项,这种功能常见于多级分类选择或筛选场景。本篇文章将深入探讨如何在C#环境下,利用这两个控件在`DataGridView`中实现二级联动。 ...

    Ext combobox 下拉多选框带搜索功能

    在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...

    用Ext 2.0 combobox 做的省份和城市联动选择框的例程

    在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    Ext二级联动完整例子

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

    Ext ComboboxGrid

    "Ext ComboboxGrid"是一个基于Ext JS框架的组件,它结合了下拉框(ComboBox)和数据网格(Grid)的功能,提供了一种更强大的选择和筛选数据的方式。在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果,这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用,比如在本例中的“老师分类”和“老师细类”。...

    WPF三级联动-源代码

    在三级联动中,一级`ComboBox`的选择会触发事件(如`SelectionChanged`),事件处理程序可以更新二级和三级`ComboBox`的`ItemsSource`,从而实现联动。 然后,**事件处理**也是不可或缺的部分。在`SelectionChanged...

    Ext4.0 动态修改ComboBox选择项(本地模式)

    本知识点主要聚焦于如何在Ext4.0框架下动态修改ComboBox的选择项,特别是在本地模式下进行操作。Ext4.0是Sencha Ext JS的一个版本,它提供了一个强大的JavaScript组件库,用于构建富客户端应用程序。 首先,...

    wpf comboBox 下拉框全国地址联动

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)应用程序中实现一个基于comboBox的全国地址联动功能。ComboBox是WPF中一个常用的控件,它允许用户在下拉列表中选择一个项或者输入自定义内容...

    C#中comboBox实现三级联动

    C#中comboBox实现三级联动是指在Windows Forms应用程序中使用comboBox控件来实现三级联动的功能,即省市区三级联动。三级联动是指用户在选择省份时,城市列表会自动更新,选择城市时,区列表也会自动更新。 在本文...

    Ext comboBox的remote模式,联想功能实现

    本篇我们将深入探讨“Ext comboBox的remote模式”及其联想功能的实现。 在Ext JS的comboBox中,远程模式(remote mode)是一种数据加载策略,它适用于处理大量数据或实时数据的情况。在这种模式下,comboBox不会一...

    Ext ComBobox 附带完整附件

    Ext ComBobox是一款基于JavaScript库Ext JS开发的下拉组合框组件,它为用户界面提供了一种高效、灵活且功能丰富的选择输入方式。这个组件通常用于在网页应用中实现复杂的数据选择,比如从一个长列表中选取一项或者...

    WPF和Prism实现ComboBox省市县三级级联

    在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 和 Prism 框架来实现ComboBox的省市县三级级联效果。WPF是.NET Framework的一部分,提供了丰富的用户界面(UI)设计工具,而Prism则是一个...

    用Ext 2_0 combobox 做的省份和城市联动选择框 DOJO中国

    在本案例中,“用Ext 2_0 combobox 做的省份和城市联动选择框”是一种交互式UI设计,常用于地理信息的选择,例如用户先选择省份,然后根据所选省份动态加载对应的城市选项。 Ext 2.0的Combobox组件主要包含以下几个...

Global site tag (gtag.js) - Google Analytics