Extjs - 在添加带有商店数据的网格面板时获取“类型错误：名称未定义”

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 方法，则需要为您的任务网格创建一个单独的类定义。你不能内联它。

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

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

Answer 2

除了 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 是定义的别名。目前有四个； 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;
 }