Extended learning ExtJS components list box Ext.ux.Multiselect

Sep 4 posted in Web (RSS), comments.

Advertisements

An extension to use ExtJS: Ext.ux.Multiselect, that is, the list box component. Correlation processing of the components and data binding, dynamic setting

  Summarize the method of dealing with small  :

  One. Data Binding  

//  Create a record type  person

var person = Ext.data.Record.create([

{ name: 'tValue', mapping: 1 },

{ name: 'tText', mapping: 2 },

]);//  Create a data parser  

var reader = new Ext.data.ArrayReader({ id: 0 }, person);//  Create HttpProxy agent  

var proxy = new Ext.data.HttpProxy({

url: '/Admin/Theme.aspx?Action=ThemeList'

});//  Create a data set  Store

var store = new Ext.data.Store({

autoLoad: true,

proxy: proxy,

reader: reader

});

.......................//  Some code  

//  Create Ext.ux.Multiselect components  

new Ext.ux.Multiselect({

id: "theme", name: 'theme',

dataFields: ["tValue", "tText"],

store: store, //  Or use the following data  :

//data: [["1", "  Root  "], ["2", "Image"], ["3", "CSS"], ["4", "JavaScript"], ["5", "resources"]],

valueField: "tValue",

displayField: "tText",

width: 200,

height: 100,

legend: "  Topic list  "

}),.......................//  Some code  

  II. Dynamic set of data items  

var themeStore = Ext.getCmp('theme').store;

if (themeStore != null) {

var record = new Object();

record.tValue = "2";

record.tText = "3";

themeStore.add(new Ext.data.Record(record));

  In fact, the operation here, is only operating  Ext.data.Store  Objects, such as the operation of deleted items  ,  Can query the API documentation  .  In addition, the following lines  :

var themeStore = Ext.getCmp('theme').store;

  Not in the rendering  (render)  Direct access to the event, because  render  Events such as  :Ext.getCmp('theme'),  Not the object is to obtain  (  The reasons for delay  ).

  The solution can be used Ext.util.TaskRunner object  .  Other issues under study  ...

  III. Data entry for  

  Method One  :

Ext.getCmp('theme').getValue();

  Method Two  :

fPanel.getForm().getValues(false)['theme'];

  Note  :fPanel  Multiselect belongs to  FormPanel  Objects, and the value of this method to get  ,  Must be defined to Multiselect  name  Properties  (  Here is   'theme').

  Method Three  :

listeners: {

"click": function(mult, e) {

var value = e.target.innerText;

if (value == null || value == "") {

Ext.getCmp('theme').setValue('');

return;

}

Ext.getCmp('theme').setValue(value);   //m.store.getAt(e.target.viewIndex).data

}

}   Note  :  Only in the click event  ,  In fact here is only displayed e.target.innerText  displayField  Field, not value  .  The  "m.store.getAt(e.target.viewIndex).data"  Click to get to the last line of Record objects  ,  And of course it contains valueField  displayField  Two fields. About how to obtain only  displayField,  Consider the following fifth  .

  IV. Set the radio data items can only be  

  In fact, I originally used the purpose is to set the Multiselect  ComboBox  Higher, so more data elements can browse  .  However, at least until now not found   Multiselect  Object has such a property to set the radio only  (  Found no source of  ),  Ever thought of such a stupid way  :  Click the data to get the last item, and set   ComboBox  The value of the final value of one-click data entry, as  :

new Ext.ux.Multiselect({

id: "theme",

name: "theme",

dataFields: ["tValue", "tText"],

store: themeStore,

valueField: "tValue",

displayField: "tText",

width: 200,

height: 100,

legend: "  Topic list  ",

listeners: {

"click": function(mult, e) {

var value = e.target.innerText;

if (value == null || value == "") {

Ext.getCmp('theme').setValue('');

return;

}

Ext.getCmp('theme').setValue(value);

}

}

})

  Note  :  Parameter e is  click  Arguments passed to the event, and  e.target.innerText  Click the data item is the current value, the method I only  IE  Been tested, other browsers not tested  ,  In order to solve the compatibility problem, you can use the following method to get  :

"click": function(mult, e) {

var values = fPanel.getForm().getValues(false)['theme'];

if (values == null || values == "") {

Ext.getCmp('theme').setValue('');

return;

}

var items = fPanel.getForm().getValues(false)['theme'].split(',');

var item = items[items.length - 1];

Ext.getCmp('theme').setValue(item);

}   Note  :fPanel  Belongs to the Multiselect  FormPanel  Objects, this method is actually the first resolution  Multiselect Components of the final value of one-click data entry, and then re-set  Multiselect  The value of the last time you can click the data item value. Obviously  ,  Method is more cumbersome than the previous point  .

  In addition, in fact, the previous method  ,  Parameters of what properties and methods of e  ,  I come to test, on-line access to a similar method  ,  As  :

function printf(obj) {

var props = "";

for(var p in obj){

if(typeof(obj[p])=="function"){

//obj[p](); //  Members to get to a function, if non-essential  ,  Notes sentence, sometimes because this  js  Not run  .

}else{

props+= p + "=" + obj[p] + "\t";

}

}

alert(props);

}   In this way, you can print parameters  e  The members of which properties to test it  .  Methods  .

  Five. Multiselect extension in order to achieve access to  displayField  Field  

Multiselect.js  File, find the following lines  (3.0  Version  ):

getValue: function(valueField){

........

},

  Later add the following  :

getText: function(valueField) {

var returnArray = [];

var selectionsArray = this.view.getSelectedIndexes();

if (selectionsArray.length == 0) { return ''; }

for (var i = 0; i < selectionsArray.length; i++) {

returnArray.push(this.store.getAt(selectionsArray).get(this.displayField));

}

return returnArray.join(this.delimiter);

},  Can be adopted  Ext.fly('theme').getText()  Access to the current selection of displayField all fields  .