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
分享到:
相关推荐
2. 二级联动:指两个或多个Combobox之间存在依赖关系,当一个Combobox的值改变时,另一个Combobox的选项也会相应更新。 二、实现原理 1. 数据模型:通常使用Store来存储数据,Store中每个记录包含多个字段,对应...
在实现二级联动时,通常会涉及两个ComboBox,一个用于一级选择(如省份),另一个用于二级选择(如城市)。当一级选择改变时,我们需要更新二级ComboBox的store,使其只显示与选定的一级选项相关的数据。 以下是一...
在ExtJS中,"二级联动"通常指的是两个或多个下拉框(ComboBox)之间的联动效果,即在一个下拉框选择一个选项后,另一个下拉框会根据前者的选值动态更新其选项。这在数据筛选、地区选择、分类细化等场景中非常常见。 ...
"EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...
本案例涉及的关键技术主要包括Extjs4框架中的`combobox`组件以及Struts2框架,通过这两种技术实现了省市区三级联动的效果。下面将详细介绍其中涉及到的核心知识点。 #### 二、Extjs4 combobox组件介绍 1. **基础...
在ExtJS 4.0中实现ComboBox的三级联动,我们需要创建三个不同的数据存储(Store),分别对应省份、城市和区县。每个Store都需要一个Model来定义数据结构,并配置代理(Proxy)来从服务器获取数据。这里我们将详细...
1. **创建Ext JS ComboBox**:在前端代码中,首先需要创建两个ComboBox组件,分别对应省份和城市。设置好它们的基本属性,如宽度、高度、字段名等,并为第一个ComboBox添加`select`事件监听器。 2. **定义级联逻辑*...
本文将深入探讨如何使用ExtJS 3结合MySQL来实现一个省份城市二级联动的前端与后台系统。 首先,ExtJS 3提供了丰富的组件和API,使得开发者可以轻松创建各种复杂的用户界面,如下拉菜单、表格、表单等。在这个案例中...