title: Steps to overriding Sencha ExtJS standard component functionality (Ext.tree.Panel & Ext.data.TreeStore as two examples)
body: <p>Suppose I am extending a standard Sencha ExtJS 4 widget/component, and I found a bunch of things that don't work the way I want them to, or perhaps they are just broken and Sencha hasn't gotten around to fixing the issues with the component yet.  I'm just going to use the Sencha ExtJS Ext.tree.Panel and Ext.tree.Store as two example components.  What are the most basic steps to overriding the constructor, configs, properties, methods and events so I can find and fix the issues with that component without modifying the core ExtJS 4 framework JS file I'm currently using?  </p>
  
  <p>I realize that sometimes there is so much functionality in the framework, that one might overlook a config somewhere and not realize they can fix the issue with a standard implementation.  And that's something that can be corrected with more experience with the framework.  Putting that aside here, what would be these most basic steps?</p>
  
  <p>Suppose we start with these two implementations and start with the very basics.</p>
  
  <p>FYI: I got the core features of these two components working without too much effort really using the Ext.Direct server side stack, and I could explain all of the cross browser compatible issues with the Sencha ExtJS Ext.tree.Panel component with IE, Mozilla Firefox and Google Chrome, but I would probably spend too much time asking those other questions.  And I'm not saying IE first to be stereotypical, because all of these browsers have their issues with the Ext.tree.Panel component.  I'd rather learn how to fish here, so I can catch my own fish.  Once I understand these tree related classes better, I will ask more specific questions.</p>
  
  <p><a href="http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.TreeStore" rel="noreferrer">http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.TreeStore</a></p>
  
  <p><strong>Custom Ext.data.TreeStore implementation:</strong></p>
  
  <pre><code>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 ) {
          }    
      }
  });
  </code></pre>
  
  <p><a href="http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel" rel="noreferrer">http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tree.Panel</a></p>
  
  <p><strong>Custom Ext.tree.Panel implementation:</strong></p>
  
  <pre><code>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) {
          }
      }
  });
  </code></pre>