ExtJS: Menu combobox and cascading menu application

First Level menu Query Group, Level two menu query the vehicle information in the group.

To define a grouped data model:

Ext.define (' group ', {extend: ' Ext.data.Model ', fields:[        {name: ' GroupID ', Mapping: ' GroupID ', type: ' int '},        { Name: ' GroupName ', mapping: ' GroupName ', type: ' String '}]});

Define grouping Groupstore:

var groupstore = ext.create (' Ext.data.Store ', {model: ' Group ', proxy: {type: ' ajax ', url: ' Group/getgroup '  ,// Request Urlreader: ({type: ' json ', Totalproperty: "Totalallgroup",  //totalrecords property json.results by Successproperty: True,    //json data, whether the save returns the successful property name root: ' Dataofallgroup '  ,        //array of construction metadata is obtained//idproperty by json.rows: "id"       }) ,       autoload:true,    remotesort:true}); Groupstore.load ();//Load data

Define grouping combobox

var Groupcombo = ext.create (' Ext.form.ComboBox ', {ID: ' group ', Fieldlabel: ' Department ', Labelseparator: ': ', labelwidth:80,tr Iggeraction: ' All ', Store:groupstore,displayfield: ' GroupName ', Valuefield: ' GroupID ', Loadingtext: ' Loading data ... ', Querymode: ' Local ', Forceselection:true,value: ', Typeahead:true,width:240,allowblank:false,    margin: ' 3 5 3 10 ', C1/>emptytext: ' Please select Department ',    listeners:{     //For Level two menu, if single menu can comment out the Listener event    select:function (combo, Record,index) {       ext.getcmp (' device '). ClearValue ();//Superior combo Clears subordinate value    in select Event EXT.GETCMP (' device '). GetStore (). Load ({    URL: ' device/getdevice/' + Combo.value,    });}}         );

The above is a single-menu code, add Level two menu, refer to the following:

Define Vehicle Data Model:

Ext.define (' model ', {extend: ' Ext.data.Model ', fields:[        {name: ' ID ', mapping: ' ID ', type: ' int '},        {name: ' Carno ', Mapping: ' Carno ', type: ' String '}]});

Define Vehicle Devicestore:

var devicestore = ext.create (' Ext.data.Store ', {model: ' Model ', proxy: {type: ' ajax ', url: ' Device/getdevice '  , Reader: ({type: ' json ', Totalproperty: ' Totalalldevice ',  //totalrecords property is successproperty:true by Json.results,    //json The data, save whether to return the successful property name root: ' Dataofalldevice '  ,        //The array of construction metadata is obtained by json.rows//idproperty: "id"       }),}});

Define vehicle combobox

var Devicecombo = ext.create (' Ext.form.ComboBox ', {ID: ' Device ', Fieldlabel: ' License plate number ', Labelseparator: ': ', labelwidth:80,t Riggeraction: ' All ', Store:devicestore,displayfield: ' Carno ', Valuefield: ' Carno ', Loadingtext: ' Loading Data ... ', Querymode : ' Local ', Forceselection:true,value: ', Typeahead:true,width:240,allowblank:false,    margin: ' 3 5 3 ',    empty Text: ' Please select the vehicle to be queried '});

The point is: querymode: ' Local ', if you do not choose to get the data source locally, it will be re-fetched remotely.

ExtJS: Menu combobox and cascading menu application