extjs--添加多行工具条toolbar

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

Ext.onReady(function(){    var tbar1 = new Ext.Toolbar([       {text:'添加按钮'},{text:'修改按钮'},{text:'删除按钮'}]);         var main = new Ext.Panel({       title:'一个面板',       border:false,       tbar : [{text:'一个按钮'}],       listeners : {         'render': function(){              tbar1.render(main.tbar);          }       }    });    main.render(document.body);  });

 

另一个方法，设置EditorGridPanel中两个tbar：

 

Ext.onReady(function(){ var grid = new Ext.grid.EditorGridPanel({   store : ds,   cm : cm,   width : 688,   height : 300,   selModel : new Ext.grid.RowSelectionModel(),   autoScroll : true,   stripeRows : true,   enableColumnMove : false,   clicksToEdit : 1,   tbar : ['->', {    xtype : 'button',    text : '添加',    iconCls : 'icon-add',    handler : function() {}))    }   }, '-', {    xtype : 'button',    text : '删除',    iconCls : 'icon-delete',    handler : function() {}   }, ' '],   listeners : {    'render' : function() {     var tbar1 = new Ext.Toolbar(['->', {      text : "设置",      iconCls : 'icon-set',      handler : function() {      }     }, ' ']);     tbar1.render(grid.tbar);    }   }  }); });

 

 

我用到的是第二种方法

 

var grid_user = new Ext.grid.GridPanel({
   title : '用户管理',
   iconCls : 'icon-grid',
   el:'grid_user',
   loadMask : {
    msg : '数据加载中...'
   },
   cm : cm_user,
   ds : ds_user,
   region : 'center',
   sm : new Ext.grid.RowSelectionModel({
      singleSelect : true
     }),

   stripeRows : true,
   autoScroll : true,
   enableColumnMove : false,
   trackMouseOver : false,
   height:540,
   width:1120,
   frame : true,
//   tbar : [btn_add_user, '-', btn_edit_user, '-', btn_del_user],
   tbar : [btn_add_user, btn_edit_user, btn_del_user],
   listeners : {
    'render' : function() {
     var tbar1 = new Ext.Toolbar([text_search_user, '-', btn_search_user]); // text_search_user .etc 是提前声明好的，注意格式，和给的例子稍有不同
     tbar1.render(grid_user.tbar);
    }
   },
   bbar : new Ext.PagingToolbar({
      pageSize : 20,
      store : ds_user,
      displayInfo : true,
      displayMsg : '第 {0} - {1} 条  共 {2} 条',
      emptyMsg : "没有记录"
     }),
   trackMouseOver : true,
   loadMask : true

  });