Предположим, я расширяю стандартный виджет / компонент Sencha ExtJS 4, и я обнаружил множество вещей, которые работают не так, как я хочу, или, возможно, они просто сломаны, и Сенча не удосужился решить проблемы с компонента пока нет. Я просто собираюсь использовать Sencha ExtJS Ext.tree.Panel и Ext.tree.Store в качестве двух примеров компонентов. Каковы основные шаги по переопределению конструктора, конфигов, свойств, методов и событий, чтобы я мог найти и исправить проблемы с этим компонентом без изменения основного файла JS фреймворка ExtJS 4, который я сейчас использую?

Я понимаю, что иногда в фреймворке так много функциональности, что можно где-то пропустить конфигурацию и не понять, что они могут решить проблему с помощью стандартной реализации. И это то, что можно исправить с помощью большего опыта работы с фреймворком. Оставляя это в стороне здесь, что бы эти самые основные шаги?

Предположим, мы начнем с этих двух реализаций и начнем с самых основ.

К сведению: основные функции этих двух компонентов работают без особых усилий с использованием стека на стороне сервера Ext.Direct, и я могу объяснить все проблемы кросс-браузерной совместимости с компонентом Sencha ExtJS Ext.tree.Panel с IE, Mozilla Firefox и Google Chrome, но я бы, наверное, потратил слишком много времени на эти другие вопросы. И я не говорю, что IE сначала должен быть стереотипным, потому что все эти браузеры имеют свои проблемы с компонентом Ext.tree.Panel. Я бы лучше научился ловить рыбу здесь, чтобы я мог ловить свою собственную рыбу. Как только я лучше пойму эти классы, связанные с деревьями, я задам более конкретные вопросы.

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.TreeStore

Пользовательская реализация Ext.data.TreeStore:

Ext.define('MyApp.store.TreeNodes', {
    extend: 'Ext.data.TreeStore',
    xtype: 'store-tree-nodes',
    model : 'MyApp.model.TreeNode',
    proxy: {
        type: 'direct',
        directFn: Tree_Node_CRUD.read,
        reader: {
            root: 'data'
        }
    },
    nodeParam: 'node',
    parentField: 'parentId',
    root: {
        text: 'root',
        id: '0',
        expanded: true
    },
    autoLoad: false,
    single: true,
    listeners: {
        beforeload: function(store, operation, options) {
        },
        append: function( thisNode, newChildNode, index, eOpts ) {
        }    
    }
});

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel

Пользовательская реализация Ext.tree.Panel:

Ext.define('MyApp.view.MainTree', {
    extend: 'Ext.tree.TreePanel',
    xtype: 'view-main-tree',
    requires: [
        'MyApp.store.TreeNodes'
    ],
    initComponent: function() 
    {        
        this.store = 'TreeNodes';
        this.superclass.initComponent.call(this);
    },
    animate: false,
    title: 'Tree',
    rootVisible: true,
    collapsible: true,   
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: 'Open Node'
        }, {
            text: 'Create Node'
        }, {
            text: 'Delete Node'
        }, {
            text: 'Expand All'
        }, {
            text: 'Collapse All'
        }]
    }], 
    listeners: {
        afterrender: function() {
        },
        itemclick: function(view, node, item, index, e) {
        },
        afteritemexpand: function() {  //node, index, item, eOpts) {
        },
        afteritemcollapse: function() { //node, index, item, eOpts) {
        }
    }
});