新手指南：ExtJS ColumnLayout布局详解

本文档主要介绍了ExtJS中的ColumnLayout布局方式，适合初学者入门学习。ExtJS是一款强大的JavaScript框架，专用于开发富客户端应用程序，它支持跨平台，并且与后台技术无关，可以灵活应用于多种开发环境，如.NET、Java和PHP等。最新版本为ExtJS 4.0.2a，虽然收费，但早期版本免费。 ColumnLayout布局是ExtJS提供的核心功能之一，它将整个容器视作一个列，允许开发者通过设置子元素的`columnWidth`或`width`属性来控制子组件在列中的占用空间。`columnWidth`采用百分比形式定义，适合动态调整，而`width`则使用绝对像素值，提供更精确的定位。这两种方式可以结合使用，以便创建出灵活多变的布局效果。 在使用ExtJS时，首先需要获取库文件，可以从官方网站下载，链接地址包括了不同版本和付费性质的资源。资源包包含多个子目录，如`adapter`用于底层库映射，`air`针对Adobe Air平台，`build`提供压缩后的源码，`docs`存放API文档，`examples`展示使用实例，`package`包含常用控件，`resources`集中存储CSS和图片等UI资源，`source`则是未压缩的源代码，遵循LGPL开源协议。关键的库文件如`Ext-all.js`和`ext-core.js`提供了完整的压缩和非压缩版本，便于生产和调试。 文档还附带了一个HTML头部，包含元数据和样式链接，这表明接下来可能会介绍如何在实际项目中应用ColumnLayout布局以及相关的CSS样式和HTML结构。学习者可以通过这些内容逐步掌握ExtJS的布局机制，进而构建高效美观的用户界面。对于初学者来说，理解并实践ColumnLayout的用法，是深入理解和运用ExtJS布局体系的第一步。