Przypuśćmy, że rozszerzam standardowy widget / komponent Sencha ExtJS 4 i znalazłem kilka rzeczy, które nie działają tak, jak chcę, lub może są po prostu uszkodzone i Sencha nie rozwiązał problemów z komponent jeszcze. Będę używał Sencha ExtJS Ext.tree.Panel i Ext.tree.Store jako dwóch przykładowych komponentów. Jakie są najbardziej podstawowe kroki do nadpisania konstruktora, konfiguracji, właściwości, metod i zdarzeń, dzięki czemu mogę znaleźć i rozwiązać problemy z tym komponentem bez modyfikowania podstawowego pliku JS środowiska ExtJS 4, którego obecnie używam?

Zdaję sobie sprawę, że czasami jest tak wiele funkcjonalności w strukturze, że można przeoczyć konfigurację gdzieś i nie zdawać sobie sprawy, że mogą rozwiązać problem przy standardowej implementacji. I to jest coś, co można poprawić dzięki większemu doświadczeniu z ramami. Odkładając to na bok, jakie byłyby te najbardziej podstawowe kroki?

Załóżmy, że zaczynamy od tych dwóch implementacji i zaczynamy od samych podstaw.

FYI: Mam podstawowe funkcje tych dwóch komponentów, które działają bez większego wysiłku, naprawdę używając stosu po stronie serwera Ext.Direct, i mogłem wyjaśnić wszystkie problemy ze zgodnością przeglądarki krzyżowej ze składnikiem Sencha ExtJS Ext.tree.Panel z IE, Mozilla Firefox i Google Chrome, ale prawdopodobnie poświęciłbym zbyt wiele czasu na zadawanie innych pytań. I nie mówię, że IE jest stereotypowy, ponieważ wszystkie te przeglądarki mają problemy ze składnikiem Ext.tree.Panel. Wolałbym nauczyć się łowić tutaj, więc mogę złapać własną rybę. Gdy lepiej zrozumiem te klasy związane z drzewem, zadam bardziej szczegółowe pytania.

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

Niestandardowa implementacja 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

Niestandardowa implementacja 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) {
        }
    }
});