Question

我无法理解如何为测试EXTjs4应用程序定义和使用MVC模型。考虑以下结构。

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

控制器：

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"
        })
    ]

});

此应用程序的理想结构如下：

视口定义（在app.js内）

包含Fourscrum.js视图（只是一个面板）

包含4个不同的List.js视图（只是网格）。

试图实现这一点，当我开始搞乱上面的代码时，我当前得到了一些错误：

项目未定义
namespace undefined

有谁知道为什么这不起作用？

PS。如果我用直接在Fourscrum视图中定义的面板替换我的'cardlist'小部件，我可以让这个例子工作。

PPS。如果我放弃Fourscrum容器面板，这也可以正常工作：（

编辑：

我觉得我的解释有点不清楚所以我上传了一张图片来帮助描述该程序。我不确定在哪里需要使用这种嵌套结构定义商店，模型和视图。所以我在两个控制器中重复了它。我希望这不是造成问题的原因。

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

});

Answer 1

我认为我的代码中存在一个大问题（如果你粘贴了所有代码）。在视图定义中，如果要扩展Ext组件，则必须具有以下函数，该函数以callParent方法结束，如下所示。

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

  this.callParent(arguments);    
},

buildMyItems: function(){
  //my code
}

Answer 2

Robodude，根据Sencha.com上的Class指南，所有小部件必须包含在正确命名的类文件中。我不认为你可以在面板定义中同时定义和创建小部件。从面板配置中拆分您的定义。也不要忘记启用自动加载器：

Ext.Loader.setConfig({
    enabled : true
});

在EXTjs 4中显示包含“部分”/“嵌套”小部件的视图

2 个答案: