Повторное использование представлений EXTjs с различными «моделями представления» - PullRequest
Новая
       5

Повторное использование представлений EXTjs с различными «моделями представления»

2 голосов
/ 06 июля 2011

Я создаю простую систему SCRUM, чтобы научить себя использовать EXT 4, так что само собой разумеется, что я очень новичок в фреймворке.

У меня небольшой опыт работы с MVC3, но у меня возникли проблемы с адаптацией к работе EXT4.

Моя идея состоит в том, чтобы иметь 4 сетки в виде колонки Viewport. Каждая из сеток в настоящее время имеет свой собственный вид. Однако взгляды почти полностью идентичны. Ниже мой первый вид. Я пометил линии, которые я должен изменить для других 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 моему представлению, чтобы я мог повторно использовать его для каждой из моих сеток?

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

1 Ответ

0 голосов
/ 06 июля 2011

Хорошо!Я понял это, прочитав этот пост здесь:

Extjs 4 MVC, загружающий представление из контроллера

Вот как я изменил свой файл 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, но я думаю, что изменение других свойств не должно быть более сложным.

...