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
});
}

,