CODEWITHSUNDEEP
javascriptextjsextjs4extjs4.1
Isaac
Isaac

Reputation: 2721

Pass config to a custom Ext.tree.Panel and then to a custom Ext.data.Store

How can I pass a variable to an extended Ext.tree.Panel, which in turn, will pass it a custom Ext.data.Store.

Here is my code:

Ext.define('CustomStore', {
    extend: 'Ext.data.TreeStore',
    alias: 'widget.customstore',
    folderSort : true,
    model : 'TreeNode',
    autoLoad: true,
    config: {
        customParam: 'defaultVal'
    },
    ...
    proxy: {
        url: '/some/url?param'+this.customParam,
        ...
    }
});
Ext.define('CustomTree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.customtree',
    config: {
        customParam2: 'defaultVal'
    },
    store: new CustomStore({customParam: this.customParam2'}),
    ...
});

var tree = Ext.create('CustomTree', {customParam2: 'someVal'});

As you can see, I want to pass a value someVal to the tree, which should pass it down to the store, the proxy of the store then needs to pick it up and use in its load url.

Tried many things, to name a few: config, initConfig, constructor, initComponent but with no good outcome.

Upvotes: 0

Views: 347

Answers (1)

rixo
rixo

Reputation: 25001

You've got the right ingredients but you don't mix them in the right order.

The problem here is that your store creation code:

new CustomStore({customParam: this.customParam2'})

gets called before the definition of CustomTree:

Ext.define('CustomTree', ...)

This is because new CustomStore(...) is used as argument to the define function. So, obviously, it is also called before the line that sets the value of customParam2:

var tree = Ext.create('CustomTree', {customParam2: 'someVal'});

So in order to make it work, you want to create your store when the constructor of CustomTree is called. But when working with components, it is best to override initComponent instead of the constructor. So here's how you should do it:

Ext.define('CustomTree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.customtree',
    config: {
        customParam2: 'defaultVal'
    },
    // remove that
    // store: new CustomStore({customParam: this.customParam2'});

    // ... and put it in there:
    initComponent: function() {

        // creates the store after construct
        this.store = new CustomStore({customParam: this.customParam2});

        // call the superclass method *after* we created the store
        this.callParent(arguments);
    }
    ...
});

As for initConfig, you have to call it in the constructor in order for you're config params to be applied. But in your case, you're extending from Ext.data.Store and Ext.tree.Panel, and their constructor already calls it, so you don't have to do it yourself.

Upvotes: 1

Related Questions