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

Posted 2023-03-16

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

【英文标题】：Extjs - getting 'TypeError: name is undefined' when add grid panel with store data in view

【发布时间】：2012-11-02 02:46:28

【问题描述】：

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

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]

【问题讨论】：

在尝试获取其中一条记录的名称字段时，商店配置似乎有问题。您可以发布商店定义/初始化以及它加载的数据吗？

该消息通常是当它找不到您尝试使用字符串加载的类之一时，例如“Tasks”，尝试将其更改为“BP.store.Tasks”，如果那样的话不起作用，您需要调试脚本并查看堆栈并检查它试图创建的类是什么以及这样做时遇到问题

【参考方案1】：

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

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

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

【讨论】：

感谢您的指导。我不需要initComponent，当我的原始方法不起作用时我尝试过更多。在照明方面也非常出色 - 这看起来非常有用！ :)

您是否知道为什么我的网格没有填充商店数据 - 请参阅 sra 回答中的 cmets。谢谢:)

很难从你目前所拥有的情况中判断出来。您能否创建一个新问题并仅添加网格定义以及您如何加载商店等。

还没有机会再看这个，但如果我想不通，会提出一个新问题。谢谢！

【参考方案2】：

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

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

子注释

如果您需要在类定义 initComponent() 方法中调用诸如 add 之类的方法，则需要确保您首先调用了 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' 参考它 为什么网格不渲染很难说。它可能取决于扩展中的定义或渲染它的容器。

【讨论】：

谢谢，我仍然对 xtype 和 alias 感到困惑 - 我将上面的内容从 xtype 更改为 alias，这修复了错误。我会尽量记住未来的区别！那么，现在我的代码没有产生错误，但同时网格实际上并没有在选项卡中呈现？感谢 Illumination，我可以看到商店已加载并包含预期的数据 - 但不知道为什么它不显示？

@BrynJ 编辑完成。请注意，照明插件可能很棘手。经过短暂的测试阶段后，我放弃了它。但从那以后它可能有所改善。

谢谢。我在这里尝试了 dbrin 的建议，以解决相同的数据未在网格***.com/questions/9477274/… 中呈现的问题-在回答之后，我被告知 this.store.load() 未定义。无论如何，我会尝试解决这个问题。我能问一下 Illumination 带来了哪些问题 - 所以我知道要注意什么吗？

@BrynJ 它在控制台中随机产生了似乎来自应用程序代码的错误。您可以简单地在控制台中检查您的商店是否以正确的名称存在，调用 Ext.StoreMgr.lookup('Tasks') 空商店不会阻止网格呈现！

我将该命令输入到控制台，可以确认商店确实存在。更奇怪了？！

【参考方案3】：

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

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

【讨论】：

当控制器加载模型和存储时，我在舞台上遇到了与ExtJs 4.2.1中作者相同的TypeError。当我详细重写商店代理配置时，您的解决方案对我有帮助。

【参考方案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;