加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

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

(2011-05-04 14:03:02)
标签:

extjs

tbar

bbar

多行

it

分类: ExtJs

在应用程序的制作中,我们经常性的会用到工具栏,在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);
   }
  }
 });

});

 

 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有