### Extjs4.0中文学习手册与入门详解 #### 一、Extjs4.0简介与获取 **Extjs4.0**是一款基于JavaScript的开源前端框架，它提供了丰富的用户界面组件和强大的数据处理功能，使得开发者能够快速构建高性能、交互性强的Web应用。对于初学者来说，熟悉Extjs4.0的基础知识是非常重要的。 - **获取Extjs4.0**： - 官方网站：可以从[http://extjs.org.cn/](http://extjs.org.cn/)获得需要的Extjs发布包及更多支持。 - 下载最新版本的Extjs4.0压缩包，并解压。 - **搭建学习环境**： - 假设您的开发环境中已安装MyEclipse和Tomcat。 - 在MyEclipse中新建一个Web项目，例如命名为`Extjs4`。 - 将Extjs4.0.7压缩包解压后的所有文件复制到项目根目录下的`WebContent`文件夹中。 - `Examples`目录包含了Ext官方提供的示例程序，其中可能包含PHP代码，如果遇到错误信息可暂时忽略。 - 部署并启动Tomcat服务器。 - 测试环境是否可用：打开浏览器访问`http://localhost:8080/Ext4/index.html`。 - 查看API文档：`http://localhost:8080/Ext4/docs/index.html` - 查看示例页面：`http://localhost:8080/Ext4/examples/index.html` #### 二、编写第一个Extjs程序 - **创建Hello World示例**： - 在`WebContent`目录下新建`helloworld.js`文件，并输入以下内容： ```javascript Ext.onReady(function(){ Ext.create('Ext.panel.Panel', { title: 'Hello Ext', width: 350, bodyPadding: 5, items: [{ xtype: 'label', text: 'Hello! Welcome to ExtJS.' }] }).render(document.body); }); ``` - 创建`helloworld.html`文件，并输入以下内容： ```html ``` - 浏览器访问`http://localhost:8080/Ext4/helloworld.html`，如果一切正常，您将看到一个带有标题“Hello Ext”的面板，内容为“Hello! Welcome to ExtJS.”。 - **理解Ext.onReady和Ext.application**： - `Ext.onReady`：该方法在当前DOM加载完成后自动调用，确保页面内的所有元素都能被脚本引用。示例代码： ```javascript Ext.onReady(function(){ alert('Hello World!'); }); ``` - `Ext.application`：用于定义一个Ext应用的基类，通常用于构建完整的Ext应用。 #### 三、DOM操作与事件响应 - **获取DOM元素**： - 使用`Ext.get`方法根据ID获取页面上的元素： ```javascript var myDiv = Ext.get('myDiv'); ``` - `Ext.get`返回的是一个`Element`对象，可以直接操作底层DOM节点。 - **选择器**： - 使用`Ext.select`方法获取具有特定CSS选择器的所有元素： ```javascript var paragraphs = Ext.select('p'); ``` - `Ext.select`返回的是`Ext.CompositeElement`对象，可通过其中的`each()`方法遍历所选元素。 - **事件处理**： - 给按钮添加单击事件响应： ```javascript var button = Ext.get('myButton'); button.on('click', function(){ alert('Button clicked!'); }); ``` #### 四、Extjs4布局详解 - **Fit布局**： - Fit布局中，子元素会自动填充整个父容器空间。 - 如果在Fit布局中放置了多个组件，仅显示第一个子元素。 - 示例代码： ```javascript Ext.create('Ext.window.Window', { title: 'Fit Layout Example', layout: 'fit', width: 400, height: 300, items: [ {xtype: 'grid', store: myStore} ] }).show(); ``` - **Border布局**： - Border布局允许在一个容器内将子组件分成五个区域：北(North)、南(South)、东(East)、西(West)和中心(Center)。 - 每个区域可以包含一个或多个子组件，子组件可以根据布局规则调整其大小和位置。 - 示例代码： ```javascript Ext.create('Ext.panel.Panel', { title: 'Border Layout Example', layout: 'border', width: 600, height: 400, items: [ {xtype: 'grid', region: 'center', store: myStore}, {xtype: 'panel', region: 'west', width: 200, collapsible: true, title: 'Navigation'}, {xtype: 'toolbar', region: 'north', title: 'Toolbar'} ] }).show(); ``` 通过以上步骤，您已经完成了Extjs4.0的初步学习，并能够掌握如何搭建开发环境、编写基础示例程序、操作DOM元素、处理事件以及理解不同类型的布局。希望这些基础知识能帮助您更好地探索和学习Extjs4.0。

