Ext学习笔记

### ExtJS4学习笔记知识点总结 #### 1. ExtJS4组件创建方式的更新 在ExtJS4版本中，创建Ext组件的方式有所更新。引入了`Ext.create`方法，这是一种更灵活的组件创建方式。`Ext.create`允许开发者动态加载组件所需的JS文件，这有助于减少一次性加载的文件大小，从而加快组件的渲染速度。 #### 2. 动态加载JS的使用 ExtJS4支持动态加载JS文件，这对于性能优化非常有帮助。通过动态加载，可以只加载必要的组件脚本，而不是在页面加载时加载整个框架的`ext-all.js`文件。这可以显著减少页面加载时间，特别是对于那些只使用了ExtJS框架一部分功能的页面。 #### 3. 创建ExtJS4窗口（Window） 在ExtJS4中创建窗口组件`Ext.Window`，需要注意正确引入所需的CSS和JS文件，包括样式文件`ext-all.css`和JavaScript文件`bootstrap.js`以及语言包`ext-lang-zh_CN.js`。创建窗口时，需要指定窗口的宽度、高度、位置和对齐方式等属性。 #### 4. Ext.Window组件的显示 在创建窗口组件后，使用`.show()`方法来使窗口组件显示。同时，在创建窗口时，可以指定`headerPosition`属性来设置窗口标题栏的位置，有`top`, `bottom`, `left`, `right`等选项，其中`top`是默认值。 #### 5. HBox布局和属性 HBox布局是ExtJS提供的布局管理器之一，主要用于水平排列组件。在使用HBox布局时，需要掌握以下几个主要属性： - `align`: 用于设置子组件在容器内的对齐方式。可选的值有`top`、`middle`、`stretch`和`stretchmax`。`top`为默认值，表示组件排列在容器的顶端；`middle`表示垂直居中；`stretch`表示垂直排列并且拉伸以填充容器的高度；`stretchmax`表示垂直拉伸至最大尺寸。 - `flex`: 用于设置子组件的伸缩系数，这在布局中用于分配父容器剩余空间。 - `pack`: 用于设置组件在其分配的空间内的对齐方式，这在有多个子组件时尤其重要。可选的值有`start`、`center`和`end`，分别表示对齐至起始、中心和结束位置。 在实际使用中，通过配置这些属性可以灵活地控制组件的布局和显示效果。例如，可以通过配置`align`属性为`stretch`，使得窗口组件能够根据父容器的大小进行伸缩，达到更好的适应性。 #### 6. 注意事项 在编写ExtJS4代码时，需要注意命名空间的正确使用。在示例代码中提到，应该使用`Ext.window.Window`而不是`Ext.Window`，因为前者是正确的组件命名空间，使用后者在某些浏览器中可能会导致窗口组件无法正确显示。 以上知识点总结涵盖了ExtJS4组件创建、动态加载、窗口组件创建和显示、HBox布局使用以及布局属性配置等方面，这将有助于开发者更好地理解ExtJS4的使用方法和布局管理，从而有效地开发出复杂的用户界面。