Question

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

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

我的想法是在列布局视口中有4个网格。每个网格目前都是自己的视图。但是视图几乎完全相同。下面是我的第一个视图。我已经标记了我必须为其他3个视图更改的行。

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”/ Parameters传递给我的View，以便我可以为每个网格重复使用它？

app.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属性，但我想更改其他属性应该不再困难。

使用不同的“视图模型”重用EXTjs视图

1 个答案: