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。

我不知道你试图在这里创建什么类型的组件，除了它有一个itemTpl配置属性，它可以是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);
    }
});

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

1 个答案: