ExtJS：是否可以在网格面板中声明绑定的 if else 条件？

Question

在 ViewModel 中，我定义了 2 个商店，并且我使用 gridpanel 作为视图。是否有机会在 gridpanel 内声明 bind 属性的 if else 条件？

视图模型：

stores: {
        dataStore: {
            model: 'MyApp.first.Model',
            autoLoad: true,
            session: true
        },

        listStore: {
            model: 'MyApp.second.Model',
            autoLoad: true,
            session: true,
        },

我想在网格面板上执行此条件；

Ext.define('MyApp.base.Grid', {
    extend: 'Ext.grid.Panel',

    // Currently binds directly to listStore
    bind: '{listStore}',

    // but I'm trying to implement a proper adjustment such as this;
    // bind: function () {
    //     var username = localStorage.getItem('username');
    //     if (username === 'sample@adress.com') {'{dataStore}';} else {'{listStore}'}
    // },

Answer 1

您不能将条件表达式与 bind 一起使用，但是，您可以使用 ViewModel 的公式来 select 哪个存储与网格一起使用。这是此类公式的示例：

conditionalStore: function (get) {
    var param = get('param');

    if (param === 1) {
        return get('simpsonsStore');
    }
    return get('griffinsStore');
}

这里正在运行 fiddle，您可以使用它：https://fiddle.sencha.com/#view/editor&fiddle/2eq2

Answer 2

您可以使用 grid 的 bindStore 方法。

在此FIDDLE中，我使用grid创建了一个演示。我希望这会 help/guide 你达到你的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //defining store 1
        Ext.define('Store1', {
            extend: 'Ext.data.Store',
            alias: 'store.store1',
            autoLoad: true,
            fields: ['name', 'email', 'phone'],
            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    rootProperty: ''
                }
            }
        });

        //defining store 2
        Ext.define('Store2', {
            extend: 'Ext.data.Store',
            alias: 'store.store2',
            autoLoad: true,
            fields: ['name', 'email', 'phone'],
            proxy: {
                type: 'ajax',
                url: 'data2.json',
                reader: {
                    type: 'json',
                    rootProperty: ''
                }
            }
        });

        //defining view model
        Ext.define('MyViewModel', {
            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.myvm',

            stores: {
                gridStore1: {
                    type: 'store1'
                },
                gridStore2: {
                    type: 'store2'
                }
            }
        });

        //creating grid
        Ext.create({

            xtype: 'grid',

            title: 'Example of bind the store',

            renderTo: Ext.getBody(),

            viewModel: {
                type: 'myvm'
            },

            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],

            tbar: [{
                text: 'Load Store1',
                handler: function (btn) {
                    var grid = this.up('grid');
                    grid.bindStore(grid.getViewModel().getStore('gridStore1'))
                }
            }, {
                text: 'Load Store2',
                handler: function (btn) {
                    var grid = this.up('grid');
                    grid.bindStore(grid.getViewModel().getStore('gridStore2'))
                }
            }]
        });
    }
});

ExtJS：是否可以在网格面板中声明绑定的 if else 条件？

ExtJS: Is possible to state if else condition for bind in grid panel?

javascript

if-statement

bind

extjs

viewmodel