Ext JS: Assign a variable to data from store

Question

I want to change the value in one of my views of my project depending on the user's url. Currently, I have a store class that loads in the url dynamically using the loadStore method.

Ext.define('store.app.appStore', {
extend : 'store.Store'
, model : 'model.app.appModel'  
, alias : 'widget.app-appstore'
, proxy : {
            type : 'rest'
            , url : ''
            , reader : {
                type : 'json'
            }
        }
, loadStore : function(id) {
            this.getProxy().url = app.getApplication().getAppUrl();
            console.log(this.getProxy().url);
            this.load({});
        }
});

And a controller that loads the url depending on the id, and on start up then updates my form with the data.

Ext.define('controller.app.appController', {
extend : 'Ext.app.Controller',

refs :  
        {ref : 'appView', selector : 'app-appview'}
        ],

        stores : ['app.appStore'],     

        init : function() {
            this.control({
                'app-appview' : {
                    selectionchange : this.onStartUp
                }
            });
        },

        onStartUp : function() {
                this.getStore('app.appStore').loadStore();

                this.getAppView().updateForm({PARAMETER});
            }

However, I'm having a problem in working out how to assign a variable to the data I am loading, so that in my updateForm() method I would replace {(PARAMETER)} with the data.

The model looks like this:

Ext.define('model.app.Summary', {
extend : 'Ext.data.Model',

fields : [
   'id', 'name', 'address', 'phone', 'optionOne', 'optionTwo'
],

getId : function() {
    return this.get('id');
},

getName : function() {
return this.get('name');
},

getAddress : function() {
return this.get('address');
},

getPhone : function() {
return this.get('phone');
},

getOptionOne : function() {
return this.get('optionOne');
},

getOptionTwo : function() {
return this.get('optionTwo');
},

});

Any suggestions?

could you explain this `data` thing a bit better? I'm not 100% clear what would you like to pass to your `updateForm()` method — benka, Nov 28 '13 at 15:39
so i'm loading an object which has 6 fields (a basic model). I want to pass in to the updateForm one of the fields. — JJI90, Nov 28 '13 at 15:44

score 1 · Answer 1 · answered Nov 30 '13 at 17:29

You would need to complete the updateForm within the store load event. For instance, add a listener to the load event within the controller's init

init: function () {
        Ext.getStore('app.appStore').on('load', this.LoadFormData);
},

Then within the LoadFormData method you would have access to the loaded data within the store

LoadFormData: function (s) {
        var value = s.data.items[0].get('myFieldFromStore');
        //insert value where required here
}

score 0 · Answer 2 · answered Nov 28 '13 at 16:21

Right, you must have somewhere in your code something like this:

var myObject = Ext.create('Ext.data.ArrayStore', {
    model: 'model.app.Summary',
    data: [['someid','somename', 'someaddress', 'somephone', 'someoptionOne', 'someoptionTwo']]
});

Where you create your object from the data you want to store.

myObject is an ArrayStore in this example which means you can have several items stored in your objects, all with the defined fields.

Assuming you want to get the name property of the first item in myObject

myObject.data.items[0].data.name

I'm not sure about the getWhatever() methods in your model.

Ext JS: Assign a variable to data from store

2 Answers2