ExtJS：是否可以在网格面板中说明是否为绑定条件？答案

【问题标题】：ExtJS: Is possible to state if else condition for bind in grid panel?ExtJS：是否可以在网格面板中说明是否为绑定条件？
【发布时间】：2018-03-23 08:05:09
【问题描述】：

在 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}'}
    // },

【问题讨论】：

标签： javascript if-statement extjs bind viewmodel

【解决方案1】：

您不能对bind 使用条件表达式，但是，您可以使用ViewModel 的公式来选择与网格一起使用的存储。以下是此类公式的示例：

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

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

这里是工作小提琴，你可以玩：https://fiddle.sencha.com/#view/editor&fiddle/2eq2

【讨论】：

按我的预期工作。非常感谢您的解决方案。

【解决方案2】：

你可以使用grid的bindStore方法。

在这个FIDDLE中，我使用grid创建了一个演示。我希望这将帮助/指导您实现您的要求。

代码片段

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'))
                }
            }]
        });
    }
});

【讨论】：