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

如果您需要在类定义initComponent()方法中调用添加方法，则需要首先调用callParent(arguments);！
代码示例

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是已定义的别名。目前有四个; widget，feature，layout，plugin。如果是组件，则使用窗口小部件类型。您可以使用alias: 'widget.yourname'来定义自己的，并且您拥有自己的xtype。你可以使用xtype: 'yourname'来引用它为什么网格不呈现很难说。它可能取决于您的扩展中的定义或您将其呈现的容器。

Answer 3

使用架构师构建项目时遇到了同样的问题。结果是代理配置中的语法错误。尝试修改你的样子。它对我有用。不是仅仅使用URL，而是使用读取参数指定api。

proxy: {
    type: 'ajax',
    api: {
        read: '/resources/data/tasks.php'
    },
    reader: {
        type: 'json',
        root: 'tasks'
    }
}

Answer 4

我有一个类似的确切错误的情况，我通过添加一个构造函数来解决它：

constructor: function(config) {
      this.initConfig(config);
      return this;
}

在我的情况下，我需要initComponent，所以最终代码将是：

Ext.define('SomeNewField', {
 extend: 'Ext.Something',
 alias: 'widget.SomeNewField',

initComponent: function(config) {
    this.callParent(arguments);
},

constructor:function(config) {
      this.initConfig(config);
      return this;
 }

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

4 个答案: