Question

Say, we have the following in a store:

{
    "document": {
        "success": "true",
        "totalAllocation": "40000000.00",
        "fundAllocation": [
            {
                "fundName": "Zais Opportunity Ltd Class B",
                "allocation": "10000000.00"
            },
            {
                "fundName": "Metacapital Mortgage Opportunities Ltd",
                "allocation": "10000000.00"
            },
            ...
        ]
    }
}

And what I’d like to do is something like this:

itemTpl: Ext.create('Ext.XTemplate',
    '<div>',
        '<span>{fundName}</span>',
        '<span>{[this.getPercentage(values.allocation, parent.totalAllocation)]}%</span>',
    '</div>',
    {
        getPercentage: function (allocation, totalAllocation) {
            return Ext.Number.toFixed(allocation / totalAllocation, 2);
        }
    }
)

But, of course, this doesn’t work since ‘parent’ in this scope is empty.

Any idea how to fetch the value of the totalAllocation field inside XTemplate’s fundtion to display the percentage allocated to the current fund in a list item?
Workarounds are welcomed as well.

Answer 1

From your data code it looks like document is the store root because there is a success property underneath it. Assuming that is the case, you can use the store reader’s rawData property to get a reference to the value before you create the template. Then you can simply use the referenced value in the getPercentage function.

Your code does not show where you are creating this itemTpl in your class so I am assuming that you are creating this itemTpl inside the initComponent of the view you are instantiating.

I have no idea what type of component you are trying to create here other than the fact that it has an itemTpl config property which could be any subclass of Ext.view.AbstractView.

So I will assume that you are trying to use this in a gridpanel’s view because that is the most common subclass of Ext.view.AbstractView.

Here’s some code examples.

Example 1:

Ext.define('YourApp.view.TemplateGrid', {
    extend: 'Ext.grid.Panel',

    // column configs etc...

    initComponent: function() {
        var me = this,
            templateStore = Ext.getStore('TemplateStoreId'),
            totalAllocation = templateStore.proxy.reader.rawData.totalAllocation;

        me.viewConfig.itemTpl = Ext.create('Ext.XTemplate',
            '<div>',
                '<span>{fundName}</span>',
                '<span>{[this.getPercentage(values.allocation)]}%</span>',
            '</div>',
            {
                getPercentage: function (allocation) {
                    return Ext.Number.toFixed(allocation / totalAllocation, 2);
                }
            }
        )
    }
});

Example 1 wouldn’t work if you want to be able to load the store again (after initialization), it also assumes that your view store is already loaded. Here’s another example showing the component set-up to handle multiple loads of the store without being recreated, it also assumes that the store is not loaded at the time when you create the view:

Example 2

Ext.define('YourApp.view.TemplateGrid', { // or whatever you are calling it
    extend: 'Ext.grid.Panel',

    // column configs etc...

    totalAllocation = 0, // add this as a view property

    initComponent: function() {
        var me = this,
            templateStore = Ext.create('YourApp.store.TemplateStore');

        templateStore.on('load', function() {
            me.totalAllocation = templateStore.proxy.reader.rawData.totalAllocation;
        }

        me.viewConfig.itemTpl = Ext.create('Ext.XTemplate',
            '<div>',
                '<span>{fundName}</span>',
                '<span>{[this.getPercentage(values.allocation)]}%</span>',
            '</div>',
            {
                getPercentage: function (allocation) {
                    return Ext.Number.toFixed(allocation / me.totalAllocation, 2);
                }
            }
        )
        templateStore.load();
        me.callParent(arguments);
    }
});