原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
EXTJS 布局.doc
EXTJS 布局
EXTJS 布局 收藏
关键字: extjs layout 总结 extjs 的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
[list]
absolute 顾名思义，在容器内部，根据指定的坐标定位显示
accordion 这个是最容易记的，手风琴效果
Java代码
Ext.OnReady(function(){
var panel=new Ext.Panel( //Ext.formPanel就是Panel中用了form布局
{
renderTo:paneldiv ,
title:容器组件 ,
layout :accordion ,
width:500 ,
height:200 ,
layoutConfig:{animate:false },
items:[
{title:元素1 ,html: },
{title:元素2 ,html: },
{title:元素3 ,html: },
{title:元素4 ,html: }
]
}
);
});
Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
renderTo:paneldiv,
title:容器组件,
layout
:accordion,
width:500,
height:200,
layoutConfig:{animate:false},
items:[
{title:元素1,html:},
{title:元素2,html:},
{title:元素3,html:},
{title:元素4,html:}
]
}
);
});
anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Java代码
Ext.onReady(function() {
var panel1 = new Ext.Panel({
title: panel1 ,
height: 100 ,
anchor: -50 ,
html: 高度等于100，宽度=容器宽度-50
});
var panel2 = new Ext.Panel({
title: panel2 ,
height: 100 ,
anchor: 50% ,
html: 高度等于100,宽度=容器宽度的50%
});
var panel3 = new Ext.Panel({
title: panel3 ,
anchor: -10, -250 ,
html: 宽度=容器宽度-10,高度=容器宽度-250
});
var win = new Ext.Window({
title: Anchor Layout ,
height: 400 ,
width: 400 ,
plain: true ,
文档评论（0）