Блог

Новая версия ExtJS может сделать ваш Chrome нестабильным (или это мой код?)! Позвольте мне объяснить мою ситуацию.

Я работаю над новой архитектурой MVC ExtJS 4.0. У меня есть панель дерева, отображающая меню моих приложений или навигацию. Согласно архитектуре, я попытался разделить свою панель дерева на контроллер, представление и отдельное хранилище.

Вот мое мнение:

  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'}
    ],
        .
        .
        .
  

При первоначальном выполнении я получаю следующую ошибку:

В главном меню объекта нет метода ‘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? Я понятия не имею, как это исправить!

Похоже, это известная проблема!!! Цитирую с форумов ExtJS:

Родительский класс «Ext.tree.Панель «ищет хранилище в диспетчере хранилищ методом «initComponent», но «Ext.tree.Панель «пытается использовать его раньше.

Итак, одним из способов было бы закодировать ваше хранилище в вашем дереве, другой способ — переназначить хранилище в методе initComponent. Вот код:

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