Ext中显示多行tbar方法

来源：互联网发布：b2c站内优化和站外优化编辑：程序博客网时间：2024/05/18 02:49

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>ExtJS</title>  <link rel="stylesheet" type="text/css" href="/js/ext-3.4.0/resources/css/ext-all.css" />  <!--   注意：ext-base.js必须放在ext-all.js前面  -->  <script type="text/javascript" src="/js/ext-3.4.0/adapter/ext/ext-base.js"></script>  <script type="text/javascript" src="/js/ext-3.4.0/ext-all.js"></script>  <script>    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();  </script></head><body></body></html>

要点 1

var oneTbar=new Ext.Toolbar

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

要为 Ext.Toolbar 类型

要点 2

window 或者 grid 中的

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

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

要点 3

再次理解

listeners 和 this

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

但是对 Window 无效，所以要在 Window 中嵌入 Panel

0 0