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