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 の Fundtion 内の totalAllocation フィールドの値を取得して、現在のファンドに割り当てられたパーセンテージをリスト項目に表示する方法はありますか? 回避策も大歓迎です。

4

1 に答える 1

6

その下にプロパティdocumentがあるため、データ コードからストア ルートのように見えます。successその場合は、ストア リーダーのrawDataプロパティを使用して、テンプレートを作成する前に値への参照を取得できます。次に、参照された値を関数で使用するだけですgetPercentage。

あなたのコードは、クラス内でこれを作成している場所を示していないため、インスタンス化するビュー内でitemTplこれを作成していると想定しています。itemTplinitComponent

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 に答える