`
牧羊人
  • 浏览: 215479 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extJs之下拉框联动

EXT 
阅读更多
 //	第一个下拉框
	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脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法 ExtJS4学习笔记(一)---window的创建 ...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    它支持节点的添加、删除、展开和折叠操作,可以进行拖放操作,并且可以与其他ExtJS组件如Grid进行联动。 - 树形控件可以用于文件系统导航、组织架构展示或者任何需要层次结构表示的数据场景。 - 在ExtJS中,树形...

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...

    EXT4.3实现动态表单全动态

    在本文中,我们将深入探讨EXT4.3如何实现动态表单以及与之相关的动态grid功能。 1. **EXT4.3动态表单**: - **组件化设计**:EXT4.3中的表单基于组件模型,可以方便地创建、添加、删除和修改表单字段。通过`Ext....

Global site tag (gtag.js) - Google Analytics