2

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

1 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.