开发者

Re-using EXTjs views with different "view models"

开发者 https://www.devze.com 2023-03-18 09:51 出处:网络
I\'m creating a simple SCRUM system in order to teach myself to use EXT 4, so it goes without saying that I\'m very new to the framework.

I'm creating a simple SCRUM system in order to teach myself to use EXT 4, so it goes without saying that I'm very new to the framework.

I have a little experience with MVC3 but I'm having some trouble adapting to the way EXT4 works.

My idea is to have 4 grids in a column layout Viewport. Each of the grids is currently its own View. However the Views are almost completely identical. Below is my first View. I've marked the lines that I have to change for the other 3 views.

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',开发者_C百科
            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'));
                }
            }]
        }
    ]

});

Is there a way in EXTjs to pass a 'ViewModel'/Parameters to my View so that I can re-use it for each of my grids?

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


Ok! I figured it out by reading this post here:

Extjs 4 MVC loading a view from controller

This is how I modified my app.js file:

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

Here I'm just changing the title property, but I imagine changing the other properties shouldn't be anymore difficult.

0

精彩评论

暂无评论...
验证码 换一张
取 消