EXT学习之——Ext下拉框绑定以及级联写法

EXT学习之——Ext下拉框绑定以及级联写法

/*******步骤有四个，缺一不可*********/function () {xxxxxx = Ext.extend(construct, {InitControl: function () { var _this = this;/*****************步骤一：建数据store ******************///一级下拉框数据（此处注意，一定要把store写在combobox控件定义的前面，否则无法加载数据）

var moduleStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ type: 'ajax', url: '/xx//Getxx?c=' + (new Date()).toString(), extraParams: { dept_Id: comboboxOutdept.getValue() }, reader: { root: 'Rows', totalProperty: 'Total', type: 'json' } }), autoLoad: true, fields: ['ID', 'NAME','CODE'] //后台返回的字段名 });

/***********步骤二：建combobox对象并绑定store ********/

//一级下拉框绑定数据 var moduleCombo = new Ext.form.field.ComboBox({ fieldLabel: "申请医院", columnWidth: .271, //调整下拉框宽度 labelAlign: 'right', labelWidth: 60, id: this.namespace + '_orgNameCombo', store: moduleStore, //绑定数据store editable: false, displayField: "NAME", valueField: "ID", emptyText: "--请选择医院--", queryMode: "local", style: 'padding-top:20px;margin-left:30px;', listeners: { 'select': function () { //级联下拉框 comboboxdept.setValue(''); deptStore.load({ url: '/xx/GetDepts?c=' + (new Date()).toString() + '&orgId=' + moduleCombo.getValue() }); } } }); //二级下拉框数据 var deptStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ type: 'ajax', url: '/xx/GetDepts?c=' + (new Date()).toString(), reader: { root: 'Rows', totalProperty: 'Total', type: 'json' } }), fields: ['ID', 'CODE', 'NAME'] }); //二级下拉框绑定数据 var comboboxdept = new Ext.form.ComboBox({ xtype: "combobox", name: "Gender", fieldLabel: "申请科室", columnWidth: .271, //调整下拉框宽度 labelAlign: 'right', labelWidth: 60, id: this.namespace + '_deptCombo', store: deptStore, //绑定数据store editable: false, displayField: "NAME", valueField: "CODE", emptyText: "--请选择科室--", queryMode: "local", style: 'padding-top:20px;margin-left:30px;' });

//接上面同级

/**********步骤三：创建panel并将combobox控件绑定到界面****************/

this.bodyPanel = new Ext.Panel({ layout: 'border', bodyStyle: 'padding:1px;', defaults: { minHeight: 25, style: 'padding-top:1px;' }, items: [ {

xtype: 'panel', layout: 'column', style: 'padding-left:2px;',

columnWidth: 1, region: 'center', items: [ { xtype: 'panel', layout: 'column', style: 'padding-left:2px;',

id: this.namespace + '_downLoadReferralRecord_first', columnWidth: 1, items: [{

xtype: 'textfield', fieldLabel: '身份证号', labelWidth: 65, id: this.namespace + '_idno', height: 25, emptyText: '请输入身份证号', labelAlign: 'right', columnWidth: .3, style: 'padding-top:10px;' },

//或者直接扔combox进去

moduleCombo ,

comboboxdept//换行写法，该写法会换行

{ xtype: 'label', columnWidth: .5, text: '' }, { xtype: 'label', columnWidth: 1, height: 0, text: '', style: 'font-size:2px;' }

]},

。。。

/***********步骤四：触发store数据加载 *****************/

在 panel下的params，隔壁加个监听事件

],listeners: {render: function () {//加载时的遮罩层_this.mask = new Ext.LoadMask(_this.bodyPanel.getEl(), '数据交互中...');_this.moduleStore.load();_this.deptStore.load();}}

/**********步骤四：赋值store数据 ************/

在InitControl最后一个项加

Ext.apply(this, { grid: grid, //列表对象 store: store, moduleStore: moduleStore,  //不加的话会导致数据不会到后台去读取 deptStore: deptStore }); }

,

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。