Ext中显示多行tbar方法

最新推荐文章于 2016-04-01 14:20:31 发布

sanfran_qi

最新推荐文章于 2016-04-01 14:20:31 发布

阅读量3k

点赞数

Ext JS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用Ext.js创建包含多种功能的多行工具栏，包括复制、粘贴、刷新等操作，以及如何将这些工具栏应用于不同的组件如Panel、FormPanel、GridPanel等。此外，文章还强调了正确使用`render`监听器来整合多个工具栏，并解释了在Window组件中嵌入Panel以避免布局混乱的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var oneTbar = new Ext.Toolbar(
{
 items :
 [
 {
  text : '复制'
 },
 {
  text : '粘贴'
 } ]
});

var twoTbar = new Ext.Toolbar(
{
 items :
 [ new Ext.Toolbar.TextItem('工具栏：') //显示文本 
  ]
 });

var threeTbar = new Ext.Toolbar(
{

 items :
 [
 {
  xtype : "tbfill" //后面的tools显示在右边 
 },
 {
  pressed : true,
  text : '刷新'
 } ]
});

var win = new Ext.Window(
{

 title : '演示多行tbar',
 width : 500,
 height : 300,
 modal : false,
 renterTo : Ext.getBody(),
 items :
 [
 {
  xtype : 'panel',
  tbar :
  [
  {
   text : '添加'
  }, '-',
  {
   text : '删除'
  }, '-',
  {
   text : '修改'
  } ],
  listeners :
  {
   'render' : function()
   {
    oneTbar.render(this.tbar); //add one tbar
    twoTbar.render(this.tbar); //add two tbar
    threeTbar.render(this.tbar); //add three tbar
   }
  }
 } ]

});
win.show();

要点 1

var oneTbar=new Ext.Toolbar

能被 rander 的 tbar 不能为普通的 js 数组

要为 Ext.Toolbar 类型

要点 2

window 或者 grid 中的

tbar :[{text:'添加'},'-',{text:'删除'},'-',{text:'修改'}],

不能为空，否则整个页面布局混乱

要点 3

再次理解

listeners 和 this

注意：这一方法对 Panel，FormPanel，GridPanel 都有效