Search code examples
javascriptextjsmodel-view-controllerextjs4

ExtJS: get store attribute from parent


I've got a component like this

Ext.define('Fleximanager.view.pages.home', {
extend: 'Fleximanager.view.main.FlexiTab',

store: Ext.create('Fleximanager.store.hometables'), // this is the store for each instance
items: [{
    xtype: 'dateselector'
},{
    xtype: 'dataview',
    flex: 5,
    store: this.up('flexitab').store, //this store should be the same as above
    itemTpl: new Ext.XTemplate(
        //the xtemplate here
     )
 }]
});

where the store should be created with each new instance of this class and then it should be accessible from the dataview item. Here's the FlexiTab definition:

Ext.define('Fleximanager.view.main.FlexiTab', {
    extend: 'Ext.panel.Panel',  
    xtype: 'flexitab',  
    requires: [
        'Fleximanager.view.tools.DateSelector'
    ],

    closable: true,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    initComponent: function(){
        this.reload();
        this.renderTo = Ext.getBody();
        this.callParent();
    },
    reload: function(extraParams){
        params = {
            hostname: sessionStorage.hostname,
            auth: sessionStorage.authSessionId,
            corp: sessionStorage.activeCorp
        };
        if(typeof extraParams !== "undefined"){
            for (var key in extraParams){
                params[key] = extraParams[key];
            }
        }
        this.store.load({
            params: params,
            callback: function(records, operation, success) {
                console.log('successfully loaded store: ', records);
            }
        });
    }
});

However I always get an error: Uncaught TypeError: undefined is not a function which refers to the up() function, so it seems the dataview item doesn't have up() method. My question is: how can I access the store instance?

Thanks for any reply


Solution

  • ([EDIT]: changed the code to define the store as an object property)

    Have you tried this?

    Ext.define('Fleximanager.view.pages.home', {
        extend: 'Fleximanager.view.main.FlexiTab',
        initComponent: function(){
            this.store = Ext.create('Fleximanager.store.hometables');
            this.items = [{
                xtype: 'dateselector'
            },{
                xtype: 'dataview',
                flex: 5,
                store: this.store, //this store should be the same as above
                itemTpl: new Ext.XTemplate(
                    //the xtemplate here
                )
            }];
            Ext.Panel.prototype.initComponent.apply(this, arguments);
        }
    });
    

    You can see an example here: http://jsfiddle.net/6ubSL/