ExtJS：菜單ComboBox及串聯功能表應用

ExtJS：菜單ComboBox及串聯功能表應用

首頁一級菜單查詢分組，二級菜單查詢分組中的車輛資訊。

定義分組資料模型：

Ext.define('group',{extend:'Ext.data.Model',fields:[        {name:'groupid',mapping:'groupid',type:'int'},        {name:'groupname',mapping:'groupname',type:'string'}]});

定義分組groupStore：

var groupStore = Ext.create('Ext.data.Store', {model:'group',proxy : { type:'ajax',url : 'group/getgroup'  ,//請求urlreader : ({type:'json',totalProperty: "totalAllGroup",  //totalRecords屬性由json.results得到successProperty: true,    //json資料中，儲存是否返回成功的屬性名稱root: 'dataOfAllGroup'  ,        //構造中繼資料的數組由json.rows得到//idProperty : "id"       }),       autoLoad:true,    remoteSort:true}});groupStore.load();//載入資料

定義分組ComboBox

var groupCombo = Ext.create('Ext.form.ComboBox', {id : 'group',fieldLabel : '所屬部門',labelSeparator : '：',labelWidth: 80,triggerAction : 'all',store : groupStore,displayField : 'groupname',valueField : 'groupid',loadingText : '正在載入資料...',queryMode : 'local',forceSelection : true,value: '',typeAhead : true,width: 240,allowBlank:false,    margin: '3 5 3 10',    emptyText : '請選擇所屬部門',    listeners:{     //用於二級菜單，若是單菜單可注釋掉該監聽事件    select : function(combo, record,index){       Ext.getCmp('device').clearValue();//上級combo在select事件中清除下級的value    Ext.getCmp('device').getStore().load({    url: 'device/getdevice/' + combo.value,    });    }         }});

以上是單菜單的代碼，添加二級菜單，參考下面：

定義車輛資料模型：

Ext.define('model',{extend:'Ext.data.Model',fields:[        {name:'id',mapping:'id',type:'int'},        {name:'carno',mapping:'carno',type:'string'}]});

定義車輛deviceStore：

var deviceStore = Ext.create('Ext.data.Store', {model:'model',proxy : { type:'ajax',url : 'device/getdevice'  ,reader : ({type:'json',totalProperty: "totalAllDevice",  //totalRecords屬性由json.results得到successProperty: true,    //json資料中，儲存是否返回成功的屬性名稱root: 'dataOfAllDevice'  ,        //構造中繼資料的數組由json.rows得到//idProperty : "id"       }),}});

定義車輛ComboBox

var deviceCombo = Ext.create('Ext.form.ComboBox', {id : 'device',fieldLabel : '車牌號',labelSeparator : '：',labelWidth: 80,triggerAction : 'all',store : deviceStore,displayField : 'carno',valueField : 'carno',loadingText : '正在載入資料...',queryMode : 'local',forceSelection : true,value: '',typeAhead : true,width: 240,allowBlank:false,    margin: '3 5 3 10',    emptyText : '請選取查詢的車輛'});

重點在於：queryMode : 'local',如果不選擇從本地擷取資料來源，則會重新去遠程remote擷取。