原文出处:
http://www.javatang.com/archives/2010/03/21/1529393.html
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明!
作者: Jet Mah from Java堂
声明: 可以非商业性任意转载, 转载时请务必以超链接形式标明文章原始出处、作者信息及此声明!
在ExtJS中实现多行工具栏的效果
hack code:
- /**
- * ExtJS hack: Add multiple toolbars to a Panel
- *
- * @author Jet Ma (jetmah(at)gmail(dot)com)
- */
- // 将原来的onRender方法进行重定义,以免造成递归调用!
- // rename the original onRender method to avoid call itself
- Ext.Panel.prototype.originalonRender = Ext.Panel.prototype.onRender;
- // 扩展onRender方法,实现在Toolbar中增加多行
- // override onRender method
- Ext.Panel.prototype.onRender = function(ct, position) {
- this.originalonRender(ct, position);
- // 增加使用rowtbar添加换行的Toolbar
- // use the custom rowtbar argument to add it to this TopToolbar
- if(this.tbar && this.rowtbar){
- var rowtbar = this.rowtbar;
- if(!Ext.isArray(rowtbar))
- return;
- for(var i = 0; i < rowtbar.length; i ++) {
- new Ext.Toolbar(rowtbar[i]).render(this.tbar);
- }
- }
- // 增加使用rowbbar添加换行的Bottombar
- // use the custom rowbbar argument to add it to this BottomToolbar
- if(this.bbar && this.rowbbar) {
- var rowbbar = this.rowbbar;
- if(!Ext.isArray(rowbbar))
- return;
- for(var i = 0; i < rowbbar.length; i ++) {
- new Ext.Toolbar(rowbbar[i]).render(this.bbar);
- }
- }
- }
usage:
- var panel = new Ext.Panel({
- //...
- tbar: [{text: 'button one'}, {text: 'button two'}],
- rowtbar: [
- [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],
- [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]
- ],
- bbar: [{text: 'button one'}, {text: 'button two'}],
- rowbbar: [
- [{text: 'row1 buttone 1'}, {text: 'row1 button2'}],
- [{text: 'row2 buttone 1'}, {text: 'row2 button2'}]
- ]
- });
screenshot:
more discussion: http://www.extjs.com/forum/showthread.php?t=94762