ExtJS hack: Add multiple toolbars to a Panel

原文出處: http://www.javatang.com/archives/2010/03/21/1529393.html
作者: Jet Mah from Java堂
聲明: 可以非商業性任意轉載, 轉載時請務必以超鏈接形式標明文章原始出處、作者信息及此聲明！

在ExtJS中實現多行工具欄的效果

 

hack code:

1. /**
2. * ExtJS hack: Add multiple toolbars to a Panel
3. *
4. * @author Jet Ma (jetmah(at)gmail(dot)com)
5. */
6. // 將原來的onRender方法進行重定義，以免造成遞歸調用！
7. // rename the original onRender method to avoid call itself
8. Ext.Panel.prototype.originalonRender = Ext.Panel.prototype.onRender;
9. // 擴展onRender方法，實現在Toolbar中增加多行
10. // override onRender method
11. Ext.Panel.prototype.onRender = function(ct, position) {
12.     this.originalonRender(ct, position);
13.    
14.     // 增加使用rowtbar添加換行的Toolbar
15.     // use the custom rowtbar argument to add it to this TopToolbar
16.     if(this.tbar && this.rowtbar){
17.         var rowtbar = this.rowtbar;
18.         if(!Ext.isArray(rowtbar))
19.             return;
20.        
21.         for(var i = 0; i < rowtbar.length; i ++) {
22.             new Ext.Toolbar(rowtbar[i]).render(this.tbar);
23.         }
24.     }
25.    
26.     // 增加使用rowbbar添加換行的Bottombar
27.     // use the custom rowbbar argument to add it to this BottomToolbar
28.     if(this.bbar && this.rowbbar) {
29.         var rowbbar = this.rowbbar;
30.         if(!Ext.isArray(rowbbar))
31.             return;
32.            
33.         for(var i = 0; i < rowbbar.length; i ++) {
34.             new Ext.Toolbar(rowbbar[i]).render(this.bbar);
35.         }
36.     }
37. }

usage:

1. var panel = new Ext.Panel({
2.     //...   
3.     tbar: [{text: 'button one'}, {text: 'button two'}],   
4.     rowtbar: [       
5.         [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],      
6.         [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]   
7.     ],   
8.     bbar:  [{text: 'button one'}, {text: 'button two'}],   
9.     rowbbar: [       
10.         [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],       
11.         [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]   
12.     ]
13. });

screenshot:

 

more discussion: http://www.extjs.com/forum/showthread.php?t=94762