How to dynamically assign value to the store in ExtJS Itemselector?

Question

I have to fill values in the right multiselect box in an itemselector. First i need to keep it blank and then on selection of an item in the combo box above it, i have to fill values accordingly. I have tried this and its crashing at the moment and nothing seems wrong. Here is the code snippet:

var userList = GetUserList();
    var aoiList = GetAOIList();
    var userAOIs = "";
    var selectedUser="";    

    var userStore = new Ext.data.ArrayStore({
                fields: ['user'],
                data: userList
            });

    var aoiStore = new Ext.data.ArrayStore({
        fields: ['aoiList'],
        data: aoiList
    }); 
    var userAOIStore = new Ext.data.ArrayStore({
        fields: ['userAOIs'],
        data: userAOIs
    });     

    var aafp = new Ext.FormPanel({
        width : 350,
        frame : true,
        autoHeight : true,
        bodyStyle : 'padding: 2px 5px 0 2px;',
        labelWidth : 100,
        defaults : {
            anchor : '95%',
            allowBlank : false,
            msgTarget : 'under'
        },
        items : [ {
            xtype : 'combo',
            fieldLabel : 'Choose User',
            emptyText: "Select User...",
            id : 'userId',
            name : 'user',
            multiSelect: false,
            store: userStore,
            displayField: 'user',
            mode: 'local',
            editable: false,
            typeAhead: true,
            triggerAction: 'all',
            listeners:{select:{fn:function(combo, value) {
                selectedUser = value.get('user');
                userAOIs = myAOIs(selectedUser);                
                userAOIStore = new Ext.data.ArrayStore({
                    fields: ['userAOIs'],
                    data: userAOIs});
                aafp.getForm().findField("itemselector").reset();
                }}
            },
            value : selectedUser

        },{         
            xtype: 'itemselector',
            name: 'itemselector',
            fieldLabel: 'AOISelector',
            imagePath: 'ext-3.4.0/examples/ux/images/',
            drawUpIcon:false,
            drawDownIcon:false,
            drawTopIcon:false,
            drawBotIcon:false,
            multiselects: [{
                width: 250,
                height: 200,
                store: aoiStore,
                displayField: 'aoiList'               
            },{
                width: 250,
                height: 200,
                store: userAOIStore,
                displayField: 'userAOIs',
                valueField: 'userAOIs'          
            }]  
    }]

Initially i doubted the "aafp.getForm().findField("itemselector").reset()" call and thought that there might be some other function to dynamically reload the elements in the form, instead of reset which might be used to reset/erase the data in the fields but reset is reloading the contents. Please provide your inputs how this could be achieved?

Thanks

Answer 1

Thanks for your inputs, it was helpful.

I found the problem: I was creating a new instance of Ext.data.ArrayStore but the view was linked to the previous instance. So i used the previous instance, removed everything from it and added new records, jus as theboulderer suggested. But I found that we don't have to catch the handle of itemselector store, it was automatically updated with the modified store.

sample:

            var tempUserAOIStore = new Ext.data.ArrayStore({
                     fields: ['userAOIs'],
                    data: [['8'], ['9']]
                    });
            userAOIStore.removeAll();
            userAOIStore.add(tempUserAOIStore.getAt(0));
            userAOIStore.add(tempUserAOIStore.getAt(1));                

Now this facility in ArrayStore is also a problem for me as the stores are so tightly binded that if i want to keep the original in some temp store, it is also modified. i.e.

if i do :

B = A; 

Itemselector: store = A

A.remove(some records)

I find that B is also modified as A is modified. I am answering here so guess have to post this as a seperate question

Answer 2

You can try this:

1) Create the stores. 2) Add the stores to the components 3) When the listener 'selected' is fired get the component who store you would like to dynamical add to and create a new record and add it to the store.

EDIT: Try something like this (its what I think you want) note the code isn't exact since I'm not sure what exactly you want to do but it should give you an idea of what you need to do.

listeners:{select:{fn:function(combo, value) {
               var selectedUser = value.get('user');

           var record = Ext.data.Record.create([
                 'user' : selectedUser 
                ]);

               var cmp = Ext.getCmp('compId');//Get the comp that contains the store you want to add to put the cmp id here to look it up
               cmp.store.removeAll();//Clear the store
           cmp.store.add([record]);//Add the new record into the store

    }, this}