Panel中显示多行工具栏(tbar)

在应用程序的制作中，我们经常性的会用到工具栏，在Extjs中Panel中提供了tbar和bbar两个内置的工具栏，极大的方便了大家的使用，但是在创建多行工具栏的时候，就会有一些问题产生了，不能正常的显示已经设计好的页面。下面通过对Panel的render事件的监听，在它被渲染的时候添加多条工具栏，这样就不会影响页面的显示了。这一方法对Panel，FormPanel，GridPanel都适用。具体代码如下：

Ext.onReady(function() {var tbar1 = new Ext.Toolbar([{xtype : 'tbtext',text : 'Item 1:'}, '-', {pressed : true,text : 'ADD'}, '', {pressed : true,text : 'FIX'}, '', {pressed : true,text : 'DEL'}]);var tbar2 = new Ext.Toolbar([{xtype : 'tbtext',text : 'Item 2:'}, '-', {pressed : true,text : 'NEW'}, '', {pressed : true,text : 'OLD'}, '', {pressed : true,text : 'BOTH'}]);var toolsPanel = new Ext.Panel({title : 'A panel',border : false,tbar : [{xtype : 'tbtext',text : 'Item 0:'}, '-', {pressed : true,text : 'A button'}],listeners : {'render' : function() {tbar1.render(toolsPanel.tbar);tbar2.render(toolsPanel.tbar);}}});var win = new Ext.Window({title : "hello",width : 800,height : 500,layout : "fit"});// win.add(new Sample.panel.FieldsPanel())win.add(toolsPanel);win.show();});