Ext多行工具栏

最新推荐文章于 2016-09-19 13:04:44 发布

转载最新推荐文章于 2016-09-19 13:04:44 发布 · 1.0k 阅读

文章标签：

#ext #工具 #function #extjs #border

JavaScript 同时被 2 个专栏收录

11 篇文章

订阅专栏

Ext

2 篇文章

订阅专栏

本文介绍了如何在Extjs中通过监听Panel的render事件，实现多行工具栏的渲染，确保不会影响页面显示，适用于Panel、FormPanel、GridPanel等组件。

在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); 
});