Extjs grid中tbar(按钮栏Toolbar)的按钮显示成多行的方法总结

方法1：按钮从数据库中加载

//----------------grid  wafer按钮事件----------------
var GridtbarWafer = new Ext.Toolbar({height:27});
function addButtonWafer1() {
    if (GridtbarWafer.rendered) {
        var buttons = rbacobjectwafer.getButtonNames();
        for (var i = 0; i < 5; i++) {
            var tmpbutton = Ext.getCmp(buttons[i]);
            GridtbarWafer.addButton(tmpbutton);
        }
    } else {
        GridtbarWafer.addListener('render', addButtonWafer1);
    }
}
;
rbacobjectwafer.on('AfterLoad', addButtonWafer1);
var GridtbarWafer2 = new Ext.Toolbar({height:27});
function addButtonWafer() {
    if (GridtbarWafer2.rendered) {
        var buttons = rbacobjectwafer.getButtonNames();
        for (var i = 5; i < buttons.length; i++) {
            var tmpbutton = Ext.getCmp(buttons[i]);
            GridtbarWafer2.addButton(tmpbutton);
        }
    } else {
        GridtbarWafer2.addListener('render', addButtonWafer);
    }
}
;
rbacobjectwafer.on('AfterLoad', addButtonWafer);
//具体Wafer 的grid
var CustomerWaferGrid = new Ext.grid.GridPanel({
    id : 'CustomerWaferGrid',
    ds : dsCustomerWaferList,
    cm : cmCustomerWaferList,
    sm : smCustomerWaferList,
    tbar : GridtbarWafer,
        listeners : {
         'render' : function() {
          GridtbarWafer2.render(this.tbar);
         }
        }

});

方法2：固定的按钮

var grid = new Ext.grid.GridPanel({

//grid其他属性,
tbar : ['用户姓名:　', {
       xtype : 'textfield',
       id : 'description',
       width : 120
      },
      '创建时间:　', {
       id : 'startdate',
       xtype : 'datefield',
       format : 'Y-m-d'
      }, '至', {
       id : 'enddate',
       xtype : 'datefield',
       format : 'Y-m-d'
      }, '-', {
       text : '查询',
       iconCls : 'page_findIcon',
       xtype:"button",
       handler:function(){ds.load();}
      }],
    listeners : {
     'render' : function() {
      var tbar = new Ext.Toolbar({
         items : [{
            text : '新增',
            iconCls : 'addIcon',
            xtype : "button",
            handler : function() {
             win.add(f);
             win.show();
            }
           }, {
            text : '修改',
            iconCls : 'edit1Icon'
           }, {
            text : '删除',
            iconCls : 'deleteIcon'
           }, '-', {
            text : '导出PDF',
            iconCls : 'pdfIcon'
           }, {
            text : '导出 Excel',
            iconCls : 'excel'
           }, '-', {
            text : '打印',
            iconCls : 'printerIcon'
           }]
        });
      tbar.render(this.tbar);
     }
    }

});

方法3：

// create the editor grid   

     var  grid =  new  Ext.grid.EditorGridPanel({            store: store,            cm: cm,            renderTo:  'editor-grid' ,            width:600,            height:300,            autoExpandColumn: 'common' ,            title: 'Edit Plants?' ,            frame: true ,            plugins:checkColumn,            clicksToEdit:1,               tbar:  new  Ext.Toolbar({                autoWidth: true ,                    autoShow: true ,                items:[                {text:  'there is a add button for test' },                    '-' ,                    '->' ,                   {text:  'there is a update button for test' },                                       {text:  'there is a delete button for test' }            ]             })        });          this .bbar2 =  new  Ext.Toolbar({                renderTo:grid.tbar                ,items:[ 'Example of second toolbar' ,  '-' , {                     text: 'Button'                    ,iconCls: 'icon-key'                },  '-'                ]            });