Anchor布局的效果直接看代码和效果图最为直观
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>WindowLayOut</title>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../ext-all-debug.js"></script>
<styletype="text/css">
.x-panel-bodyp{}{
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<scripttype="text/javascript">
//AnchorLayout要点:"1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值"
Ext.onReady(function(){
varpanel1=newExt.Panel({
title:"panel1",
height:100,
anchor:'-50',
html:"高度等于100，宽度=容器宽度-50"
});
varpanel2=newExt.Panel({
title:"panel2",
height:100,
anchor:'50%',
html:"高度等于100,宽度=容器宽度的50%"
});
varpanel3=newExt.Panel({
title:"panel3",
anchor:'-10,-250',
html:"宽度=容器宽度-10,高度=容器宽度-250"
});
varwin=newExt.Window({
title:"AnchorLayout",
height:400,
width:400,
plain:true,
layout:'anchor',
items:[panel1,panel2,panel3]
});
win.show();
});
</script>
</body>
</html>
欢迎加入:http://www.itpob.cn/bbs
分享到：
相关推荐
ExtJs 教程与实例_学习笔记 1.什么是ExtJs 2....等等
6. **样式与布局**：由于两个框架都涉及用户界面，可能需要处理 ExtJS 样式与 Tapestry 默认样式之间的冲突，以确保视觉一致性。 通过这样的集成，开发者可以获得 ExtJS 提供的精美 UI 组件和 Tapestry 强大的后端...
在"EXT_ASP.rar_asp extjs_extjs_extjs asp_extjs+asp"这个压缩包中，我们可以看到EXTJS与ASP结合使用的示例，用于开发一个通讯录程序，这是一个很好的学习EXTJS和ASP集成的实践项目。 首先，EXTJS的核心在于它的...
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJS实现的用户管理界面,实现了用户的增加功能、修改功能、删除功能、查看工程。还提供了下拉列表选择框进行年龄的选择功能。
在描述中提到的"extjs4"指的是ExtJS的第4个主要版本，这个版本引入了许多改进和新特性，如新的布局系统、更好的性能和更多的UI组件。 **3. Oracle数据库** Oracle是全球知名的关系型数据库管理系统，广泛应用于大型...
标题中的"php-blog.rar_extjs_extjs php_extjs php bl_php blog"暗示这是一个与PHP和EXTJS相关的项目，可能是用于创建一个单用户的博客系统。EXTJS是一个强大的JavaScript库，用于构建富客户端应用，而PHP是一种广泛...
以上介绍的只是Extjs布局管理中的一小部分，Extjs官网提供了丰富的例子和详细的文档，这是学习Extjs布局的最佳资源。通过官网的例子，可以直观地看到不同布局类型的效果和配置方法，极大地便利了开发者的布局实践和...
资源名称：获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
总的来说，这个"ExtJS--Windows.rar"包是一个学习和实践使用ExtJS构建Windows风格前端应用的好资源，涵盖了从组件使用、布局设计到数据交互等多个方面。对于希望提升前端技能，尤其是想要将Web应用设计得更具桌面...
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4...
extjs_struts2_整合
EXTJS+PHP bs小型房屋管理系统
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...
ExtJS是一个广泛使用的JavaScript库，...通过深入学习和理解这些内容，开发者能够熟练掌握ExtJS 3.3，编写出高效、高质量的Web应用。同时，文档中的示例代码也有助于开发者快速上手实践，将理论知识转化为实际技能。
extjs3.1中文API_chm版+书 下次再穿个可视化编辑器
总之，"ExtJs_ASPMVC_Batch_Operation.rar"是一个综合性的示例，涵盖了Web开发中的多个重要技术，对于想要深入学习ExtJS与ASP.NET MVC集成的开发者来说，是一个宝贵的资源。通过实践这个项目，你可以了解到如何在...
适合ExtJs开发人员extjs技术上手以及深入