Ext2.0 toolBar 换行

今天在网络上找了一下toolBar的换行方法，一试果然可以
*.jsp的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="../common/common_header.jsp"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Extjs study</title>
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=contextPath%>/js/ext/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="<%=contextPath%>/js/ext/ext-all-debug.js" ></script>
<script type="text/javascript" src="<%=contextPath%>/js/ext/ext-lang-zh_CN.js" ></script>
<script type="text/javascript" src="<%=contextPath%>/js/study/extjstudy.js"></script>
</head>
<body>
<h1>ExtJS Study</h1>
<div id='demoGrid'></div>
</body>
</html>

*.js代码如下：

Ext.onReady(function () {
    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 gridMain = new Ext.Panel({
    renderTo :"demoGrid",
         width: Ext.get('demoGrid').getWidth()*0.99,
    height : 395,
    enableHdMenu : false,
    enableColumnMove : false,
    viewConfig: {
           forceFit: true
       },
       items: [{
              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
                  }
              }
          }]
   });
// gridMain.render();
});

跑出来的效果如下：

听说现在的Ext3.0的toolBar本身已经支持了这个功能，而且还听说是要收费，这就不爽了

快快乐乐、认认真真生活才是真。

Ext2.0 toolBar 换行

Ext2.0 toolBar 换行

你可能感兴趣的:(Ext2.0 toolBar 换行)