码迷,mamicode.com
首页 > 其他好文 > 详细

EXT组件自适应高度和宽度

时间:2014-07-16 15:38:02      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:style   color   使用   width   io   问题   

Ext代码
  1. Ext的组件构造函数的width、height不支持100%的设置方式,因此动态获取高度宽度来解决问题。   
  2. <div id="component" style="width:100%;height:100%"> <div>   
  3.   
  4. 组件构造的时候这样写:   
  5. width: Ext.get("component").getWidth(),   
  6. height: Ext.get("component").getHeight(),   

方法2

 

 在前面的示例中,为了显示一个面板,我们需要在页面上添加一个,然后把 Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域,该对象渲染到页面的body区域,并会随着浏览器显示区域的大小自动改变,一个 页面中只能有一个ViewPort实例。看下面的代码:

Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});

 

 

  Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。
Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也会常用

EXT组件自适应高度和宽度,布布扣,bubuko.com

EXT组件自适应高度和宽度

标签:style   color   使用   width   io   问题   

原文地址:http://www.cnblogs.com/gdds/p/3848025.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!