Ext Menu 笔记

最新推荐文章于 2021-05-05 15:29:53 发布

青青木屋

最新推荐文章于 2021-05-05 15:29:53 发布

阅读量1.1k

点赞数

分类专栏： Ext JavaScript 文章标签： menu ext border layout stylesheet function

本文链接：https://blog.csdn.net/greenqingqingws/article/details/5549110

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Ext

1 篇文章 0 订阅

订阅专栏

用Ext写了一个菜单出来，老是觉得怪怪的，感觉少了一条线，好难看。而且，后面还留出了一部分空白的地方。我先是设置高度来缩减这个空白的地方，但是没有起到实际的效果。后来终于知道是怎么回事了。frame这个属性被设置成了true，然后Ext就自己产生了一个高度，留出了一部分空间。具体原因不详。我做了一个例子，进行了比对。代码和运行界面如下。

代码如下：

text.php代码：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <head>
  <title>Ext Menu1</title>
  <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css"/>
  <script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="Ext/ext-all.js"></script>
  <script type="text/javascript" src="Menu.js"></script>
 </head>
 <body>
 </body>
</html>

Menu.js代码：

var Menu1=new Ext.menu.Menu({
 items:[{
  text:'menu11'
 },{
  text:'menu12'
 }]
});

var MainBar=new Ext.form.FormPanel({
 region:'north',
    autorender:'true',
 frame:true,//因为这个frame属性，所以高度设置到一定值以后，就没作用了。
 tbar:[{
  text:'Test1',
  menu:Menu1
 },{
  text:'Test2'
 },{
  text:'Test3'
 },{
  text:'Test4'
 },{
  text:'Test5'
 }]
});

var tabMainContent = new Ext.TabPanel({
    border: false,
    bodyStyle: 'border:none',
    //closable:true,
    bodyBorder:false,
    activeTab:0,
    enableTabScroll:true,
    margins: "0 0 0 0",
    items:[{
  title:'TestTab'
 }]
});

Ext.onReady(function(){
 //整体布局
 var viewport=new Ext.Viewport({
  layout:'border',
  items:[MainBar,{
   region:'center',
   layout:'fit',
   items:[tabMainContent]
  }]
 });
});

在IE中的效果如下：

修改过的Menu.js代码：

var Menu1=new Ext.menu.Menu({
 items:[{
  text:'menu11'
 },{
  text:'menu12'
 }]
});

var MainBar=new Ext.form.FormPanel({
 region:'north',
    autorender:'true',   
 //frame:true,//把这个frame属性注释掉，默认是false。也可以手动设置成false。
    height:29,//此时设置高度起作用了。
 tbar:[{
  text:'Test1',
  menu:Menu1
 },{
  text:'Test2'
 },{
  text:'Test3'
 },{
  text:'Test4'
 },{
  text:'Test5'
 }]
});

var tabMainContent = new Ext.TabPanel({
    border: false,
    bodyStyle: 'border:none',
    //closable:true,
    bodyBorder:false,
    activeTab:0,
    enableTabScroll:true,
    margins: "0 0 0 0",
    items:[{
  title:'TestTab'
 }]
});

Ext.onReady(function(){
 //整体布局
 var viewport=new Ext.Viewport({
  layout:'border',
  items:[MainBar,{
   region:'center',
   layout:'fit',
   items:[tabMainContent]
  }]
 });
});

在IE中的运行效果如图：