如何从Sencha Touch中的itemTpl的XTemplate访问rootProperty之外的字段？

Question

比如,我们在商店中有以下内容:

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

而我想做的是这样的事情:

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);
        }
    }
)

但是,当然,这不起作用,因为此范围内的"父"是空的.

知道如何获取XTemplate基金内的totalAllocation字段的值,以显示在列表项中分配给当前基金的百分比？也欢迎变通方法.

Answer 1

从您的数据代码看起来document是商店根目录,因为success它下面有一个属性.假设是这种情况,您可以使用商店读者的rawData属性在创建模板之前获取对该值的引用.然后您可以简单地使用getPercentage函数中的引用值.

您的代码不显示你正在创建这个地方itemTpl在你的类,所以我假设你正在创建这个itemTpl里面initComponent你实例化视图.

我不知道你试图在这里创建什么类型的组件,除了它有一个itemTplconfig属性,可以是任何子类Ext.view.AbstractView.

所以我假设您正在尝试在gridpanel的视图中使用它,因为这是最常见的子类Ext.view.AbstractView.

这是一些代码示例.

例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);
                }
            }
        )
    }
});

如果您希望能够再次加载存储(初始化后),示例1将无效,它还假定您的视图存储已加载.这是另一个示例,显示组件设置以处理多个商店负载而不重新创建,它还假定在创建视图时未加载商店:

例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);
    }
});