extJs 下拉框联动实现代码
作者:bea
代码如下: // 第一个下拉框 var parentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: 'loadByParentid.action?parentid=1001' }), reader: new Ext.data.JsonReader({ root: 'list', id: 'id' }, [ {name: 'id', mapping: 'id'}, {na
代码如下:
// 第一个下拉框
var parentStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});
// 第二个下拉框
var childStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
//这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc', mapping: 'name'}
])
});
{
fieldLabel: '请选择分类',
xtype:'combo',
store: parentStore,
valueField :"id",
displayField: "mc",
mode: 'local',
forceSelection: true,//必须选择一项
emptyText:'请选择分类...',//默认值
hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name
editable: false,//不允许输入
triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
//allowBlank:false,//该选项值不能为空
id : 'parent_id',
name: 'parent',
width: 400,
listeners:{
select : function(combo, record,index){
childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});
childStore.load();
}
}
},{
xtype:'combo',
store: childStore,
valueField :"id",
displayField: "mc",
//数据是在本地
mode: 'local',
forceSelection: true,//必须选择一项
emptyText:'请选择子分类...',//默认值
hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name
editable: false,//不允许输入
triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
//allowBlank:false,//该选项值不能为空
fieldLabel: '选择',
id : 'child_id',
name: 'child',
width: 400
}
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 利用JS重写Cognos右键菜单的实现代码
- 可以将word转成html的js代码
- jquery 表格分页等操作实现代码(pagedown,pageup)
- jquery 模拟雅虎首页的点击对话框效果
- url 编码 js url传参中文乱码解决方案
- javascript 实现页面加载进度条代码
- jquery学习笔记二 实现可编辑的表格
- jquery 图片截取工具jquery.imagecropper.js
- 跟着JQuery API学Jquery 之四 css
- 跟着JQuery API学Jquery 之三 筛选
- 跟着JQuery API学Jquery 之二 属性
- json 入门学习笔记 示例代码
- jquery.AutoComplete.js中文修正版(支持firefox)
- array.prototype.silce.call 理解分析
- JScript中的prototype(原型)属性研究
- javaScript call 函数的用法说明
- javascript 自动填写表单的实现方法
- Extjs入门之动态加载树代码
- JS 非图片动态loading效果实现代码