Ext.onready()是用于在页面完成加载后显示内容，如果希望在加载过程中显示某些内容，那么必须在
<body>
<div id="test">要显示Ext组件的块</div>
<script type="text/javascript" src="包含Ext组件的代码"></script>
</body>
Ext.Panel是一个容器组件，显示为面板。相关属性如下
:
var panel = new Ext.Panel({
el: 'demo', //用于指定显示的位置，作用与renderTo类似，但用这个属性必须在后面配置render()方法，而renderTo不需要
title: '测试标题', //标题
floating: true, //浮动
shadow: true, //阴影
draggable: true, //可拖动
collapsible: true, //可收缩
html: '测试内容', //面板内容
pageX: 100, //位置
pageY: 50,
width: 200, //大小
height: 150
});
fireFox的调试工具firebug,
ie的调试工具debugbar 与companio.js
安装firebug
工具-->附加组件
f12 打开调试窗口 或ctrl+f12 弹出调试窗口
开启调试功能，注意不要对所有的网站开启调试功能，这样会引起浏览器崩溃，因为有些网站采用了旧的ie特有写法，会导致firefox不停报错。
通过选择“控制台”，“脚本”，“网络”下按按钮中的站点来设定针对哪些站点开启调试功能。
布局
1.容器有哪些？
容器可以通过
layout指定布局管理器
items指定需要摆放的组件。
2.布局管理器有哪些
FitLayout可以自动根据容器大小填充，但其中items只能指定一个组件，不能指定多个，而且组件不能指定自动调整高度autoHeight:true。
BorderLayout
可以针对多个子组件进行布局，弥补了FitLayout的不足。可以针对上、下、左、右、中五个方位进行布局。其中center必须指定，其余可以省略。
上、下只能指定高度，左、右只能指定宽度，中间部分自动计算。
同样也要避免指定autoHeight:true，以免破坏了布局。
上、下、左、右可以指定split:true进行调整大小，同时指定minSize和maxSize对调整范围进行限制。
每个区域都可以通过设置title:标题,collapsible:true来实现显示内容的折叠。
AccordionLayout实现伸缩菜单的布局
设置layout:'accordion'后，要记得在items的每个元素里都要加上title参数，因为accordion是通过点击标题来伸缩显示。另外与布局相关的配置参数都写到layoutConfig:{
titleCollapse:true, 是否单击标题折叠子面板
animate:true, 展开和折叠是否使用动画效果
activeOnTop:展开和折叠时是否改变子面板顺序
}
CardLayout制作向导最合适。
CardLayout配置几个子面板，每次它只显示其中一个。
当前显示的子面板是由activeItem来控制的。
AnchorLayout
可以为items中的每个组件指定与总体布局大小的值
第一种方式使用百分比进行配置，设置一个子组件占整体长和宽的百分比。
layout:'anchor',
items:[{
...
anchor:"宽度百分比 高度百分比"
},{
...
}];
第二种方式为设置右侧与底部的边距。
layout:'anchor',
items:[{
...
anchor:"-右侧的像素值 -底部的像素值"
},{
...
}];
以上两种方式可以同时使用。
AbsoluteLayout
是AnchorLayout的扩展，具备AnchorLayout所有特性，AnchorLayout布局下的子组件都是自上而下竖直排列的，我们不能控制每个组件的位置，AbsoluteLayout正是为解决这个问题而来的。
我们通过x,y参数达到控制子组件位置的效果。
FormLayout表单专用布局管理器
它也是AnchorLayout的扩展。
Ext.form.FormPanel使用它作为默认的布局方式。它提供了一素列的参数来控制显示效果。
FormLayout提供的用于控制表单显示的参数
hideLabels:是否隐藏field的标签
itemCls:表单显示的样式
labelAlign:标签的对齐方式（左，中，右）
labelPad:标签空白的像素值
labelWidth:标签宽度
Ext.form.Field对应的参数
clearCls:消除div渲染的css样式
fieldLabel:对应field的标签内容
hideLabel:是否隐藏标签
itemCls:field的css样式
labelSeparator:标签和field之间的分隔，默认是：
labelStyle: 标签的CSS样式
ColumnLayout布局
layout:'column',
items:[{
title:'column 1',
columnWidth: .3
},{
title:'column 2',
columnWidth: .7
}]
注意columnWidth参数，它是0-1之间的一个小数，表示组件在整体中所占的百分比，它们的总和应该是1.
如果希望某列的宽度固定，则可以直接用width:像素 指定。而其余的列会进行宽度的自动配置。
Ext.Container是所有可布局组件的超类，只要是继承了Ext.Contrainer的子类就可以对自身进行布局。最常用的也是最主要的参数layout和items，它们分别用来设置使用的布局方式和包含的子组件。只要是进行布局，就必然会用到这两个参数，与这两个参数对应的还有另外两个参数，它们在需要进行特殊配置时非常有用：layoutConfig用于完成特殊配置，activeItem表示当前显示哪一个子组件，这在AccordionLayout和CardLayout等每次只能显示一个子组件的布局方式中非常有用。
重点提及的一个参数是defaultType，它用来设置子组件默认使用的xtype的值。默认情况下是defaultType:'panel'也就是items中创建的每个子组件都是Ext.Panel的实例。
可以使用Viewport对整个页面进行布局，但是每个页面只能有一个Viewport的限制。
分享到：
相关推荐
本总结例子将深入探讨EXTJS Grid的核心特性和使用方法，通过源代码分析，帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成，包括Store（数据存储）、Columns（列配置）...
二、环境搭建 开始使用ExtJS前，需要从官方网站下载库文件。基本的引用文件包括： 1. `extjs/resources/css/ext-all.css`：样式表，定义了ExtJS组件的样式。 2. `extjs/adapter/ext/ext-base.js`：适配器，使ExtJS...
### Extjs 学习——总结的一些常用知识点 #### 一、概述 Extjs 是一个用于构建 Web 应用程序的强大框架，它提供了大量的 UI 组件和功能，可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验，...
21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...
二、CSS元素 4.addClass Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式 5.radioClass Ext.fly('elId').radioClass('myCls');//添加一个或多个className到这个元素，并移除其所有侧边...
### MyEclipse中使用ExtJS出现缓慢、卡死、白屏问题及解决方法总结 在进行Web开发时，经常会遇到一些工具与框架不兼容或配置不当导致的问题，这些问题往往会影响到开发效率。本文将针对在MyEclipse环境中使用ExtJS...
总结起来，这个项目是一个综合运用Java、JSP和Extjs4.0技术的后台管理系统，具备完整的源码和二次开发能力，为企业提供了高效、易用的管理工具。对于开发者来说，这是一个学习和实践企业级应用开发的良好案例。
虽然这个文件名暗示它可能与Java编程语言相关，但考虑到其在EXTJS资料包中，我们可以推测这可能是作者或分享者通过Java开发者视角来探讨EXTJS的使用，或者是如何将EXTJS与Java后端技术结合的经验总结。在阅读这份...
#### 二、ExtJS 4.0 新特性 - **模块化架构**：ExtJS 4.0 引入了模块化架构，使得开发者可以按需加载特定的功能模块，提高了应用程序的性能。 - **主题引擎**：新增的主题引擎支持动态更换界面风格，使得应用的外观...
总结起来，搭建ExtJS4开发环境主要包括以下几个步骤： 1. 下载并解压ExtJS4的版本。 2. 选择需要的资源文件导入Eclipse项目。 3. 在HTML页面中引入ExtJS的样式和脚本文件。 4. 使用`Ext.onReady`初始化组件库并编写...
#### 二、图书基本信息 - **书名**：《Learning ExtJS》 - **作者**：Shea Frederick、Colin Ramsay、Steve 'Cutter' Blades - **出版社**：Packt Publishing - **出版时间**：2008年11月 - **ISBN**：978-1-847195...
#### 二、如何正确访问EXTJS 5.1 Examples 对于初次接触EXTJS 5.1或长时间未使用的开发者来说，可能会遇到一些访问上的问题。例如，尝试直接打开examples文件夹中的HTML文件时，只能看到简短的描述文本而无法查看...
ExtJS是一种基于JavaScript的...总结起来，"extjs网页控件开发"涵盖了ExtJS的核心技术，包括图表的创建和多级联动下拉列表框的实现。通过深入学习和实践，不仅可以提高开发效率，还能打造出具有专业水准的Web应用程序。
总结，ExtJS代码自动生成是提高开发效率的重要手段，它涉及对数据库字段的理解、组件类型的选取以及代码生成规则的制定。通过合理利用自动化工具和遵循一定的规范，可以使ExtJS应用的开发更加高效和一致。
总结来说，这个"extjs通用后台管理界面"是一个使用ExtJS框架精心设计的后台管理界面模板，具备良好的用户体验和实用性。开发者可以通过下载和研究"Ext_Demo"压缩包，学习ExtJS的使用技巧，快速构建自己的后台管理...
#### 二、Extjs 中 Cookie 的基本概念与使用 在 Extjs 中，可以通过 `Ext.state` 模块来管理和操作 Cookie。`Ext.state` 提供了一个统一的状态管理接口，其中包含了多种存储提供者（如 SessionStorageProvider、...
总结，ExtJS 4.2的分组小计功能强大且灵活，能有效地帮助开发者构建具有数据分析功能的Web应用。通过理解并熟练运用上述知识点，你可以根据实际需求构建出满足用户需求的表格展示。在实际项目中，还需要注意数据的...
#### 四、总结 通过以上步骤，我们可以成功地在Spket IDE中配置好Extjs的开发环境，不仅极大地提高了代码编写的速度，还提升了代码的质量。同时，通过查看源代码，开发者可以更深入地了解Extjs的工作原理，有助于...
二、安装Sencha Cmd Sencha Cmd是ExtJS的命令行工具，用于自动化构建、测试和部署过程。你可以通过npm来安装Sencha Cmd，打开终端或命令提示符，输入以下命令： ``` npm install -g sencha-cmd ``` 这会全局安装...