Extjs上ComboBox实现级联
Extjs下ComboBox实现级联
<SPAN style="FONT-SIZE: 18px"> //**测试下拉框级联**
var storedm = new Ext.data.Store({ //队名称下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({
root: 'dms',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'mc'}
])
});
var storejh = new Ext.data.Store({ //井号选择下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
}),
reader: new Ext.data.JsonReader({
root: 'jhs',
id: 'jh'
}, [
{name: 'jh', mapping: 'jh'},
{name: 'jm', mapping: 'jm'}
])
});
</SPAN>
//**测试下拉框级联**
var storedm = new Ext.data.Store({ //队名称下拉框
proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({ root: 'dms', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'mc'} ]) }); var storejh = new Ext.data.Store({ //井号选择下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的 }), reader: new Ext.data.JsonReader({ root: 'jhs', id: 'jh' }, [ {name: 'jh', mapping: 'jh'}, {name: 'jm', mapping: 'jm'} ]) });
[javascript]
<SPAN style="FONT-SIZE: 18px"> //**测试下拉框级联**
var storedm = new Ext.data.Store({ //队名称下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({
root: 'dms',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'mc'}
])
});
var storejh = new Ext.data.Store({ //井号选择下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
}),
reader: new Ext.data.JsonReader({
root: 'jhs',
id: 'jh'
}, [
{name: 'jh', mapping: 'jh'},
{name: 'jm', mapping: 'jm'}
])
}); </SPAN>
//**测试下拉框级联** var storedm = new Ext.data.Store({ //队名称下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getdm' }), reader: new Ext.data.JsonReader({ root: 'dms', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'mc'} ]) }); var storejh = new Ext.data.Store({ //井号选择下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的 }), reader: new Ext.data.JsonReader({ root: 'jhs', id: 'jh' }, [ {name: 'jh', mapping: 'jh'}, {name: 'jm', mapping: 'jm'} ]) });
[javascript]
<SPAN style="FONT-SIZE: 18px"> //单位字段
var dwField = new Ext.form.ComboBox({
fieldLabel:'所属队',
name:'DW',
//hiddenName:'DW',//hiddenName才是提交到后台的input的name（既select的value值）
allowBlank:false,
mode: 'local',
readOnly:true,
triggerAction:'all',
anchor:'90%',
emptyText:'请选择...',//默认值
store:storedm,
listeners:{
select : function(combo, record,index)
{
jhField.clearValue(); //可以实现当队下拉值变更时，清空之前井号下拉选项中的值
storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井
storejh.load(); //加载井下拉框的store
}
},
listClass: 'x-combo-list-small', //测试的属性
lastQuery:'', //测试的属性
valueField: 'id',
displayField: 'mc'
});
storedm.load(); //载入队下拉框的信息
//井号字段
var jhField = new Ext.form.ComboBox({
xtype:'combo',
store: storejh,
valueField :"jh",
displayField: "jm",
//数据是在本地
mode: 'local',
//forceSelection: true,//必须选择一项
emptyText:'请选择井号...',//默认值
hiddenName:'JH',//hiddenName才是提交到后台的input的name（既select的value值）
editable: false,//不允许输入
triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
allowBlank:false,//该选项值不能为空
fieldLabel: '井号',
id : 'jh_id',
name: 'JH',
anchor:'90%'
});
</SPAN>
<SPAN style="FONT-SIZE: 18px"> //**测试下拉框级联**
var storedm = new Ext.data.Store({ //队名称下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({
root: 'dms',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'mc'}
])
});
var storejh = new Ext.data.Store({ //井号选择下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
}),
reader: new Ext.data.JsonReader({
root: 'jhs',
id: 'jh'
}, [
{name: 'jh', mapping: 'jh'},
{name: 'jm', mapping: 'jm'}
])
});
</SPAN>
//**测试下拉框级联**
var storedm = new Ext.data.Store({ //队名称下拉框
proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({ root: 'dms', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'mc'} ]) }); var storejh = new Ext.data.Store({ //井号选择下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的 }), reader: new Ext.data.JsonReader({ root: 'jhs', id: 'jh' }, [ {name: 'jh', mapping: 'jh'}, {name: 'jm', mapping: 'jm'} ]) });
[javascript]
<SPAN style="FONT-SIZE: 18px"> //**测试下拉框级联**
var storedm = new Ext.data.Store({ //队名称下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getdm'
}),
reader: new Ext.data.JsonReader({
root: 'dms',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'mc'}
])
});
var storejh = new Ext.data.Store({ //井号选择下拉框
proxy: new Ext.data.HttpProxy({
url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
}),
reader: new Ext.data.JsonReader({
root: 'jhs',
id: 'jh'
}, [
{name: 'jh', mapping: 'jh'},
{name: 'jm', mapping: 'jm'}
])
}); </SPAN>
//**测试下拉框级联** var storedm = new Ext.data.Store({ //队名称下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getdm' }), reader: new Ext.data.JsonReader({ root: 'dms', id: 'id' }, [ {name: 'id', mapping: 'id'}, {name: 'mc', mapping: 'mc'} ]) }); var storejh = new Ext.data.Store({ //井号选择下拉框 proxy: new Ext.data.HttpProxy({ url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的 }), reader: new Ext.data.JsonReader({ root: 'jhs', id: 'jh' }, [ {name: 'jh', mapping: 'jh'}, {name: 'jm', mapping: 'jm'} ]) });
[javascript]
<SPAN style="FONT-SIZE: 18px"> //单位字段
var dwField = new Ext.form.ComboBox({
fieldLabel:'所属队',
name:'DW',
//hiddenName:'DW',//hiddenName才是提交到后台的input的name（既select的value值）
allowBlank:false,
mode: 'local',
readOnly:true,
triggerAction:'all',
anchor:'90%',
emptyText:'请选择...',//默认值
store:storedm,
listeners:{
select : function(combo, record,index)
{
jhField.clearValue(); //可以实现当队下拉值变更时，清空之前井号下拉选项中的值
storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变，动态取出对应的井
storejh.load(); //加载井下拉框的store
}
},
listClass: 'x-combo-list-small', //测试的属性
lastQuery:'', //测试的属性
valueField: 'id',
displayField: 'mc'
});
storedm.load(); //载入队下拉框的信息
//井号字段
var jhField = new Ext.form.ComboBox({
xtype:'combo',
store: storejh,
valueField :"jh",
displayField: "jm",
//数据是在本地
mode: 'local',
//forceSelection: true,//必须选择一项
emptyText:'请选择井号...',//默认值
hiddenName:'JH',//hiddenName才是提交到后台的input的name（既select的value值）
editable: false,//不允许输入
triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
allowBlank:false,//该选项值不能为空
fieldLabel: '井号',
id : 'jh_id',
name: 'JH',
anchor:'90%'
});
</SPAN>