EXT_JS入门教程：从零开始构建应用

"EXT_JS实用开发指南，个人整理笔记，主要涵盖了EXT_JS的基本使用方法，包括引入库文件、启动应用、以及EXTJS类库的主要组成部分。" EXT_JS是一种基于JavaScript的富客户端应用开发框架，它提供了丰富的用户界面组件和强大的数据绑定机制。本指南将介绍EXT_JS的一些基础用法。 首先，为了在页面中使用EXT_JS，你需要在HTML文件中引入EXT_JS的样式表和JavaScript库。这通常包括`extjs/resources/css/ext-all.css`用于定义组件的样式，`extjs/adapter/ext/ext-base.js`作为适配器，以及`extjs/ext-all.js`包含完整的EXT_JS库。这三者的顺序和存在是EXT_JS能够正常运行的基础。 在EXT_JS库文件加载完成后，可以通过`Ext.onReady`函数来执行应用的初始化代码。`Ext.onReady`会在DOM完全加载并准备好后执行传入的函数，这通常是EXT_JS应用的起点。你可以提供一个命名函数或者直接使用匿名函数，例如： ```javascript // 命名函数 function fn() { alert("ExtJS库已加载!"); } Ext.onReady(fn); // 匿名函数 Ext.onReady(function() { alert("ExtJS库已加载!"); }); ``` EXT_JS的强大之处在于其丰富的组件系统。例如，创建一个简单的窗口（Window）可以这样实现： ```javascript Ext.onReady(function() { var win = new Ext.Window({ title: "hello", width: 300, height: 200, html: '<h1>Hello, easyjfopensource</h1>' }); // 参数是"标题,宽度,高度,html文本" win.show(); }); ``` 这段代码将在页面上展示一个标题为"hello"，宽300像素，高200像素的窗口，内部显示文本"Hello, easyjfopensource"。 EXT_JS的类库主要分为两大部分：底层API（core）和控件（widgets）。底层API为核心功能，包含了DOM操作、事件处理、查询工具等基础功能，这些位于源代码的`core`子目录中，如`DomHelper.js`和`Element.js`等文件。控件则是可以直接在页面上显示的可视化组件，如面板（Panel）、选项板（TabPanel）、表格（Grid）、树（Tree）、窗口（Window）、菜单（Menu）、工具栏（Toolbar）和按钮（Button）等，它们构建了EXT_JS丰富的用户界面。 通过掌握EXT_JS的这些基础知识，开发者可以快速构建出交互性极强且用户体验良好的Web应用。在实际开发过程中，还需要了解EXT_JS的数据模型、数据绑定、布局管理、扩展和自定义组件等方面的知识，才能充分发挥EXT_JS的优势。