`

EXT的Fit 布局

    博客分类:
  • ext
ext 
阅读更多
Fit 布局的代码,如下:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"}
] }
);
});

上面的代码指定父容器使用Fit 布局,因此子将自动填满整个父容器。
如果容器组件中有多个子元素,则只会显示一个元素,如下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
] }
);
});

如果不使用布局Fit,代码如下:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:120,
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
] }
);
});

2个元素都会排列显示出来。
分享到:
评论

相关推荐

    Ext10种布局

    ExtJS2.0一共包含十种布局,常用的布局有border 、 column 、 fit 、 form 、 card 、 tabel等布局

    学习ExtJS fit布局使用说明

    一、Fit布局,子元素将自动填满整个父容器(对元素设置宽度无效),如果容器组件中有多个子元素,则只会显示第一个子元素。 二、应用举例 代码如下: Ext.onReady(function(){ new Ext.Panel({ renderTo:Ext.getBody...

    EXTJS4自学手册

    EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件(表格) EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面...

    Ext Js权威指南(.zip.001

    9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片布局:ext.layout.container.abstractcard与ext.layout.container.card / 456 9.5 标签面板 / 458 9.5.1 ...

    ExtJs常用布局--layout详解实例代码

    ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...

    ExtJS 2.0实用简明教程

    11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格...

    ExtJSWeb应用程序开发指南(第2版)

    5.2.2 Fit自适应布局 5.2.3 Accordion折叠布局 5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0...

    Extjs4.1.1

    第八讲.EXtJS布局模式-Auto布局、Fit布局、Accordion布局 第九讲.ExtJS布局模式-Card、Anchor、Absolute 第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第...

    ExtJs4_笔记.docx

    第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...

    深入浅出Extjs4.1.1

    8、EXtJS布局模式-Auto布局、Fit布局、Accordion布局 9、ExtJS布局模式-Card、Anchor、Absolute( r! k$ G/ Q, u! c' U 11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 ...

    Sencha Touch权威指南

    面板与布局,包括Tab面板组件、Carousel组件、NavigationView组件,以及盒布局、Fit布局和Card布局等各种常见布局;表单和表单域组件,包括各种特殊输入组件、单选框与复选框、选取框组件、日期选择组件、滚动条组件...

    ExtJS5-一个简洁完整的后台管理系统入门实例

    4、通过实现角色管理、用户管理两个基础的功能模块,演示了Viewport、Container、Panel、TreePanel、Grid、Window、Form等常用组件的用法,以及border、column、form、fit、hbox等常用布局方式; 5、通过自定义一个...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...

    ExtJs2.0简明教程

    ……..28 5.4 Fit布局……….………………………………………………………………………………………………..…….30 5.5 Form布局……….……………………………………………………………………………………...

    基于ExtJS3的后台管理系统模板

    3、通过实现角色管理、用户管理、部门管理三个基础的功能模块,演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法,以及border、column、form、fit、accordion、hbox等常用布局方式;...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet v2.2.1 ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, ...

Global site tag (gtag.js) - Google Analytics