改变Panel的作派

Ext.onReady( function () {
     //base class
     Ext.define( 'MyPanelBase' , {
         extend: 'Ext.panel.Panel' ,
         width: 300,
         bodyPadding: 20,
         initComponent: function () {
             if ( this .$className == 'MyPanelBase' ) {
                 this .bodyStyle = "background-color: #ffc"
             }
 
             this .callParent(arguments);
         }
     });
     //derived class
     Ext.define( 'MyPanel' , {
         extend: 'MyPanelBase' ,
         initComponent: function () {
             console.log( 'MyPanel.initConponent' );
             this .callParent(arguments);
         }
     });
     //instance of MyPanelBase
     Ext.create( 'MyPanelBase' , {
         html: 'MyPanelBase has custom style' ,
         renderTo: 'output'
     });
     //instance of MyPanel
     Ext.create( 'MyPanel' , {
         html: 'MyPanel has no custom style' ,
         renderTo: 'output'
     })
});