ExtJS组件基础入门：创建与配置

本文档是关于ExtJS学习的基础篇，主要介绍了Ext组件体系及其使用方法。在Ext2.0版本中，框架经历了重大重构，核心在于构建了一个清晰的组件层次结构，使得组件成为了Ext控件的基础。Ext组件是由Component类定义的，每个组件都拥有唯一的xtype属性，这个属性值用于标识组件类型或创建特定类型的组件。 文章首先提到了组件的三大类别：基本组件、工具栏组件和表单元素组件。基本组件包括窗体（Window）、面板（Panel）等，它们在日常开发中非常实用。例如，创建一个新窗口的示例代码展示了如何使用`new Ext.Window()`，这是一种直接创建组件的方式。 为了更灵活地初始化组件，通常会在构造函数中添加配置参数，如创建面板的代码所示。这段HTML和JavaScript代码中，`panel`函数定义了一个参数对象（params），包含了面板的标题、大小和初始内容。然后通过`new Ext.Panel(params)`创建了一个Panel，并调用`render`方法将其添加到页面上的`"panel"`元素中。 关键代码部分： ```javascript function panel() { var params = { title: "Hello", width: 300, height: 200, html: "<h1>一个面板</h1>" }; var panel = new Ext.Panel(params); panel.render("panel"); } ``` 通过这段代码，开发者可以快速了解如何根据实际需求创建和配置不同类型的Ext组件，以及如何将它们渲染到网页中。学习这些基础知识对于理解和使用ExtJS框架至关重要，特别是对于前端开发人员来说，掌握组件体系和配置方法有助于提升开发效率和应用的可维护性。