2

假设我们在商店中有以下内容：

{
    "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 字段的值，以在列表项中显示分配给当前基金的百分比吗？也欢迎解决方法。

4

1 回答 1

6

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

您的代码没有显示您itemTpl在类中创建它的位置，所以我假设您是itemTpl在initComponent实例化的视图中创建它。

我不知道你在这里尝试创建什么类型的组件，除了它有一个itemTpl配置属性，它可以是Ext.view.AbstractView.

所以我会假设你正试图在网格面板的视图中使用它，因为这是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);
    }
});
于 2012-08-28T16:17:07.360 回答