Method of dynamically adding list items in extjs list box (multiselect)

Method of dynamically adding list items in extjs list box (multiselect)_extjs

WBOY

Release： 2016-05-16 18:48:56

Original

1534 people have browsed it

Because this is an ArrayStore that is automatically loaded when it is created (keyword is: data: ds), there is no example of dynamic addition, but our project needs to have three list boxes, and the contents of the last two should be based on the contents of the first list box. Dynamic loading, so when selecting the content of the first list box, the content of the last two list boxes must be dynamically filled. I admire the exjts example writers. They have not written these functions that should be reflected in the example, including The previous example of version 2.2 was not found on the Internet, so I spent a day looking for the function of dynamically controlling list data. First of all, my method is not an official method, it was just an idea that I came up with. The following is the dynamic addition List item method.
Before the method, my store for the multiselect object is defined like this:

Copy code Code As follows:

flowDs = new Ext.data.ArrayStore({ 
data: [[123,123]], 
fields: ['value','text'] 
} ); 

(1)var toflowStore = msForm.getForm().findField('toflow').store; //Get the store object of the multiselect object based on the name;
(2) Create An Ext.data.Record object, this is the method I have been thinking about adding for a long time, and I blame myself for being too stupid:

Copy code The code is as follows:

var record = new Object(); 
record.value = "2"; 
record.text = "3"; 
var records = new Ext.data.Record(record); 

(3) Add the created Ext.data.Record object to the multiselect store object:
toflowStore.add(record1);
Through the above three steps, you can dynamically add list items to the list multisleect. As a reminder, you can delete an item through the remove()/removeAll() method. The specific usage method can be found in ItemSelector.js of the sample code.
After the above analysis, we can roughly estimate the creation rules of multiselect. There is an attribute fields: ['value', 'text'] in the store. When creating, the system will loop through the attribute data: [ The content in [123,123]] is created as an object object, and then written to its store object, similar to the following code:

Copy code The code is as follows:

var item = [],itemObj,record; 
for(var i = 0; i< this.data.length;i ){ 
item = this.data[i]; 
itemObj = new Object(); 
itemObj.value = item[0]; 
itemObj.text = item[1]; 
record = new Ext. data.Record(itemObj); 
this.store.add(record); 
} 

The above is just my guess. Is this how the engineers of extjs designed them? The procedure has not been carefully studied.