ExtJS Combobox 的聯動

這就是熬夜的成果！

非常的滿意

也感謝google大神與網路上眾多人的經驗分享

讓小弟的功力更上一層樓 

ps.熬夜真的會傷身阿.... 

以下趕快來分享我的code吧!!! 





//----------------第一個combobox選項----------------------

    faculty_ds=new Ext.data.Store({

        proxy: new Ext.data.ScriptTagProxy({

          url: 'combo_faculty.php'

        }),

        // create reader that reads the Topic records

        reader: new Ext.data.JsonReader({

          root: 'data',

          totalProperty: 'totalCount',

          id: 'faculty_id'

         }, [

          {name: 'faculty_id'},

          {name: 'faculty_name'}

         ]),

   // turn off remote sorting for local sorting

         remoteSort: false

 });

 //----------------------------------------------------

 

 //-------------第二combobox選項-----------------------

 faculty_ch_ds=new Ext.data.Store({

          proxy: new Ext.data.ScriptTagProxy({

                method:'post',

                url: 'combo_ch_faculty.php'

           }),

           autoLoad:'false',

              // create reader that reads the Topic records

          reader: new Ext.data.JsonReader({

             root: 'data',

             totalProperty: 'totalCount',

             id: 'ch_fa_id'

           }, [

             {name: 'ch_fa_id'},

             {name: 'ch_fa_name'}

    ]),

     // turn off remote sorting for local sorting

           remoteSort: false

  });

 //----------------------------------------------------------

 //-----------------------建立第一個combobox------------------

 facombo = new Ext.form.ComboBox({

      fieldLabel: '請選擇xx',

      //disabled:true,

                 name: 'faculty',

                 mode: 'remote',

                 store: faculty_ds,

                 displayField:'faculty_name',

                 valueField:'faculty_id',

                 allowBlank :true,

                 emptyText:'請選擇xx...',

                 typeAhead: true,

                 triggerAction:'all',

                 editable: false,

                 forceSelection: true

    });

 //-------------------------------------------------------

 //----------------------建立第二個combox---------------------------

 ch_fa_combo = new Ext.form.ComboBox({

      //disabled:true,

      fieldLabel: '請選擇xx',

                 name: 'faculty',

                 mode: 'local',

                 store: faculty_ch_ds,

                 displayField:'ch_fa_name',

                 valueField:'ch_fa_id',

                 allowBlank :true,

                 emptyText:'請先選擇xx...',

                 typeAhead: true,

                 triggerAction:'all',

                 editable: false,

      //renderTo:'fa',

                 forceSelection: true

    });

 //---------------------------------------------------------

 

 var testform = new Ext.FormPanel({

  labelWidth: 75, // label settings here cascade unless overridden

        frame:true,

        title: 'xx查詢',

        bodyStyle:'padding:5px 5px 0',

        width: '100%',

        defaults: {width: 230},

        defaultType: 'textfield',

  

  

  items: [{

    id: 'first',

    fieldLabel: 'First Name',

    name: 'first',

    value: 'test',

                allowBlank:false

    },facombo,ch_fa_combo]

 });

 testform.render(Ext.get("tform"));

 

 

 facombo.on('select',ajax_combo);

 

 function ajax_combo(){

  var va = facombo.getValue();

  //alert(va);

  ch_fa_combo.store.reload({params:{ch:va}});

  //faculty_ch_ds.load({params:{ch:va}});

}



大部分code都沒什麼好講的

唯獨我標明紅色的部份是最重要的！

要非常注意

要變動的combobox remote一定要設為local!!

如果設remote

在第一次store.reload的時後會出錯

雖然第二次之後會正常

但是沒有人的網頁是第一次出錯接下來正常的吧～？

卡在這卡了最久....

決定把他記錄下來！

如有說明錯誤歡迎指正