ExtJS2.0学习：FormPanel的checkbox与radio示例

"本文档是关于ArchExtJS2.0学习系列的第七部分，专注于Ext.FormPanel的使用，特别是其他组件的示例，包括checkbox和radio的简单应用。文档通过实例展示了如何创建多列布局的checkbox和单选按钮（radio）组，并解释了相关配置属性。" 在ArchExtJS2.0的学习过程中，Ext.FormPanel是一个核心组件，用于构建表单。在本教程的第四部分，主要探讨了如何利用FormPanel展示其他类型的组件，如checkbox和radio，以创建更丰富的用户界面。 1. Checkbox简单示例 - 效果图：文档中包含一个展示checkbox布局的图片。 - 代码实现：创建一个FormPanel，设置其布局为"form"，并包含一个"column"布局的Panel。Panel内部包含两个宽度为50%的checkbox，分别显示“足球”和“篮球”的boxLabel。`isFormField`属性设置为`true`，确保Panel能正确显示fieldLabel。 - 关键属性： - `checked`: 设置复选框的初始状态，默认为`false`。 - `name`: 给复选框分配唯一的`name`值。 - `value`: 指定复选框的初始值，默认为`undefined`。 2. Radio简单示例 - 与checkbox类似，但单选按钮必须在同一组内具有相同的`name`值，以实现单选功能。 - 效果图：文档中提供了单选按钮布局的图片。 - 代码实现：创建类似的FormPanel，但需确保同一组的radio具有相同的`name`属性，以实现单选功能。 - 注意事项：单选按钮在使用时，虽然配置方法与checkbox类似，但它们的行为和用法是不同的，radio必须在一组中保持唯一性。 这些示例对于初学者理解ExtJS中的表单元素和布局管理非常有帮助。通过掌握这些基础知识，开发者可以创建复杂且功能齐全的表单界面，以满足各种业务需求。在实际项目中，还可以结合其他组件，如textfield、textarea等，进一步丰富表单内容。 在学习和应用这些示例时，开发者应重点关注布局管理（如column或table布局），以及组件属性的设置，例如`checked`、`name`和`value`，这些都是构建交互式表单的关键元素。同时，理解`Ext.onReady`函数的作用，它是ExtJS中用于在页面加载完成后执行代码的常用方式。 这个文档为学习ArchExtJS2.0的FormPanel和其他组件提供了一个很好的起点，对于想要深入理解ExtJS表单设计的开发者来说，这是一个有价值的参考资料。