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'  
•             }, '-'  
•             ]   
•         });   
•   
•