1 use Cache Var such as
  detailE1
 
2 use Class
  contentPanel
     default contains all the items such as below:
      items:[
        //from basic.js
        start,absolute,accordion,anchor,border,cardTabs,cardWizard,column,fit,form,table,
        //form custom.js
        rowLayout,centerLayout,
        //from combination.js
        absoluteForm,tabsNsetedLayouts
      ]
  treePanel
     use “loader:new Ext.tree.TreeLoader ({dataUrl:'tree-date.json'})” property the load the data
  detailsPanel

3 use Viewport to contain all the panels
   items:[treePanel,detailsPanel]

4 use treePanel.on('click',function(n){...}) to deal the event
  in event handle:
  use Ext.getCmp('content-panel').layout.setActiveItem(n.id+'-panel') to active the selected Item
  use detailE1.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('1',{stopFx:true,duration:.2})
  to show the notes of the treeNode.
 

类的定义
Employee = function(name){  

1.     this.name = name;  
2.     this.addEvents({  
3.         "fired" : true,  
4.         "quit" : true  
5.     });  
6. } 
   

各控件的定义
 如 arv={
      id:  ..
      title: ..
      layout: ..
      xtype:  see below
      items: [ json,json2,... ]};

All visual widgets that require rendering into a layout should subclass Component (or Ext.BoxComponent if managed box model handling is required).

Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. This is the list of all valid xtypes:
  

1. xtype            Class  
2. -------------    ------------------  
3. box              Ext.BoxComponent  
4. button           Ext.Button  
5. colorpalette     Ext.ColorPalette  
6. component        Ext.Component  
7. container        Ext.Container  
8. cycle            Ext.CycleButton  
9. dataview         Ext.DataView  
10. datepicker       Ext.DatePicker  
11. editor           Ext.Editor  
12. editorgrid       Ext.grid.EditorGridPanel  
13. grid             Ext.grid.GridPanel  
14. paging           Ext.PagingToolbar  
15. panel            Ext.Panel  
16. progress         Ext.ProgressBar  
17. propertygrid     Ext.grid.PropertyGrid  
18. slider           Ext.Slider  
19. splitbutton      Ext.SplitButton  
20. statusbar        Ext.StatusBar  
21. tabpanel         Ext.TabPanel  
22. treepanel        Ext.tree.TreePanel  
23. viewport         Ext.Viewport  
24. window           Ext.Window 
    

1. Toolbar components  
2. ---------------------------------------  
3. toolbar          Ext.Toolbar  
4. tbbutton         Ext.Toolbar.Button  
5. tbfill           Ext.Toolbar.Fill  
6. tbitem           Ext.Toolbar.Item  
7. tbseparator      Ext.Toolbar.Separator  
8. tbspacer         Ext.Toolbar.Spacer  
9. tbsplit          Ext.Toolbar.SplitButton  
10. tbtext           Ext.Toolbar.TextItem  
11.   
12. Form components  
13. ---------------------------------------  
14. form             Ext.FormPanel  
15. checkbox         Ext.form.Checkbox  
16. combo            Ext.form.ComboBox  
17. datefield        Ext.form.DateField  
18. field            Ext.form.Field  
19. fieldset         Ext.form.FieldSet  
20. hidden           Ext.form.Hidden  
21. htmleditor       Ext.form.HtmlEditor  
22. label            Ext.form.Label  
23. numberfield      Ext.form.NumberField  
24. radio            Ext.form.Radio  
25. textarea         Ext.form.TextArea  
26. textfield        Ext.form.TextField  
27. timefield        Ext.form.TimeField  
28. trigger          Ext.form.TriggerField      
    

//显式创建所容纳的组件
var panel = new Ext.Panel({
   ...
   items: [
      new Ext.Button({
         text: 'OK'
      })
   ]
};
 
//使用xtype创建
var panel = new Ext.Panel({
   ...
   items: [{
      xtype: 'button',
      text: 'OK'
   }]
};

第一个例子中，面板初始化的同时，按钮总是会立即被创建的。如果加入较多的组件，这种方法很可能界面的渲染速度。第二例子中，按钮直到面板真正在浏览器上显示才会被创建和渲染。

如果面板从未显示（例如有个tab一直是隐藏的），那么按钮就不会被创建，不会消耗任何资源了。