Ext中显示多行tbar方法_extjs中tbar占多行-CSDN博客

<%@ 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>