EXT JS框架深度学习：从入门到精通

EXTJS 是一个强大的JavaScript 库，用于构建富客户端应用程序。它提供了一套完整的组件化UI框架，包括面板、窗口、布局、表格、数据存储等多种功能组件。本教程将引导你了解EXTJS的基础知识和核心组件的使用。 首先，EXTJS框架的下载可以从官方网站Sencha的网址（http://www.sencha.com）或EXTJS的官方网址（http://www.extjs.com）获取。下载后的文件包含了EXTJS库的各种资源，如CSS样式文件、JavaScript库文件等。 在使用EXTJS时，你需要在HTML页面中引用EXTJS的相关资源。通常，这涉及到引入CSS样式文件`extjs/resources/css/ext-all.css`和两个JavaScript文件，分别是适配器`extjs/adapter/ext/ext-base.js`和核心库文件`extjs/ext-all.js`。 EXTJS的调用主要通过`Ext.onReady`函数来实现。这个函数确保在DOM加载完毕且EXTJS库加载完成之后执行指定的函数，例如显示一个警告框提示EXTJS库已加载。你可以定义一个独立的函数，也可以直接使用匿名函数，如下所示： ```javascript // 使用独立函数 function fn() { alert("ExtJS库已加载!"); } Ext.onReady(fn); // 或者使用匿名函数 Ext.onReady(function() { alert("ExtJS库已加载!"); }); ``` EXTJS中的组件是其核心特性之一。例如，面板（Panel）是一种常见且基础的组件，用于展示内容和组织其他组件。创建一个面板的示例代码如下： ```javascript var win = new Ext.Window({ title: "hello", width: 300, height: 200, html: '<h1>Hello</h1>' }); win.show(); ``` 这个例子创建了一个带有标题、固定宽度和高度，以及包含“Hello”文本的窗口。 EXTJS的组件体系丰富多样，大致分为基本组件、工具栏组件和表单及元素组件。基本组件包括但不限于BoxComponent（具有边框属性的组件）、Button（按钮）等。例如，创建一个按钮组件： ```javascript var button = new Ext.Button({ text: '点击我', handler: function() { alert('按钮被点击了'); } }); ``` 此外，EXTJS还提供了诸如窗口（Window）、布局（Layouts，如Fit、Border、Form等）、表格（Grid）、数据存储（Store）和树控件（Tree）等功能组件。表格用于展示大量数据，而数据存储则负责管理和同步数据。例如，创建一个简单的表格： ```javascript var store = new Ext.data.Store({ // 数据源配置 }); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: '列1', dataIndex: 'field1'}, {header: '列2', dataIndex: 'field2'} ] }); grid.render('grid容器ID'); ``` EXTJS的树控件（Tree）常用于层次结构的数据展示，可以通过配置节点数据和扩展节点操作来创建树形结构。 总结来说，EXTJS提供了一个完整的前端开发框架，允许开发者构建功能丰富的Web应用，通过组件化设计，可以灵活组合和定制界面，实现复杂交互。通过对EXTJS的基本使用、组件体系和功能组件的深入理解，开发者能够构建出高效、美观且用户友好的应用程序。