随笔-61  评论-13  文章-2  trackbacks-0

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.     });  

各控件的定义
 如 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一直是隐藏的),那么按钮就不会被创建,不会消耗任何资源了。

 



posted on 2008-11-25 10:07 桂湖山 阅读(1280) 评论(1)  编辑 收藏 引用 所属分类: jsp页面技术

评论:
# re: ExtJs Layout usage 2011-01-21 11:16 | OwenZhong
如果面板从未显示(例如有个tab一直是隐藏的),那么按钮就不会被创建,不会消耗任何资源了。
这句话是不对的
初始化Items是在initComponent里面做的,而initComponent最后调用了Ext.ComponentMgr.create(config, this.defaultType);这个方法的代码是:
create : function(config, defaultType){
return new types[config.xtype || defaultType](config);
}
所以,所有元素都是要被New出来的,对于内存和渲染没有任何帮助。
我最近项目中遇到大表单复杂布局速度的困扰,无意看到这个文章,希望能和你讨论msn:zxg_msn@hotmail.com  回复  更多评论
  
只有注册用户登录后才能发表评论。