Extjs - 在视图中添加带有商店数据的网格面板时,获取'TypeError:name is undefined'

Question

我试图在我的视图中加载一个带有来自商店的数据的网格面板,但我不断收到以下错误:

TypeError: name is undefined
Line: if (name === from || name.substring(0, from.length) === from) {

我已经尝试了如何初始化面板,这是我目前的情况:

Ext.define('BP.view.induction.RightPage', {
extend: 'Ext.tab.Panel',
alias : 'widget.rightpage',

title: "Right Page",    

items: [
    {
        title: 'Tasks',
        html: '',
        cId: 'tasksTab',
        initComponent: function() {
            this.add( [{
                store: 'Tasks',
                xtype: 'taskgrid',
                hideHeaders: true,
                columns: [
                    {
                        text     : 'Task ID',
                        flex     : 0,
                        sortable : false,
                        hidden   : true,
                        dataIndex: 'id'
                    }, 
                    {
                        text     : 'Task',
                        flex     : 1,
                        sortable : false,
                        dataIndex: 'name'
                    },

                ]
            }]);

            this.callParent();
        } 
    },{
        title: 'Content',
        html: '',
        cId: 'contentTab'
    }
]
});

最初我没有initComponent函数,而是立即构建项目 - 但这会产生相同的错误.

[编辑]根据要求,这是商店定义:

Ext.define('BP.store.Tasks', {
extend: 'Ext.data.Store',
requires: 'BP.model.Task',
model: 'BP.model.Task',
proxy: {
    type: 'ajax',
    url : '/resources/data/tasks.php',
    reader: {
        type:'json',
        root:'tasks'
    }
},
autoLoad: true
});

完整的数据很笨重,但这里有一个示例(json格式化):

{"success":true,
"tasks":[
    {"id":1,"name":"Cleaning Products","content":"Lorem ipsum...","resource_type":"text","resource_url":"","category_id":1},
    {"id":2,"name":"Preservatives","content":"Lorem ipsum...","resource_type":"text","resource_url":"","category_id":1}]
}

Answer 1

initComponent进入类定义.在您的代码示例中,您正在创建一个带有通用"任务"面板的选项卡面板,以便您尝试设置initComponent方法.如果需要initComponent方法,则需要为Tasks网格创建单独的类定义.你不能内联它.

此外,您正在做的是过度紧凑的面板.如果您将一个网格面板添加到选项卡面板,它将自动成为选项卡之一.您不需要将网格包装到另一个面板中.

在调试时:确保使用ExtJS lib(或dev版本)的调试版本.使用FF或Chrome进行调试(无论您喜欢哪个).如果您使用FF,请获取名为Illuminations for Developers的firebug插件 - 它可以极大地解决布局问题并了解容器和嵌套问题.它还允许您在从服务器加载后查看商店中的记录.

Answer 2

除了dbrin的回答,我很确定你没有定义一个名为taskgrid的小部件,它会导致你的错误.

无论如何,删除initComponent()方法和add()方法.在您的情况下,您可以直接将所有内容分配给items:[](子注释2),这将导致相同并且是正确的方法.add()在已经创建的实例上调用该方法(这也可能导致错误.请参阅子注释1).还备用空html属性.

Subnotes

1. 如果您需要在类定义initComponent()方法中调用类似添加的方法,则需要首先调用您调用的方法callParent(arguments);!

2. 代码示例

Ext.define('BP.view.induction.RightPage', {
extend: 'Ext.tab.Panel',
alias : 'widget.rightpage',

title: "Right Page",    

items: [
    {
        store: 'Tasks',
        title: 'Tasks',
        xtype: 'taskgrid',
        cId: 'tasksTab',
        hideHeaders: true,
        columns: [
            {
                text     : 'Task ID',
                sortable : false,
                hidden   : true,
                dataIndex: 'id'
            }, 
            {
                text     : 'Task',
                flex     : 1,
                sortable : false,
                dataIndex: 'name'
            }
        ]
    },{
        title: 'Content',
        cId: 'contentTab'
    }
]
});

编辑

xtype是已定义的别名.目前有四个; 小部件,功能,布局,插件.如果是组件,则使用窗口小部件类型.你可以通过使用alias: 'widget.yourname'和自己定义自己的xtype.您可以使用xtype: 'yourname' 为什么网格不渲染很难分辨它.它可能取决于您的扩展中的定义或您将其呈现的容器.