ようこそ、皆さん

开心幸福生活每一天。。。

JPLT2が合格しましたが、会話と聴力はまだまだです。これからも、がんばれ!!!

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本身已经支持了这个功能,而且还听说是要收费,这就不爽了



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

posted on 2010-07-08 16:07 鮑佩 阅读(2556) 评论(0)  编辑  收藏 所属分类: ExtJS


只有注册用户登录后才能发表评论。


网站导航:
 
平平淡淡,认认真真生活才是真。