EXT_JS入门教程：从基础到窗口组件

"EXT_JS实用开发指南" EXT JS是一种流行的JavaScript库，用于构建富客户端Web应用程序。这个实用开发指南将引导你了解EXT JS的基础知识和如何使用它来创建交互式的用户界面。 1. 页面引入EXT JS库 在使用EXT JS框架构建页面时，首先需要在HTML中引入必要的库文件。这通常包括CSS样式表`extjs/resources/css/ext-all.css`，适配器文件`extjs/adapter/ext/ext-base.js`，以及EXT JS的主要库文件`extjs/ext-all.js`。`Ext.BLANK_IMAGE_URL`常量用于设置空白图片URL，这是EXT JS组件在某些情况下使用的。 2. 应用启动与`Ext.onReady` EXT JS的应用程序通常始于`Ext.onReady`函数，它会在EXT JS库完全加载并准备好使用时执行。你可以传递一个函数给`Ext.onReady`，这个函数将在页面DOM准备就绪时运行。例如，你可以创建一个名为`fn`的函数并在其中添加一些初始化逻辑，如弹出一个提示框，以验证EXT JS库是否已经加载。 ```javascript function fn() { alert("ExtJS库已加载！"); } Ext.onReady(fn); ``` 或者，你也可以直接使用匿名函数： ```javascript Ext.onReady(function() { alert("ExtJS库已加载！"); }); ``` 3. 创建EXT JS窗口 EXT JS提供了一套丰富的控件，如窗口（Window）。你可以通过创建一个新的`Ext.Window`实例来显示一个窗口。以下代码展示了一个简单的窗口，带有标题、宽度、高度和内含的HTML文本： ```javascript Ext.onReady(function() { var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello, easyjfopensource</h1>' }); win.show(); }); ``` 4. EXT JS类库结构 EXT JS的类库主要分为以下几个部分： - **底层API (core)**：这是EXT JS的基础，包含DOM操作、事件处理、DOM查询等功能。核心API位于`core`子目录下，如`DomHelper.js`和`Element.js`。 - **控件 (widgets)**：EXT JS提供了大量的可视组件，如按钮、表格、面板等，它们构建在底层API之上。控件使得开发者可以方便地创建复杂的用户界面。 - **布局 (Layouts)**：EXT JS的布局管理器允许你动态调整组件的大小和位置，以适应不同的屏幕尺寸和设备。 - **数据绑定 (Data Binding)**：EXT JS支持数据模型和视图之间的双向绑定，使数据的更新能实时反映到界面中。 - **表格和树形组件 (Grids & Trees)**：EXT JS提供了强大的表格和树形视图，用于显示和操作大量结构化数据。 - **表单 (Forms)**：EXT JS的表单组件支持各种输入类型，并提供了验证和数据提交功能。 - **工具栏和菜单 (Toolbars & Menus)**：用于创建顶部工具栏、底部工具栏和下拉菜单。 - **图表 (Charts)**：EXT JS的图表组件可以创建各种复杂的数据可视化图形。 - **其他组件 (Miscellaneous Components)**：包括分页导航、弹出对话框、提示框等。 EXT JS通过其丰富的组件和API，为开发者提供了构建功能强大且响应式Web应用的工具。通过深入学习和实践，你可以掌握EXT JS的精髓，从而创建出高效、美观的Web应用程序。