javascript - 重新使用具有不同 "view models"的 EXTjs View

Question

我正在创建一个简单的 SCRUM 系统，以便自学使用 EXT 4，所以不用说，我对这个框架还很陌生。

我对 MVC3 有一点经验，但我在适应 EXT4 的工作方式时遇到了一些麻烦。

我的想法是在列布局视口(viewport)中有 4 个网格。每个网格当前都是它自己的 View 。然而， View 几乎完全相同。下面是我的第一个 View 。我已经标记了我必须为其他 3 个 View 更改的行。

Ext.define('AM.view.card.BacklogList', { // *** Variable
    extend: 'Ext.grid.Panel',
    alias: 'widget.backlogcardlist', // *** Variable

    title: 'Backlog',       // *** Variable
    store: 'BacklogCards',  // *** Variable

    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],

    columns: [
        {
            header: 'ID',
            dataIndex: 'external_id',
            field: 'textfield',
            width: 50
        },
        {
            header: 'Name',
            dataIndex: 'name',
            field: 'textfield',
            width: 200 
        },
        {
            header: 'Priority',
            dataIndex: 'priority_id',
            renderer: function (value) {
                if (value == 3) {
                    return "L";
                }
                else if (value == 2) {
                    return "M";
                }
                else {
                    return "H";
                }
            },
            width: 70,
            field: {
                xtype: 'combobox',
                queryMode: 'local',
                typeAhead: true,
                store: 'Priorities',
                displayField: 'name',
                valueField: 'id',
                listClass: 'x-combo-list-small'
            }
        },
        {
            xtype: 'actioncolumn',
            width: 16,
            items: [{
                icon: 'Styles/Images/zoom.png',  // Use a URL in the icon config
                tooltip: 'Zoom In',
                handler: function (grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Edit " + rec.get('name'));
                }
            }]
        }
    ]

});

在 EXTjs 中有没有一种方法可以将“ViewModel”/参数传递给我的 View ，以便我可以为我的每个网格重复使用它？

应用程序.js

Ext.application({
    name: 'AM',

    appFolder: 'app',

    controllers: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards'],

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'column',
            items: [
                {
                    xtype: 'backlogcardlist'
                },
                {
                    xtype: 'inprogresslist'
                },
                {
                    xtype: 'reviewlist'
                },
                {
                    xtype: 'donelist'
                }
            ]
        });
    }
});

Answer 1

好的!我通过阅读此处的这篇文章弄明白了:

Extjs 4 MVC loading a view from controller

这就是我修改 app.js 文件的方式:

Ext.application({
    name: 'AM',

    appFolder: 'app',

    controllers: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards'],

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'column',
            defaults: { flex: 1 },
            layout: {
                type: 'hbox',
                align: 'stretch',
                padding: 5
            },
            items: [
                Ext.widget('backlogcardlist',
                {
                        title: "Backlog"
                }),
                Ext.widget('backlogcardlist',
                {
                    title: "In Progress"
                }),
                {
                    xtype: 'reviewlist'
                },
                {
                    xtype: 'donelist'
                }
            ]
        });
    }
});

这里我只是更改 title 属性，但我想更改其他属性应该不会再困难了。