ExtJS 4.0 MVC 应用程序中的 TreeStore 出现问题答案

【问题标题】：Trouble with TreeStore in ExtJS 4.0 MVC applicationExtJS 4.0 MVC 应用程序中的 TreeStore 出现问题
【发布时间】：2011-05-09 07:30:25
【问题描述】：

ExtJS 的新版本会让你的 chrome 变得不稳定（或者是我的代码？）！让我解释一下我的情况。

我正在研究 ExtJS 4.0 的新 MVC 架构。我有一个树面板显示我的应用程序菜单或导航。根据架构，我尝试将树面板拆分为控制器、视图和单独的商店。

这是我的看法：

 Ext.define('CRM.view.menu.View', {
    alias: 'widget.menutree',
    extend: 'Ext.tree.Panel',

    initComponent: function() {

        console.log('initComponent of View...');

        Ext.apply(this, {
            title: 'Simple Tree',                       
            width: 200,             
            store: 'MainMenu',
            rootVisible: false
        });

        this.callParent(arguments);
    }
});

我的树店：

 Ext.define('CRM.store.MainMenu', {
    extend: 'Ext.data.TreeStore', 

    constructor: function() {

        console.log('Constructor of MainMenu TreeStore');

        config = Ext.apply(this,{
            proxy: {
                type: 'ajax',
                url: 'data/menu.json'
            },root: {
                text: 'Menu',
                id: 'src',
                expanded: true
            }
        });

        this.callParent(arguments);

    }
});

在我的控制器中，我还提供了我的商店信息。这是我的控制器配置的一部分：

Ext.define('CRM.controller.MainMenu',{
    extend: 'Ext.app.Controller',
    stores: ['MainMenu'],   
    refs: [
        {ref:'menu',selector: 'menutree'},
        {ref:'cp',selector: 'centerpane'}
    ],
        .
        .
        .

在初始执行时，我收到以下错误：

Object MainMenu 没有方法 'getRootNode'

但是现在，我得到了更奇怪的错误：请注意，chrome 在树存储的构造函数中停止执行。

同时在firefox中： Firefox 执行得更好，但没有呈现应用程序！

经过一些尝试和错误之后..我确实找到了让我的应用程序运行的方法..那就是避免使用我的商店并直接提供商店信息，如下所示：

 Ext.define('CRM.view.menu.View', {
    alias: 'widget.menutree',
    extend: 'Ext.tree.Panel',

    initComponent: function() {

        console.log('initComponent of View...');

        Ext.apply(this, {
            title: 'Simple Tree',                       
            width: 200,             
            store: {
                proxy: {
                    type: 'ajax',
                    url: 'data/menu.json'
                },root: {
                    text: 'Menu',
                    id: 'src',
                    expanded: true
                }
            },
            rootVisible: false
        });

        this.callParent(arguments);
    }
});

现在应用程序执行完全没有问题！

有人尝试使用 MVC 架构创建树形面板吗？我不知道如何解决这个问题！

【问题讨论】：

标签： model-view-controller tree extjs4

【解决方案1】：

看起来这是一个已知问题！！！引用自ExtJS forums：

“Ext.tree.Panel”的父类在店里找店 “initComponent”方法中的管理器，但“Ext.tree.Panel”试图使用它之前。

因此，一种方法是将您的商店编码到您的树中，另一种方法是在 initComponent 方法中重新分配商店。代码如下：

initComponent: function(){
  this.store = Ext.data.StoreManager.lookup(this.store);
  this.callParent(arguments);
}

【讨论】：