2

我试图在我的视图中简单地加载一个网格面板，其中包含来自商店的数据，但我不断收到以下错误：

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}]
}
4

4 回答 4

5

除了 dbrin 的回答，我很确定您没有定义一个名为taskgrid的小部件，这会导致您的错误。

无论如何，删除initComponent()方法和add()方法。在您的情况下，您可以直接将 all 分配给items:[]（子注 2），这将导致相同的结果，并且是正确的做法。add()在已经创建的实例上调用该方法（这也可能导致错误。参见子注 1）。还备用空html属性。

子注释

  1. 如果您需要在类定义initComponent()方法中调用诸如 add 之类的方法，则需要确保您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' Why the grid not renders is hard to tell 来参考它。它可能取决于扩展中的定义或渲染它的容器。

于 2012-11-13T18:42:04.447 回答
5

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

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

调试时：确保使用 ExtJS 库的调试版本（或开发版本）。使用 FF 或 Chrome 进行调试（您更喜欢哪个）。如果您使用 FF，请获取名为 Illuminations for Developers 的 firebug 插件 - 它对布局问题以及理解容器船和嵌套问题有很大帮助。它还允许您在从服务器加载记录后查看商店中的记录。

于 2012-11-13T17:53:21.883 回答
1

在使用架构师构建我的项目时，我遇到了同样的问题。原来是代理配置中的语法错误。尝试修改你的看起来像这样。它对我有用。不仅仅是一个 URL，而是指定一个带有读取参数的 api。

proxy: {
    type: 'ajax',
    api: {
        read: '/resources/data/tasks.php'
    },
    reader: {
        type: 'json',
        root: 'tasks'
    }
}
于 2013-08-14T19:41:51.580 回答
0

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

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;
 }
于 2017-02-15T12:07:05.133 回答