CODEWITHSUNDEEP
extjsextjs4extjs4.1extjs-mvc
Mr_Green
Mr_Green

Reputation: 41832

Change the store api from controller in extjs

The below is my MyStore.js:

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.Note',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        api: {
            /* I want to change the following two filepaths */
            read: 'data/notesMar2013.json',
            update: 'data/notesMar2013.json' 
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});

I am trying to change the read and update values in api of MyStore through controller as follows:

var notesStore = Ext.getStore('MyStore');
notesStore.on('load',function(notesStore){
        var proxy = notesStore.getProxy();
        Ext.apply(proxy.api,{
            /* Changing the file paths here */
            read: 'data/notesApr2013.json',
            update: 'data/notesApr2013.json' 
        })
        notesStore.load();                              
},this,{single:false});
//
console.log(notesStore);

By using the above function, I am trying to update MyStore but it is not happening. When I checked in chrome console the values are changed successfully but not updating or overriding the store even I used notesStore.load(). What could be the problem?

I referred the below links

Answer: The code was working fine. Let me explain my problem: I was showing the contents from the store on a container and initially, the container was filled with some content and the height was fixed. If I even add any content to the container then it will become hidden as the container is with fixed height. Till now, the content was being appended to the default content instead of removing the default content and then adding. That was the actual problem.

Upvotes: 3

Views: 2723

Answers (1)

sra
sra

Reputation: 23973

That should work without any problem, hence you have a error at any other point. Please take a look at the console in this JSFiddle. In here's the test-code I used

Ext.define('MyApp.model.Note',{extend:'Ext.data.Model'});
Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.Note',
    proxy: {
        type: 'ajax',
        getUrl: function(request) {
            console.log('fetched request url');
            console.log(this.api[request.action]);
            return request.url || this.api[request.action] || this.url;
        },
        api: {
            /* I want to change the following two filepaths */
            read: 'data/notesMar2013.json',
            update: 'data/notesMar2013.json' 
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});
var store = Ext.create('MyApp.store.MyStore');
console.log('The origin API');
console.log(store.getProxy().api);
store.load();
var proxy = store.getProxy();
var newApi =  {read: 'data/2013.json', update: 'data/2013.json' };
Ext.apply(proxy.api,newApi);
console.log('The changed API');
console.log(store.getProxy().api);
store.load();

Upvotes: 2

Related Questions