初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

(ExtJS6.5)associatedDataコンフィグ[modern]

ExtJS6.5で、Ext.dataview.AbstractクラスにassociatedDataコンフィグが追加されました。

Ext.dataview.Abstractは、リストやグリッドの基底クラスです。

リストやグリッドのようなデータビューのレンダリング処理では、ストアのモデルのデータをitemTplコンフィグで指定されたテンプレート内の変数に埋め込みます。

その際、アソシエーション付けしたフィールドがあると、レンダリング処理の中でそのデータも全て取得しようとします。

はじめから表示する項目にアソシエーションのデータが含まれないのであれば、それを除外できたほうがパフォーマンス上有利です。

associatedDataコンフィグを使うとその設定を実現できます。

モデルとストア

Ext.define('Sample.model.Address', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'state',
            type: 'string'
        },
        {
            name: 'cities',
            type: 'string'
        }
    ]
});

Ext.define('Sample.model.User', {
    extend: 'Ext.data.Model',

    requires: [
        'Sample.model.Address'
    ],

    fields: [
        {
            name: 'id',
            type: 'int'
        },
        {
            name: 'name',
            type: 'string'
        },
        {
            name: 'tel',
            type: 'string'
        },
        {
            name: 'age',
            type: 'int'
        },
        {
            name: 'address',
            reference: 'Sample.model.Address'
        }
    ]
});

Ext.define('Sample.store.User', {
    extend: 'Ext.data.Store',

    requires: [
        'Sample.model.User'
    ],

    model: 'Sample.model.User',

    proxy: 'memory',

    data: [
        {id: 1, name: 'yamada1', tel: '09011111111', age: 35, address: {state: '鹿児島県', cities: '鹿児島市1'}},
        {id: 2, name: 'yamada2', tel: '09022222222', age: 28, address: {state: '鹿児島県', cities: '鹿児島市2'}},
        {id: 3, name: 'yamada3', tel: '09033333333', age: 24, address: {state: '鹿児島県', cities: '鹿児島市3'}},
        {id: 4, name: 'yamada4', tel: '09044444444', age: 20, address: {state: '鹿児島県', cities: '鹿児島市4'}},
        {id: 5, name: 'yamada5', tel: '09055555555', age: 62, address: {state: '熊本県', cities: '熊本市1'}},
        {id: 6, name: 'yamada6', tel: '09066666666', age: 61, address: {state: '熊本県', cities: '熊本市2'}},
        {id: 7, name: 'yamada7', tel: '09077777777', age: 40, address: {state: '熊本県', cities: '熊本市3'}},
        {id: 8, name: 'yamada8', tel: '09088888888', age: 38, address: {state: '熊本県', cities: '熊本市4'}},
        {id: 9, name: 'yamada9', tel: '09099999999', age: 32, address: {state: '熊本県', cities: '熊本市5'}}
    ]
});

Ext.define('Sample.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.layout.Fit',
        'Ext.dataview.List',
        'Sample.store.User'
    ],

    controller: 'main',

    layout: 'fit',

    title: 'ユーザ一覧',

    items: {
        xtype: 'list',

        store: 'User',

        itemTpl: [
            '{name}<br>{address.state}{address.cities}'
        ]
    }
});

f:id:sham-memo:20170607233012p:plain

特に何も設定していない場合は、↑となります。addressがアソシエーションの項目です。

associatedData: falseを指定すると、全てのアソシエーションを除外します。

items: {
    xtype: 'list',

    store: 'User',

    itemTpl: [
        '{name}<br>{address.state}{address.cities}'
    ],

    associatedData: false
}

f:id:sham-memo:20170607233412p:plain

XTemplate evaluation exception: Cannot read property 'state' of undefined となり、addressがundefinedになっていることがわかります。

特定の項目だけ取得したいときは↓のようにするようです。

associatedData: {
  address: true
}

ちなみに、address: falseでも同じ結果になりました。バグっぽいね。