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