CODEWITHSUNDEEP
extjs4.1
Shashidhar Gr
Shashidhar Gr

Reputation: 418

extjs 4.1 how to reset the itemselector

I am using extjs 4.1.1a for developing some application.

I had a form consisting of two combo-boxes and an item-selector.

Based on the value selected in first combo-box , the itemselector will load its data from database. This is working fine.

My problem is, if i reselect the first combo-box the new data will be displayed in itemselector along with previous data displayed in itemseletor .That is previous data displayed in itemselector will remain there itself.

for example: name "test1" consists of ids 801,2088,5000. on selecting test1 in firstcombobox itemselector must show output as below.

and if "test2" consists of ids 6090,5040. on selecting test2 in firstcombobox itemselector must show output as below.

problem is. for first time if i select "test1" from firstcombobox , output will come as expected. if i reselect "test2" from firstcombobox , output will come as below.

as you can see, previous data displayed (marked in red rectagle) remains there itself with new data displayed (marked with green rectangle). I want for every reselection of first combobox, previously displayed data in itemselector to be erased before printing new data on itemselector. How can I reset the itemselector for every reselection of first combobox?

Upvotes: 0

Views: 4262

Answers (7)

Yogendra Rishishwar
Yogendra Rishishwar

Reputation: 1

Need to reset the store used in ItemSelector that can be done by setting Empty object like below. Also need to call clearValue() method of ItemSelector component.

store.setData({});
ItemSelectorComponent.clearValue();

Upvotes: 0

Muzaffer Galata
Muzaffer Galata

Reputation: 642

Any solutions above solve my problem. i found solution from Sencha Forum. https://www.sencha.com/forum/showthread.php?142276-closed-Ext-JS-4.0.2a-itemselector-not-reloading-the-store

in the itemselector.js file, change the line marked below.

populateFromStore: function(store) {
    var fromStore = this.fromField.store;

    // Flag set when the fromStore has been loaded
    this.fromStorePopulated = true;

    // THIS LINE BELOW MUST BE CHANGED!!!!!!!!!!!!
    fromStore.loadData(store.getRange()); //fromStore.add(store.getRange()); 

    // setValue waits for the from Store to be loaded
    fromStore.fireEvent('load', fromStore);
},

Upvotes: 1

Marc Romera
Marc Romera

Reputation: 1

I had the same problem and finally I decided to modify the extjs source code, not considering it a big issue as extjs itself its saying in the start of the file

Note that this control will most likely remain as an example, and not as a core Ext form control. However, the API will be changing in a future release and so should not yet be treated as a final, stable API at this time.

Based on that, as jstricker guessed (and sadly I didn't read and took me a while to arrive to the same conclusion), adding fromStore.removeAll() before fromStore.add() solves the problem.

Outside of the problem (but I think it can be interesting as well), additionally, I also added listConfig: me.listConfig in the MultiSelect configuration (inside createList), that way it's possible to format each item additional options (such as images, etc.) setting in the 'itemselector' the option listConfig as it's explained in the (irrealistic) documentation.

Upvotes: 0

jstricker
jstricker

Reputation: 2180

I ran into the same issue with ExtJS 4.2.1. I got it to work by calling reload() on the data store and then setValue() with an empty string on the item selector in the data store's reload() callback.

Ext.create("Ext.form.field.ComboBox", {
    // Other properties removed for brevity
    listeners: {
        change: function(field, newValue, oldValue, eOpts) {
            Ext.getStore("ExampleStore").reload({
                callback: function() {
                    Ext.getCmp("ExampleItemSelector").setValue("");
                }
            });
        }
    }
});

Ext.create("Ext.data.Store", {
    storeId: "ExampleStore",
    // Other properties removed for brevity
});

Ext.create("Ext.form.FormPanel", {
    // Other properties removed for brevity
    items:[{
        xtype: "itemselector",
        id: "ExampleItemSelector",
        // Other properties removed for brevity
    }]
});

For any folks that are curious, I'm fairly convinced there's a bug in the item selector's populateFromStore() function. When the function is called, it blindly adds all of the values from the bound store (store) to the internal store (fromStore). I suspect there should be a call to fromStore.removeAll() prior to the call to fromStore.add(). Here's the relevant code from ItemSelector.js.

populateFromStore: function(store) {
    var fromStore = this.fromField.store;

    // Flag set when the fromStore has been loaded
    this.fromStorePopulated = true;

    fromStore.add(store.getRange());

    // setValue waits for the from Store to be loaded
    fromStore.fireEvent('load', fromStore);
},

EDIT 12/18/2013

If you've configured any callback events on the item selector (e.g. change), you may want to disable the events temporarily when you call setValue(""). For example:

var selector = Ext.getCmp("ExampleItemSelector");
selector.suspendEvents();
selector.setValue("");
selector.resumeEvents();

Upvotes: 0

Mark Twain
Mark Twain

Reputation: 836

You should remove all items from the store of the itemselector by the removeAll command. After that you should load the store of the itemselector.

itemselector.store.removeAll();
itemselector.store.load();

Upvotes: 1

ravi9999
ravi9999

Reputation: 87

are u got it? when u select that combobox frist stoe of item selector is null after store load with ur pass the para meters

for example

store.load(null), store.proxey.url='jso.php?id='+combobox.getrawvalue(), store.load();

like that so when ur select a value in ur combobox that time ur used a listeners to ur combobox in that listners ur used above code , select ur some value in combobox that time frist store is get null after ur pass some values to json.php then store load with responce so that time old data is remove and new data load in that store

if u post ur code i will give correct code

Upvotes: 0

Ian Atkin
Ian Atkin

Reputation: 6356

You need to insert...

this.reset();

at the head of the function that is inserting the data.

As an example...

Ext.override( Ext.ux.ItemSelector, {
    setValue: function(val) {
        this.reset();
        if (!val) return;
        val = val instanceof Array ? val : val.split(this.delimiter);
        var rec, i, id;
        for (i = 0; i < val.length; i++) {
            var vf = this.fromMultiselect.valueField;
            id = val[i];
            idx = this.toMultiselect.view.store.findBy(function(record){
                return record.data[vf] == id;
            });
            if (idx != -1) continue;            
            idx = this.fromMultiselect.view.store.findBy(function(record){
                return record.data[vf] == id;
            });
            rec = this.fromMultiselect.view.store.getAt(idx);
            if (rec) {
                this.toMultiselect.view.store.add(rec);
                this.fromMultiselect.view.store.remove(rec);
            }
        }
    }
});

Upvotes: 0

Related Questions