Displaying views that contain 'partial'/'nested' widgets in EXTjs 4

Question

I'm having trouble understanding how I need to define and use the MVC model for my test EXTjs4 app. Consider the following structure.

app.js

Ext.application({
    name: 'AM',
    appFolder: 'app',
    controllers: ['Cards', 'Fourscrum'],
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            defaults: { flex: 1 },
            layout: {
                type: 'hbox',
                align: 'stretch',
            },
            items:
            [
                Ext.widget('Fourscrum')
            ]
        });

Controller:

Cards.js

Ext.define('AM.controller.Cards', {
    extend: 'Ext.app.Controller',
        stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
        models: ['Card', 'Priority', 'Size'],
        views: ['card.List', 'priority.prioritycombo', 'card.Edit'],

Fourscrum.js

Ext.define('AM.controller.Fourscrum', {
    extend: 'Ext.app.Controller',
    stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
    models: ['Card', 'Priority', 'Size'],
    views: ['scrum.Fourscrum', 'card.List'],

view.scrum.Fourscrum.js

Ext.define('AM.view.scrum.Fourscrum', {   // *** Variable
    extend: 'Ext.panel.Panel',
    alias: 'widget.Fourscrum',       // *** Variable

    width: 400,
    height: 300,

    layout: 'column',

    title: 'Scrum',                  // *** Variable
    items:
    [
        Ext.widget('cardlist',
        {
            alias: 'widget.backlogcardlist',
            title: "Backlog",
            store: 'BacklogCards'
        }),
        Ext.widget('cardlist',
        {
            alias: 'widget.backlogcardlist',
            title: "Backlog",
            store: 'BacklogCards'
        }),
        Ext.widget('cardlist',
        {
            alias: 'widget.inprogresscardlist',
            title: "In Progress",
            store: "InprogressCards"
        }),
        Ext.widget('cardlist',
        {
            alias: 'widget.reviewcardlist',
            title: "Review",
            store: "ReviewCards"
        }),
        Ext.widget('cardlist',
        {
            alias: 'widget.donecardlist',
            title: "Done",
            store: "DoneCards"
        })
    ]

});

My ideal structure for this app is as follows:

Viewport defined (inside app.js)

which contains a Fourscrum.js view (which is just a panel)

which contains 4 different List.js views (which are just grids).

Trying to accomplish this, I currently get a few errors when i start messing with the above code:

Item undefined
namespace undefined

Does anyone know why this doesn't work?

PS. I can get this example to work if I replace my 'cardlist' widgets with panels directly defined in the Fourscrum view.

PPS. This also works properly if I forego the Fourscrum container panel all together :(

EDIT:

I felt my explanation was a little unclear so I've uploaded an image to help describe the program. I'm not sure where I need to define the stores, models, and views with this nested structure. So I've repeated it in both controllers. I hope that's not what is causing the problem.

enter image description here

EDIT2:

Ext.define('AM.view.card.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.cardlist',

    //title: 'List',
    //store: 'Cards',


    //multiSelect: true,
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragGroup: 'ddzone',
            dropGroup: 'ddzone'
        }
    },
    //            selType: 'cellmodel',
    //            plugins: [
    //                Ext.create('Ext.grid.plugin.CellEditing', {
    //                    clicksToEdit: 1
    //                })
    //            ],

    columns: [
        {
            header: 'ID',
            dataIndex: 'external_id',
            field: 'textfield',
            width: 30
        },
        {
            header: 'Name',
            dataIndex: 'name',
            field: 'textfield',
            width: 150
        },
        {
            header: 'Priority',
            dataIndex: 'priority_id',
            renderer: function (value) {
                var display = '';
                Ext.data.StoreManager.get("Priorities").each(function (rec) {
                    if (rec.get('id') === value) {
                        display = rec.get('short_name');
                        return false;
                    }
                });
                return display;
            },
            width: 60,
            field: { xtype: 'PriorityCombo' }
        },
        {
            header: 'Size',
            dataIndex: 'size_id',
            renderer: function (value) {
                var display = '';
                Ext.data.StoreManager.get("Sizes").each(function (rec) {
                    if (rec.get('id') === value) {
                        display = rec.get('short_name');
                        return false;
                    }
                });
                return display;
            },
            width: 60
        },
        {
            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'));
                }
            }]
        }
    ]

});

dbrin dbrin · Accepted Answer · 2011-08-18T03:08:38

I think I see a big problem in your code (if you pasted all of it). In your view definitions if you are extending Ext components you MUST have the following function that ends in the callParent method like below.

initComponent: function() {
  this.items = this.buildMyItems();  

  this.callParent(arguments);    
},

buildMyItems: function(){
  //my code
}

Displaying views that contain 'partial'/'nested' widgets in EXTjs 4

2 Answers