ExtJs Combobox 二级联动

最新推荐文章于 2018-10-30 17:27:56 发布

原创最新推荐文章于 2018-10-30 17:27:56 发布 · 9.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #autoload #url #table #function

Ext JS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于ExtJS的项目成员动态绑定实现方案。通过两个下拉框分别展示项目列表及对应的成员名单，当选择不同项目时，能自动更新成员列表。

1.效果如图

当我选择项目名称为达鼎的时候，该项目对应的项目成员有罗坤，许杰

当我选择项目名称为捷富凯的时候，该项目对应的项目成员有罗坤，胡志雄，胡果

//为项目名称准备数据 var projectData_fields=[ {name:"ProjectID"}, {name:"ProjectName"}]; var project_store = new Ext.data.Store ({ autoLoad:true, proxy : new Ext.data.HttpProxy({ url:'../../WebUI/WorkLog/workLog_audit.aspx?AutoLoad=Project' }), reader :new Ext.data.JsonReader({root:"Table",idProperty:"ProjectID",fields:projectData_fields}) }); //根据选择的项目名称得到该项目的成员分配 var MemberName_Fields=[ {name:"UserID"}, {name:"UserName"} ]; var MemberName = new Ext.data.Store ({ autoLoad:true, proxy : new Ext.data.HttpProxy ({ url:'../../WebUI/WorkLog/workLog_audit.aspx?AutoLoad=GetUserList&ProjectID='//+ (ProjectList.value+"") }), reader :new Ext.data.JsonReader({root:"Table",idProperty:"UserID",fields:MemberName_Fields}) }); //加载该经理管理的项目 (添加，编辑使用) var ProjectList=new Ext.form.ComboBox({ id:'ProjectList', name:"ProjectList", fieldLabel:"项目名称", editable:false, ItemIndex:1, store:project_store, mode:'local', selectOnFocus:true, triggerAction:"all", displayField:"ProjectName",//显示的的值绑定 valueField:"ProjectID",//实际选取的值 emptyText:'请选择项目...',//默认值 width:300, listeners: { //为项目(ComboBox)列表添加一个select 事件，当改变ProjectList的值的时候改变 //MemberName(该项目的成员名称)的URL中的参数ProjectID select : function(ProjectCombox, record,index) { // MemberName.proxy= new Ext.data.HttpProxy({url: '../../WebUI/WorkLog/workLog_audit.aspx?AutoLoad=GetUserList&ProjectID=' + ProjectCombox.value}); MemberName.load(); } } }); //项目名称对应的成员名称 var txtMan=new Ext.form.ComboBox({ id:"txtMan", name:"txtMan", fieldLabel:"责任人", store:MemberName, mode:'local', selectOnFocus:true, editable:false, triggerAction:"all", displayField:"UserName",//显示的的值绑定 valueField:"UserID",//实际选取的值 emptyText:'请选择责任人...',//默认值 width:200 });