EXTJS3 ComboBox Use

ComboBox is widely used in programs, and the options for each ComboBox typically correspond to two values: a value for the foreground display, and a value corresponding to the displayed value. Getting value values in the background uses the Hiddenname property of the ComboBox to get the display value using the name value.

(1) The data source for the option in the ComboBox in ExtJS can be statically loaded (local) and optionally remote loaded (remotely). The way the data source is loaded is set through the properties mode.

(2) The attribute Displayfield,valuefield is used to set the key value for the selected pair in the ComboBox. Sets the value to a string type. These two setting values correspond to keys in the data source. That is, the field name in the data source should correspond to these two properties in order to load the option data.

Test code:

Ext.onready (function () {////////COMB1 Code Add Place///COMB2 Code Add place//interface overall layout, COMB1,COMB2 for test comboboxvar QF = new Ext.fo Rm. Formpanel ({region: ' Center ', Margins: ' 3 3 3 3 ', Height:480,title: ' <span class= ' commoncss ' ><span> ', COLLAPSIBLE:TRUE,BORDER:TRUE,LABELWIDTH:50,//Label width labelalign: ' Right ',//label alignment bodystyle: ' Padding:10 ', LA Yout: ' column ',      autoscroll:true,      items:[{columnWidth:. 6,layout: ' form ', labelwidth:80,//Label width DefaultType: ' TextField ', Border:false,items: [comb1]},{columnWidth:. 6,layout: ' form ', labelwidth:80,//Label width defaulttype: ' Textfi Eld ', Border:false,items: [COMB2]}]}); var viewport = new Ext.viewport ({layout: ' Border ', items: [QF]});

　　

COMB1 test Data: local static data source

var comb1store =  New Ext.data.SimpleStore ({fields                                     : [' showname ', ' VALUE '],                                     data: [[' Type 1 ', ' 0 '], [' Type 2 ', ' 1 ' ]]                                 });  var comb1 = new Ext.form.ComboBox ({      mode: ' local ',//native data       Store:comb1store,      width:300,          Displayfield: ' ShowName ',      valuefield: ' VALUE ',      fieldlabel: ' type '           });

To add auto-completion to the ComboBox, add an attribute to COMB1: typeahead:true

COMB2 Remote Data Load test:

var comb2store = new Ext.data.Store ({      proxy:new Ext.data.HttpProxy ({         url:web_context+ ' xxx.action '         }), C3/>reader:new Ext.data.JsonReader ({}, [{           name: ' VALUE '          }, {           name: ' ShowName '}          ])  }); Ds.load () The data source is already local after the load function is loaded on the page. This data source was loaded into the local  var comb 2 = new Ext.form.ComboBox when the page was loaded  ({      mode: ' local ',//native data      Store:comb2store,        width:300,
TriggerAction: ' All ',                Displayfield: ' ShowName ', Valuefield: ' VALUE ',  fieldlabel: ' type '     };

The above mode: ' Remote ', the data source for remote access.

TriggerAction: The ' All ' property is added on. If not added, remote does not load the data. And when you select an item, clicking Trigger (the small right arrow) does not show the list, only the selected items.

TriggerAction: ' All ',//default to "Query", select a value, select only the matching option, "All" means that all items appear when you select again

(3) The above COMB2 of the two data source settings, set to remote state, when the user first click Trigger, need to interact with the background. The local situation does not.

(4) Add auto-completion of the case, COMB2, in the case of remote excitation auto-completion, need to interact with the background, and the local situation will not. And in the case of remote, after auto-completion, because the interaction with the background causes combo to overwrite the input content, display the first option in the list. WORKAROUND: 1. Set the mode of the ComboBox directly to local,2. Add a method to the data source set the ComboBox to Local.

Combo2store.on ("Load", function () {
Combo2.mode= ' local ';
});

EXTJS3 ComboBox Use