用extjs4 TreeGrid做的report报表

Extjs4.2.1核心包，做学习测试用，拷贝这些文件就行了，如果拷贝完整的包，机子很容易卡死，有这个核心就够了，不用去把完整的包全部拷贝到项目中去 引入这两个文件就够了：

extjs4.2 日期控件 datefield 拓展加上选择时分秒功能。 在ExtJs4.2表单控件里分别有个时间控件（datafield）和时间控件(timefield)，但是官方提供的控件不能将日期和时分秒整合到一起，我从网上搜集整理了一个可用的选择日期时分秒的拓展控件，extjs版本是4.2，亲测能用，压缩包里面含有效果示例图和调用方式。 extjs4.2 ext4.2 日期时间控件 时分秒

脚本娃娃 (Ext4.1.0 Doc中文版 V1.0.0 Beta)

Extjs4下拉菜单中用Grid显示，有单选，和多选两个控件，完美通用代码控件，绝对让你好用，值得收藏^-^

ExtJS4.2简单布局+权限管理+SqlServer2008(绑定数据、添加、修改、删除、查询、导入和导出、Ztree等)

extJS4.x中文API学习教程Extjs初步获取Extjs下载extjs：

Ext JS领域的集大成之作，全面系统地讲解Ext JS的开发方法与技巧；包含大量案例和最佳实践，系统学习和开发参考必备 内容简介 　　《Ext JS权威指南》有两大特点：第一，授人以鱼，根据Ext JS的构成体系全面系统地讲解了其开发方法与技巧，每个知识点都辅之以翔实的案例，同时包含大量最佳实践，适合系统学习和开发参考；第二，授人以渔，宏观上对Ext JS的整体架构进行了分析，微观上则通过源代码深刻揭示了Ext JS的工作机制与原理，对于想了解Ext JS工作原理和在开发中碰到疑难问题的读者尤为有帮助。 　　全书一共22章：第1章简要介绍了学习Ext JS必备的基础知识、JSON、Ext JS 4的新特性，以及其开发工具的获取、安装与配置；第2章介绍了Ext JS 4的获取、Ext JS库的配置与使用、语法、本地化，以及一个经典的入门示例；第3章详细讲解了调试的工具及技巧，这是本书的重要内容，希望所有Web开发者都能掌握；第4章全面介绍了Ext JS的基础架构；第5~9章分别讲解了Ext JS的事件及其应用、选择器与DOM操作、数据交互、模板与组件、容器、面板、布局与视图；第10章和第11章分别详细介绍了重构后的Gird和与Gird同源的树；第12~16章分别讲解了表单、窗口、按钮、菜单、工具条、图形、图表，以及其他组件和实用功能；第17~19章分别介绍了Ext.Direct、动画功能和拖放功能；第20~22章则分别讲解了扩展与插件、主题开发、MVC应用的架构。 目录 前言 第1章　Ext JS 4开发入门 1.1　学习Ext JS必需的基础知识 1.2　JSON概述 1.2.1　认识JSON 1.2.2　JSON的结构 1.2.3　JSON的例子 1.2.4　在JavaScript中使用JSON 1.2.5　在.NET中使用JSON 1.2.6　在Java中使用JSON 1.2.7　更多有关JSON的信息 1.3　Ext JS 4概述 1.4　Ext JS的开发工具的获取、安装与配置介绍 1.4.1　Ext Designer 1.4.2　在Visual Studio中实现智能提示 1.4.3　Spket 1.4.4　在Eclipse中实现智能提示 1.5　如何获得帮助 1.6　本章小结 第2章　从“Hello World”开始 2.1　获取Ext JS 4 2.2　配置使用Ext JS库 2.3　编写“Hello World”程序 2.4　关于Ext.onReady 2.5　关于Ext.BLANK_IMAGE_URL 2.6　关于字体 2.7　Ext JS 4语法 2.8　本地化 2.9　为本书示例准备一个模板 2.10　本章小结 第3章　调试工具及技巧 3.1　使用Firebug进行调试 3.2　在IE中调试 3.2.1　使用Debugbar和Companion.js调试 3.2.2　使用IEtester测试 3.2.3　在IE 8或IE 9中调试 3.3　在Chrome中调试 3.4　调试工具的总结 3.5　调试技巧 3.6　本章小结 第4章　Ext JS的基础架构 4.1　Ext JS框架的命名空间：Ext 4.1.1　概述 4.1.2　apply和applyIf方法 4.1.3　不推荐的extend方法 4.1.4　数据及其类型检测 4.1.5　其他的基础方法 4.2　为框架顺利运行提供支持 4.2.1　平台检测工具：Ext.is 4.2.2　当前运行环境检测工具：Ext.supports 4.3　Ext JS的静态方法 4.3.1　概述 4.3.2　Ext.Object中的静态方法 4.3.3　Ext.Function中的静态方法 4.3.4　Ext.Array中的静态方法 4.3.5　Ext.Error中的静态方法 4.4　深入了解类的创建及管理 4.4.1　开始创建类 4.4.2　创建类的类：Ext.Class 4.4.3　所有继承类的基类：Ext.Base 4.4.4　实现动态加载：Ext.Loader 4.4.5　管理类的类：Ext.ClassManager 4.4.6　类创建的总结 4.5　动态加载的路径设置 4.6　综合实例：页面计算器 4.7　本章小结 第5章　Ext JS的事件及其应用 5.1　概述 5.2　浏览器事件 5.2.1　绑定浏览器事件的过程：Ext.EventManager 5.2.2　封装浏览器事件：Ext.EventObject 5.2.3　移除浏览器事件 5.3　内部事件 5.3.1　内部事件对象：Ext.util.Event 5.3.2　为组件添加事件接口：Ext.util.Observable 5.3.3　为组件绑定事件 5.3.4　内部事件的触发过程 5.3.5　移除事件 5.4　特定功能的事件对象 5.4.1　延时任务：Ext.util.DelayedTask 5.4.2　一般任务：Ext.util.TaskRunner与Ext.TaskManager 5.4.3　封装好的单击事件：Ext.util.ClickRepeater 5.5　键盘事件 5.5.1　为元素绑定键盘事件：Ext.util.KeyMap 5.5.2　键盘导航：Ext.util.KeyNav 5.6　综合实例：股票数据的实时更新 5.7　本章小结 第6章　选择器与DOM操作 6.1　Ext JS的选择器：Ext.DomQuery 6.1.1　选择器的作用 6.1.2　使用Ext.query选择页面元素 6.1.3　基本选择符 6.1.4　属性选择符 6.1.5　CSS属性值选择符 6.1.6　伪类选择符 6.1.7　扩展选择器 6.1.8　Ext.DomQuery的使用方法 6.1.9　Ext JS选择器的总结 6.2　获取单一元素：Ext.dom.Element 6.2.1　从错误开始 6.2.2　使用Ext.get获取元素 6.2.3　使用Ext.fly获取元素 6.2.4　使用Ext.getDom获取元素 6.2.5　获取元素的总结 6.3　元素生成器：Ext.dom.Helper 6.3.1　概述 6.3.2　使用createHtml或markup方法生成HTML代码8 6.3.3　使用createDOM方法生成DOM对象 6.3.4　使用createTemplate方法创建模板 6.3.5　Helper对象的使用方法 6.4　元素的操作 6.5　获取元素集合：Ext.CompositeElementLite与Ext.CompositeElement 6.5.1　使用Ext.select获取元素集合 6.5.2　Ext.dom.CompositeElement与Ext.dom.CompositeElementLite的区别 6.5.3　操作元素集合 6.6　综合实例：可折叠的面板Accordion 6.7　本章小结 第7章　数据交互 7.1　数据交互基础 7.1.1　Ajax概述 7.1.2　封装Ajax：Ext.data.Connection与Ext.Ajax 7.1.3　使用Ajax 7.1.4　跨域获取数据：Ext.data.JsonP 7.1.5　为Element对象提供加载功能：Ext.ElementLoader 7.1.6　为组件提供加载功能：Ext.ComponentLoader 7.2　代理 7.2.1　代理概述 7.2.2　基本的代理：Ext.data.proxy.Proxy 7.2.3　进行批量操作：Ext.data.Batch与Ext.data.Operation 7.2.4　服务器端代理：Ext.data.proxy.Server 7.2.5　使用Ajax处理数据的代理：Ext.data.proxy.Ajax与Ext.data.proxy.Rest 7.2.6　跨域处理数据的代理：Ext.data.proxy.JsonP 7.2.7　为Ext.Direct服务的代理：Ext.data.proxy.Direct 7.2.8　客户端代理：Ext.data.proxy.Client 7.2.9　从变量中提取数据的代理：Ext.data.proxy.Memory 7.2.10　使用浏览器存储的代理：Ext.data.WebStorageProxy、Ext.data. SessionStorageProxy和Ext.data.proxy.LocalStorage 7.3　读取和格式化数据 7.3.1　概述 7.3.2　数据的转换过程：Ext.data.reader.Xml、Ext.data.reader.Json和Ext.data.reader.Array 7.3.3　Reader对象的配置项 7.3.4　格式化提交数据：Ext.data.writer.Writer、Ext.data.writer.JSON和Ext.data. writer.Xml 7.3.5　Writer对象的配置项 7.4　数据模型 7.4.1　概述 7.4.2　数据类型及排序类型：Ext.data.Types与Ext.data.SortTypes 7.4.3　数据模型的骨架——字段：Ext.data.Field 7.4.4　数据集：Ext.util.AbstractMixedCollection与Ext.util.MixedCollection 7.4.5　数据验证及错误处理：Ext.data.validations与Ext.data.Errors 7.4.6　模型的关系：Ext.data.Association、Ext.data.HasManyAssociation和Ext.data.BelongsToAssociation 7.4.7　管理数据模型：Ext.AbstractManager与Ext.ModelManager 7.4.8　定义数据模型：Ext.data.Model 7.4.9　数据模型的定义过程 7.4.10　数据模型的创建 7.4.11　数据模型的配置项、属性和方法 7.5　Store 7.5.1　概述 7.5.2　Store对象的实例化过程 7.5.3　TreeStore对象的实例化过程 7.5.4　Ext.data.Store加载数据的方法 7.5.5　Ext.data.TreeStore加载数据的方法 7.5.6　Store的配置项 7.5.7　Store的分页 7.5.8　Store的排序：Ext.util.Sorter与Ext.util.Sortable 7.5.9　Store的过滤：Ext.util.Filter 7.5.10　Store的分组：Ext.util.Grouper 7.5.11　树节点：Ext.data.NodeInterface与Ext.data.Tree 7.5.12　Store的方法 7.5.13　Store的事件 7.5.14　Store管理器：Ext.data.StoreManager 7.6　综合实例 7.6.1　远程读取JSON数据 7.6.2　读取XML数据 7.6.3　Store的数据操作 7.7　本章小结 第8章　模板与组件基础 8.1　模板 8.1.1　模板概述 8.1.2　Ext.Template的创建与编译 8.1.3　格式化输出数据：Ext.String、Ext.Number、Ext.Date和Ext.util.Format 8.1.4　超级模板：Ext.XTemplate（包括Ext.XTemplateParser和Ext.XTemplateCompiler） 8.1.5　模板的方法 8.2　组件的基础知识 8.2.1　概述 8.2.2　组件类的整体架构 8.2.3　布局类的整体架构 8.2.4　组件的创建流程 8.2.5　常用的组件配置项、属性、方法和事件 8.3　为组件添加功能 8.3.1　为元素添加阴影：Ext.Shadow与Ext.ShadowPool 8.3.2　为组件提供阴影和shim功能：Ext.Layer 8.3.3　让组件实现浮动功能：Ext.util.Floating 8.3.4　记录组件状态：Ext.state.Stateful 8.3.5　实现调整大小功能：Ext.resizer.Resizer与Ext.resizer.ResizeTracker 8.3.6　为组件提供拖动功能：Ext.util.ComponentDragger 8.3.7　为组件实现动画功能：Ext.util.Animate 8.3.8　其他的组件辅助功能类 8.4　组件的管理 8.4.1　组件管理及查询：Ext.ComponentManager与Ext.ComponentQuery 8.4.2　焦点管理：Ext.FocusManager 8.4.3　z-order管理：Ext.ZindexManager与Ext.WindowManager 8.4.4　状态管理：Ext.state.Manager、Ext.state.Provider、Ext.state.Local-StorageProvider和Ext.state.CookieProvider 8.5　综合实例 8.5.1　使用子模板 8.5.2　递归调用模板 8.6　本章小结 第9章　容器、面板、布局和视图 9.1　容器与布局的关系 9.2　容器 9.2.1　容器的创建过程：Ext.container.AbstractContainer与Ext.container.Container 9.2.2　 Ext.container.AbstractContainer和Ext.container.Container的配置项、属性、方法和事件 9.2.3　将body元素作为容器：Ext.container.Viewport 9.3　面板 9.3.1　面板的结构 9.3.2　构件的放置：dockedItems 9.3.3　面板标题栏构件：Ext.panel.Header与Ext.panel.Tool 9.3.4　记录和恢复面板属性：Ext.util.Memento 9.3.5　面板常用的配置项、方法和事件 9.4　布局 9.4.1　布局概述 9.4.2　布局的运行流程：Ext.layout.Layout 9.4.3　容器类布局基类：Ext.layout.container.Container 9.4.4　盒子布局、垂直布局与水平布局：Ext.layout.container.Box、Ext.layout.container.VBox与Ext.layout.container.HBox 9.4.5　为盒子模型提供调整大小的功能：Ext.resizer.Splitter 9.4.6　手风琴布局：Ext.layout.container.Accordion 9.4.7　锚固布局：Ext.layout.container.Anchor 9.4.8　绝对定位布局：Ext.layout.container.Absolute 9.4.9　边框布局：Ext.layout.container.Border 9.4.10　自动布局：Ext.layout.container.Auto 9.4.11　表格布局：Ext.layout.container.Table 9.4.12　列布局：Ext.layout.container.Column 9.4.13　自适应布局：Ext.layout.container.AbstractFit与Ext.layout.container.Fit 9.4.14　卡片布局：Ext.layout.container.AbstractCard与Ext.layout.container.Card 9.5　标签面板 9.5.1　标签面板的构成及其运行流程：Ext.tab.Panel、Ext.tab.Bar与Ext.tab.Tab 9.5.2　标签面板的配置项、属性、方法和事件 9.5.3　使用标签页 9.5.4　可重用的标签页 9.6　视图与选择模型 9.6.1　视图与选择模型概述 9.6.2　视图的运行流程：Ext.view.AbstractView与Ext.view.View 9.6.3　选择模型的工作流程 9.6.4　选择模型的配置项、属性、方法和事件 9.6.5　视图的配置项、属性、方法和事件 9.6.6　使用视图 9.7　页面布局设计 9.8　综合实例 9.8.1　布局设计实例：仿Eclipse界面 9.8.2　在单页面应用中使用卡片布局实现“页面”切换 9.9　本章小结 …… 第22章　MVC应用架构 22.1　MVC应用架构的构成及工作流程 22.1.1　构成 22.1.2　控制器的工作流程：Ext.app.Controller 22.1.3　Application对象的工作流程 22.2　一步一步实现MVC框架 22.2.1　概述 22.2.2　创建目录 22.2.3　创建首页 22.2.4　创建启动脚本：app.js 22.2.5　定义登录对话框 22.2.6　创建应用脚本：Application.js 22.2.7　创建Viewport视图 22.2.8　菜单视图及控制器 22.2.9　实现订单管理 22.2.10　实现产品管理 22.2.11　示例效果 22.3　本章小结 附录　简写类名与Ext JS类名对照表

Extjs4 MVC小实例根据The MVC Application Architecture做的