extjs
目录
编辑本段
ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
功能丰富，无人能出其右。
无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。
自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。
再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。
呵呵~不过ext也不是万能的，ext没有默认的统计功能，也不支持excel，pdf等导出数据。
编辑本段
Ext发展史
1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展，但后来一度风头盖过其父辈YUI，足以说明大家对它的热情，很多人把它投入项目人并不十分了解它。分析人士打
了一比喻：就好比尚未谋面，并不了解一个人的家庭、教育、品行等背景，只因为他有一副精致漂亮的外观，就对其陷入了疯狂的倾慕之中。因此分析人士建议，在投入项目前，要认真仔细地了解EXT的内在原理和与其他Ajax库不同地方。
2、在2006年初，Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以“yul-ext"的名义下发布。
3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码，根据这名字（下开放源代码DSB许可）。在年底之前，这个库已大受欢迎, 名字被简化为Ext，反映了它作为一个框架的成熟和独立。
该公司成立于2007年初，Ext现在为双执照，使用LGPL和一个商业执照。
4、在2007年4月1日，发布1.0正式版。
5、官方在2009年4月14-16日的首次Ext Conference中发布了Ext 的3.0 RC版本。
6、2009年5月4日，Ext的3.0 版本发布。
7、2010年1月8日，ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户，现在的版本为Ext-3.2.0
8、2010年6月15日，当开发者访问著名的JavaScript库ExtJS网站，会发现自己被重导向到另一个不熟悉的网址和界面sencha。原来，，ExtJS 项目已经与触摸屏代码库项目jQTouch和SVG处理库Raphael合并，后两个项目的创始人David Kaneda和Dmitry Baranovskiy也将加入ExtJS。此举是ExtJS为了应对HTML5等新趋势，加强丰富图形和触摸屏功能的重要举措。
编辑本段
什么是EXT
1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。
编辑本段
ExtJs UI Engine简介
ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！
ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的厂家包括IBM、Adobe、Cisco 和更多。ExtJs官方网站https://www.doczj.com/doc/dc11924689.html,
编辑本段
Ajax主流框架与ExtJS
JQuery、 Prototype和YUI都属于非常核心的JS库。虽然YUI，还有最近的JQuery，都给自己构建了一系列的UI器件（Widget），不过却没有一个真正的整合好的和完整的程序开发平台。哪怕是这些低层的核心库已经非常不错了，但当投入到真正的开发环境中，依然需要开发者做大量的工作去完善很多缺失之处。而Ext就是要填补这些缺口。主流开源框架中只有Dojo像Ext一样，尝试着提供整合的开发平台。相比Dojo这个出色的工具包，我们认为 Ext能提供一个粘合度更高的应用程序框架。Ext的各个组件在设计之时就要求和其它Ext组件组合一起工作是无缝合作的。这种流畅的互通性，离不开一个紧密合作的团队，还必须时刻强调设计和开发这两方面目标上的统一，而这点是很多开源项目未能做到的。从构建每一个组件开始，我们始终都强调组件的外观、性能、互通性和可扩展性，而我们认为组件已经达到了这几点的要求。
Ext绝对可以单独使用。实际上，除了有特定的要求，推荐单独使用Ext，这样的话文件占位更小，支持和整合也更紧密。我们也支持与jQuery、YUI或Prototype整合使用，作为低层库的角色出现，以提供处理各种核心的服务，如DOM和事件处理，Ajax连接和动画特效。使用整合方式的一个原因是它们已具备了一些特定的器件而Ext并没有原生支持——像YUI的History控件便是一个典型的例子。这时，Ext需要依赖YUI这个库的底层
来实现History控件，这样一来的话也可免去Ext自身底层库，从而减少了整个程序的内存占用。另一个使用整合方式的原因是，对于许多已在使用其他底层库的程序，你可能希望逐步加入Ext。总之，如果已经有了其他库，Ext可已利用它们。我们的宗旨是为用户提供各种可能性和性能上的优化。而事实是，只要实现了相对应的底层库接口，为任意一个框架添加上适配器是没有问题的——人们可以轻松地将Dojo、Moo、https://www.doczj.com/doc/dc11924689.html,，或其它JS库转变为 Ext的底层。
Ext从2.x开始收费，这给他的应用前景带来一些问题。不过对国内开发人员的影响不大，毕竟是客户付款。
编辑本段
Ext学习及应用经验小结
一、理解Html DOM、Ext Element及Component
要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。
Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建设的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。
无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。
仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。
对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。
在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自
定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。
在Ext中，组件渲染以后可以通过访问组件的el属性来得到组件对应的Element，通过访问Element的dom属性可以得到其下面的DOM对象。另外，我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如：
var view=new Ext.Viewport();//创建了一个组件Component
view.el.setOpacity(.5);//调用Element的setOpacity方法
view.el.dom.innerHTML="Hello Ext";//通过Element的dom属性操作DOM对象
再看下面的代码：
var win=new Ext.Window({id:"win1",title:"我的窗口
",width:200,height:200});
win.show();
var c=Ext.getCmp("win1");//得到组件win
var e=Ext.get("win1");//根据id得到组件win相应的Element
var dom=Ext.getDom("win1");//得到id为win1的DOM节点
二、熟悉ext组件体系
Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component 类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。
在《ExtJS实用开发指南》中，有如下面一幅组件图：
通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性。
三、掌握核心控件
控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window 等都属于Ext控件。在使用Ext的时候，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，他们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成：一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。只要掌握了Panel的应用，那么学习TreePanel、Window等就会变得简单得多。
同样的道理，对于Ext的表单字段来说，不管是ComboBox，NumberField、还是DateField，他们其它都是 Ext.form.Field类的子类，在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时，一定要重点研究Field这个类，掌握他的主要方法、事件等，就能有助于更好的学习使用其它的字段。
四、学习及研究示例
由于javascript语言非常灵活，不像静态强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同的人就有不同的编程风格。在实际应用开发中，只有见多识广，才能在自己的在脑中建立一个开发库。
学习别人的示例对于我们开发帮助会非常大，示例包括基本组件的应用、综合应用等多个方面。在此，简单推荐几个。
１、Ext官方示例，在ext项目下载包的examples目录中，包括各个控件的基本应用演示，同时还有一些比较复杂的组合示例，有简有繁，非常适合初学者认真研究。
２、Vifir推出的示例，Vifir推出的一些示例主要包括两类，一种是开源的示例应用，另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统，这个一个集合了前后台技术的ext综合示例，而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。
３、其它示例，在ext社区中还有很多比较优秀的ext应用示例，有些只是一个应用演示，虽然没有提供源码下载，但我们可以直接下载引用的js文件来得到这些示例的ext应用代码，同样能取起到非常好的学习效果。
五、多运用
Ext看起来是非常简单的东西，稍有点编程知识的人，按照《ExtJS实用开发指南》中的入门指南，半小时就能学会使用Ext。然而，当准备使用Ext开发一个项目时，却不知道从何处入手，或者是在使用Ext的时候，出了一点小问题自己不知道该如何解决。编程是一门实践性的科学，仅仅靠看书、看别人写的代码是远远不够的，因此，必须多做实践才行，只有通过不断的练习，大量的使用，才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握，只有多做运用，深入了解ext
的组件的工作原理及机制，才能编写出高级的Ext的应用。
六、熟读Ext项目的源代码
如果要想深入应用Ext，那么阅读Ext项目的源代码这是必不可少的环节，Ext的代码质量非常高，通过阅读他的代码我们可以更加深刻的了解javascript面向对象编程，Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中，我们经常根据项目的需要对Ext组件进行扩展，设计自己的组件或控件，而如何实现一个自定义的Ext组件，我们可以从Ext的各个组件源代码中找到答案。
Ext的源代码在Ext项目的source目录。读Ext源码，并不一定非要从某一个地方开始，而组件核心代码Component.js、容器组件代码Container.js、面板Panel.js等这些是必看的； core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候，最好能简单看一看这个控件的源代码。
七、理解，熟悉，掌握Json
在项目中，Ext本身的华丽外表就很吸引眼球了，但这仅仅是其外在的美，还有最核心的内在美，即：Json。Json(JavaScript Object Notation) 是一种数据交互格式，一个不能实现数据交互功能的项目是没有任何意义的，大多的Ajax框架的数据交互都基于Json，如：jQuery、ExtJs等。因此理解Json掌握Json并熟练运用是很重要的。以目前主流的开发语言为例，.NET已经把Json封装到类中，无需配置，直接与数据库交互，轻松的封装直接使用；Java就麻烦些，必须去下一个Json包，然后再做一些配置，才可以使用；PHP和Java差不多，也必须下载一个Json插件（和类相似），但是不用配置，直接封装使用。在实际的项目中，各自的取舍配置，都基于项目和需求，并不是每个项目（针对WEB）都一定要用到。但是，如果想在项目中用到此类的Ajax框架，Json的掌握又是必须的。
扩展阅读：
?1
?2
https://www.doczj.com/doc/dc11924689.html,开源人网站，编写了国内首本EXTJS开放方面的教程《EXTJS实用开发指南》，提供了专业的EXTJS技术培训和咨询服务
?3
?4
?5
?6
?7
?8
?9
?10
?11
下载：ExtJS 4.1.1 在Eclipse中安装spket插件 下载：spket-1.6.23.zip 最低要求：你需要java 1.5或更高版本运行安装程序，可独立使用 步骤： 1.作为eclipse的插件使用，按Plugin进入下载页面把他下载下来。 2.下载完成解压文件得到一个eclipse文件夹，将文件夹下的plugins和features两个文件夹拷贝到使用的Eclipse安装包下覆盖原有同名文件夹， 3.启动Eclipse，在工具栏window中打开preferences，弹出对话框左边会看到Spket， 4.打开Spket下的JavaScript Profile，点击New，添加Ext（名称可自定义） 5.点击Ext，选择右边的Add Library，选择ExtJS 6.选中ExtJS,选择右边的Add File，选中已下载的并解压的ExtJS包的根目录下的build 下的sdk.jsb3 7.这时会出现很多的选择框，我是全选了，点击ok就安装好了， 8.选中Ext，点击右面的Default，ok，然后重启eclipse,如果还不行，选中建立的js文件右击，有Open With，选择Spket JavaScript Editor，这样就应该可以了 让spket作为javascript的默认编辑器 步骤： Eclipse工具栏window --> preferences --> Editors --> File Associations --> 右面的File types选中*.js --> 下面的Associated editors选中Spket javascript Editor --> 按右面的按钮Default --> OK退出 建立js文件，的图标变成js文件对应的图片就成功了。 Hello word 项目建立 1.eclipse中新建Dynamic Web Project项目，命名为ExtjsTest 2.为避免eclipse的校验可进行如下操作 i 选中工程右键 --> Properties --> Resource --> Text file encoding -->
Extjs4.0.7 desktop初级搭建 涉及内容：1.classes.js的拆分 2.App.js和Settings.js里代码的含义 3.桌面图标的换行 4.一些小小的修改 首先上官网上下载最新版本的Extjs，本次讲解以4.0.7版本为例，下载地址https://www.doczj.com/doc/dc11924689.html,/products/extjs/download/ext-js-4.0.7/1234 然后打开myeclipse新建一个web project工程，这个工程的结构如下 其中core文件夹用于存放desktop的核心代码 css文件夹用于存放样式表 ext文件夹用于存放ext-all.js等
images文件夹用于存放desktop实例中images modules文件夹用于存放桌面上显示的模块 resources文件夹用于存放desktop实例自带的壁纸文件夹wallpapers 和Extjs中resources下的themes文件夹 接下来把App.js,Settings.js和index.jsp(即desktop.html)放在webroot 目录下面 一．classes.js的拆分：首先来看一下index.jsp中的代码
Extjs4开发笔记（一）——准备工作 2011-06-28 来源：mhzg 作者：mhzg (共2 条评论) 使用extjs4 mvc+asp来实现员工管理系统，系统会使用大量的extjs4组件及插件，期待着这个系统完成。 本文内容已经重新更新，旧版请查看 https://www.doczj.com/doc/dc11924689.html,/a/20116/20116281100279-old.html。 重写原因：由于开始准备的时候，就是按照传统开发去做的，写了一部分之后，有网友和同事提出：“为什么不用MVC模式”呢？这样的问题让我对目前传统开发的心发生了一些细微变法，对啊，为什么不用MVC模式呢？我征求了一下同事及热心网友的意见，都同意使用MVC模式开发。从而，我删掉了原来所有目录，重新按照MVC模式去组织目录结构，很快的，目录结构准备好了。 那。。我们重新来过，使用EXTJS4.0的MVC模式，开发这套员工管理系统。给个简称吧。SMS（你懂得。呵呵！）。 一、建立环境： Data：数据库文件夹，里面放着管理系统用的数据库文件。数据库目前只有三张表。分别是： Menu：菜单项 user：员工注册信息 userinfo：员工个人资料信息 Images：图片目录，一些自定义的图片文件 Include：服务端文件目录，里面包含ASP所用到的Conn.asp、Function.asp等文件App：整个SMS所用到的自定义JS文件，里面有一个controller文件夹，一个view 文件夹。controller文件夹放置主代码，view文件夹放置各组件。这几个文件夹中的内容会在第二章进行介绍。 Extjs4：此目录放置Extjs4的库文件。
组件 每个ExtJS应用程序都是由一或多个称为组件(components)的部件(widgets)组成的.所有的组件都是https://www.doczj.com/doc/dc11924689.html,ponent的子类,https://www.doczj.com/doc/dc11924689.html,ponent包含自动化生命周期管理的功能,如创建、渲染、尺寸控制、定位和销毁等，因此所有组件都自动拥有这些功能。ExtJS提供了非常多可直接使用的组件，并且从这些组件继承并扩展自己的自定义组件也是很容易的一件事情。 组件层次结构 容器(Container)是一种可以包含其他组件的特殊组件。一个典型的应用程序是由许多按树状机构嵌套在一起的组件组成的，称之为组件层次结构。容器负责管理子组件的生命周期，包括子组件的创建、渲染、尺寸控制、定位和销毁。一个典型的应用程序组件层次结构一般使用Viewport作为顶级容器，它的子元素可以包含其他嵌套的容器或者非容器组件：
容器的items属性配置用来添加子组件。以下这个例子使用Ext.create创建了两个Panel,然后将这两个Panel作为子组件添加到一个Viewport中: 容器使用布局管理器(LayoutManagers)来管理容器中子组件的尺寸和定位。
XType（组件类型）和延迟实例化 每个组件都有一个用来表示类型的名字，称为xtype。例如，组件Ext.panel.Panel的xtype为'panel'。上面那个例子展示了如何添加已经创建好的组件到容器中。如果在容器的子元素（items）配置中，为子元素指定xtype，子元素不会马上实例化，而是由容器决定子元素何时该实例化。例如：一个使用到TabPanel（选项卡）的应用程序，选项卡的每一tab页只有在用户单击的时候才会去渲染。 下面的示例代码中每个tab页都会监听各自的渲染完成（rendered，在渲染结束后触发）事件，在渲染后弹出提示。运行这个示例马上会弹出一个提示，那是因为运行后默认tab页被渲染并立即呈现在容器中了。第二tab页的提示不会弹出，只有你单击了第二页，它才会实例化并呈现。这说明了tab页会按需进行实例化和渲染。
Extjs4 API文档阅读(一)——类系统(Class System) 2011-07-02 来源：互联网作者：佚名(共0 条评论) ExtJS4使用新的类机制进行了大量的重构。为了支撑新的架构,ext4几乎重写了每一个类,因此最好先好好的理解一下新的架构,再开始编码。 ExtJS4使用新的类机制进行了大量的重构。为了支撑新的架构,ext4几乎重写了每一个类,因此最好先好好的理解一下新的架构,再开始编码。 本文适合想在extjs4中扩展现有类或者创建新类的开发者。其实，不管是想扩展还是使用，都建议您仔细阅读一下（如果E文好的，建议您还是阅读英文原文。链接地址是：https://www.doczj.com/doc/dc11924689.html,/ext-js/4-0/#/guide/class_system）。文章共分4个部分，建议每一部分都仔细研究下，对之后的开发工作，会有意想不到的好处。 第一部分：概述。说明了强大的类机制的必要性 第二部分：编码规范。讨论类、方法、属性、变量和文件命名 第三部分：DIY。详细的编码示例 第四部分：错误处理和调试。提供一些有用的调试和异常处理技巧 一、概述 ExtJS4拥有超过300个的类.迄今为止,我们的社区拥有超过20万来自世界各地,使用不同后台语言的开发者.要在这种规模的框架上提供具有以下特点的架构,需要面临巨大的挑战： 1、简单易学。 2，快速开发、调试简单、部署容易。 3，良好的结构、可扩展性和可维护性。 二、编码和规范 *在所有类、命名空间（namespace）和文件名中使用一致的命名约定,有助于保持代码的良好结构和可读性。 1) Classes 类名只能包含字母和数字。允许包含数字，但是大部分情况下不建议使用，除非这些数字是专业术语的一部分。不要使用下划线，连字符等非数字字母符号。例如： https://www.doczj.com/doc/dc11924689.html,eful_util.Debug_Toolbar is discouraged 2.MyCompany.util.Base64 is acceptable 3. 类名应该包含在使用点号分隔的命名空间中。至少，要有一个顶级命名空间。例如： 1.MyCompany.data.CoolProxyMyCompany.Application
Hibernate+Spring+Struts2+ExtJS开发CRUD功能 https://www.doczj.com/doc/dc11924689.html,/myloon/archive/2007/11/08/1873652.aspx 入门： 各种开源框架环境及下载： Hibernate：3.x https://www.doczj.com/doc/dc11924689.html,/需要hibernate core 和annotations 包。 Spring：2.x https://www.doczj.com/doc/dc11924689.html,/ Struts2：2.x https://www.doczj.com/doc/dc11924689.html,/2.x/ ExtJS：2.X https://www.doczj.com/doc/dc11924689.html,/ JSON：JSON可以到https://www.doczj.com/doc/dc11924689.html,/查看详细内容，这里使用json-lib https://www.doczj.com/doc/dc11924689.html,/ 本所需要的包： 2、配置： （1）首先是配置web.xml，配置方法可以在下面的配置文件代码注释中查看，这里主要是Struts2的配置：
和Spring的配置：
ExtJS之Ext.Ajax.request用法详解 Java代码 1Ext.Ajax.request({ 2 url:'findbyid.action', 3 params:{ 4 id:cell.getId() 5 }, 6 success: function(resp,opts) { 7 var respText = Ext.util.JSON.decode(resp.responseText); 8 name=https://www.doczj.com/doc/dc11924689.html,; 9 oid=respText.id; 10 findbyid(graph,cell,oid,name); 11 //Ext.Msg.alert('错误', https://www.doczj.com/doc/dc11924689.html,+"====="+respText.id); 12 }, 13 failure: function(resp,opts) { 14 var respText = Ext.util.JSON.decode(resp.responseText); 15 Ext.Msg.alert('错误', respText.error); 16 } 17 18 }); 在Ext开发过程中，基本上时刻需要用到异步请求，那么这个请求到 底是怎么执行的呢，我们接下来来探讨下 首先：Ext.Ajax类继承了Ext.data.Connection，为Ajax的请求提供了 最大灵活性的操作方式 再简单请求基础上我们加上一个使用的 说明的是这种请求通常都是放在触发某个事件的处理方法中的 url:就是我们要请求的路径 params:里面的参数用逗号隔开，就是我们要发出请求带的参数
系统可作为OA、网站、电子政务、ERP、CRM、APP后台等基于B/S架构的应用软件系统的快速开发框架。 一、特色 1、采用Spring MVC的静态加载缓存功能，在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存，极大提高ExtJS的加载速度。 2、三种皮肤主题：经典、灰色和海王星，支持多浏览器和多分辨率。 3、分别封装了模型层、控制层、业务逻辑层和数据持久层的通用操作模块，层次分明，大大减少代码冗余，二次开发效率高。 4、系统是公司多个项目的基础框架，稳定性好，支持大并发。 二、主要功能 1、采用ExtJS 5.1无限制版本，放心用于网站开发。 2、ExtJS富文本编辑器增加修改信息。 3、ExtJS的HtmlEditor的图片文件上传插件。 4、Grid列表和表单，包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5、导入导出Excel数据，支持xlsx和xls文件。 6、资源管理（菜单管理）。
7、用户管理和部门管理。 8、权限管理。不仅可管理各个功能模块的权限，也可以管理功能模块里的页面按钮权限。 9、报表统计。也可以嵌入其他报表工具插件。 10、采用开源的互动地图Javascript库Leaflet，处理自定义在线地图。Panel里包含2个组件，在2个组件间传递参数显示数据。 所有源码都公开，包含MySQL、Oracle和SQL Server的SQL文件，QQ：1298588579（请先加QQ咨询技术细节） 源码点此获取 三、开发工具和采用技术 1、开发工具：Eclipse、MyEclipse和其他IDE。 2、采用Spring 3中最新最稳定的Spring MVC 3.2.8版本。 3、采用Hibernate 4.1.7。Spring MVC 3.2.8支持的最高Hibernate版本是4.1.7，更高的Hibernate版本和Spring MVC 3.2.8组合会遇到兼容问题。 4、Hibernate集成二级缓存框架Ehcache。 5、数据库是MySQL、Oracle和SQL Server，Hibernate的Dialect可使程序移植到其他数据库。 6、采用开源的互动地图Javascript库Leaflet，处理自定义在线地图。 7、采用Google Guava Collections，性能高于Apache Collections。 8、全局处理GET和POST中文编码。 四、代码结构 部分代码作用： 1、BaseParameter、ExtJSBaseController、BaseService、BaseDao：分别封装了模型层、控制层、业务逻辑层和数据持久层的通用操作模块。 2、ListView、PageView和QueryResult：作为ExtJS的后台分页模块。 3、SystemInitListener：加载以XML格式的数据字典，放进内存供调用。 4、LoginFilter：处理登录各种情况，将session为null的操作重定向到登录页面。 5、CustomDateEditor：处理日期参数并注册到控制器里，否则Spring MVC的参数处理将出错。 6、ExceptionCode、ServiceException：处理异常信息。 7、CacheFactory：处理Ehcache二级缓存。 8、还有其他很多工具类等等。
JAVA/JSP/C++: C++程序设计原理与实践(中文高清电子书) https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-645.aspx Visual.C++开发实战宝典(源码+视频) https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-767.aspx Visual C++从初学到精通(源码+视频+PPT) https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-766.aspx 你必须知道的495个C语言问题(高清pdf电子书) https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-731.aspx FreeMarker应用指导(中文PDF电子书) https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-708.aspx Java范例开发大全(视频教程+实例源码) https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-687.aspx JAVA核心基础视频教程展示 https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-625.aspx JAVA从入门到精通.山寨QQ项目 https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-321.aspx 中国人民银行企业培训视频教程(JAVA方向) https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-499.aspx 7K月薪面试题之交通灯管理系统 https://www.doczj.com/doc/dc11924689.html,/bbs/showtopic-382.aspx
ExtJs IDE安装图解（Myeclipse） 最近要编写js文件，需要安装ExtJs IDE，根据个人的总结，贴出来做个参考，希望对大家有所帮助。安装是在Myeclipse中。安装前先下载ext-2.3.0 首先，在window—show view—other下打开show view对话框，上面的文本框输入soft,下面会自动显示software and workspace center,点击ok. 进入myeclipse配置中心，选择software标签下，在输入框输入spket,下面会自动列出spket相关的组件， 如果没有，从输入框左边的add site中，下载，网址为https://www.doczj.com/doc/dc11924689.html,/update/
选择前两项，Spket IDE和Spket Text Editor,分别右键单击Add to Profile... 添加完之后会在该页面的右下角显示添加的选项，由于本人已经安装，所以暂时用Xerces for Spket IDE 代替，此处应该是Spket IDE和Spket Text Editor这两项，下面显示apply 2 changes,单击下面的apply 2 changes按钮，会自动安装和更新
安装完后，重新启动myeclipse后，在window--preferences下会看到spket,如图：
选择spket 下的java script profiles,新建一个profiles名，可以自定义，强烈推荐用ExtJS 然后增加库文件ExtJS，此处选择即可
在下载的ext-2.3.0的source文件夹下，选择ext.jsb文件，添加进去
话不多说，进入正题，至于有的人想了解ext的优势神马的，自己百度去吧！ 一、exit的配置。（注意：本文讲解的是Ext js4.2.1，不同版本部署的js包名有微小差别） 因为只是简单学习，方便新手入门，咱们只引入3个基本包。 ext-all.css ext-all.js Ext.Base.js 怎么引入？ 二、示例。 1.helloworld，呵呵，学习程序嘛，咱们都是从helloworld开始的! 效果：
2.创建一个面板 Ext.onReady(function(){ //创建一个面板 var myPanel = new Ext.Panel({ renderTo:Ext.getBody(), title:'哈哈哈', width:300, height:300, html:'test面板' }); });
效果： 3.创建一个tabpanel var panel = new Ext.TabPanel({ renderTo:Ext.getBody(), width:300, height:200, activeTab:0, items:[new Ext.Panel({ title:"面板1", height:30, html:'面板1内容！' }),new Ext.Panel({ title:"面板2", height:30,
SSM+ExtJS MVC框架搭建实例 2013
目录 1 重要声明 (2) 2 项目搭建 (2) 2.1 项目jar包简介 (2) 2.2 项目新建 (5) 2.3 管理项目目录 (9) 2.4 配置使用mybatis (10) 2.5 配置使用spring (13) 2.6 测试用例的编写 (15) 2.7 新建和启动server (21) 2.8 ExtJS之MVC (25) 2.8.1 前端开发之页面访问 (25) 2.8.2 前端开发之struts配置 (27) 2.8.3 前端开发之web.xml配置 (28) 2.8.4 前端开发之前端概貌 (30) 2.8.5前端开发之view层 (34) 2.8.6前端开发之model层和store层 (36) 2.8.6前端开发之controller层 (37) 3 结尾的话 (40)
SSM+ExtJS MVC框架搭建实例 1 重要声明 在开始搭建我们的web项目之前，需要进行以下声明： 1）这份实例帮助文档主要针对一些初入职场或者是初识java和ExtJS的程序员，希望能一定程度上给予一些建议和引导，避免走一些不必要的弯路。对于职场元老级人物可以直接略过，不作理会，以免贻笑大方。 2）这次实例演示我们所采用的IDE是eclipse，因此如果当你使用myeclipse或者是其他IDE来进行实践时，有些场景不完全相同，但基本相似； 3）本次实例后端采用spring+struts+mybatis框架，前端采用ExtJS，前后端均采用MVC的开发模式来进行开发。 4）本文档的作者是一个程序菜鸟，因此本文档中难免存在诸多错误和问题，请多多包涵。如果可以的话，请及时与我沟通交流，以期共同进 步。 2 项目搭建 2.1 项目jar包简介 在正式开始我们的项目搭建之前，让我们来看一下 在我们即将开始的项目中，主要会使用到哪些jar包，具 体如右图所示：
入门 环境要求 浏览器 ExtJs支持所有主要的网络浏览器，从IE6到最新版本的谷歌浏览器，在开发调试工程中，我们推荐您使用： 这篇教程假设你使用的是最新版本的谷歌浏览器。如果你没有，花一点时间来安装它,并自己熟悉其开发工具。 服务器 尽管不是必须，我们建议你使用本地网络服务器。由于XHR 在本地文件时大多数浏览器有协议限制。我们建议安装： Apache安装启动后，通过浏览器访问localhost，你应该看到一个Apache启动成功网页。 Ext JS 4 SDK 下载SDK解压到服务器WEB目录的新建文件夹“ExtJS”下，不清楚服务器的WEB目录请参考服务器的手册。这个路径和操作系统有关。一般来说Apache的WEB目录为：
浏览http://localhost/extjs/index.html看到Ext的欢迎页面就算安装成功了。 应用构架 基本结构 尽管不是强制的,下面列出的所有建议应看作是你的指导方针保证您应用是有效组织、可扩展和可维护的。以下是建议的Ext目录结构为:
不要着急立即完成所有这些目录，现在让我们专注开发Ext 应用必要的最少代码。我们将创造一个基本的"Hello Word"应用：称为“Hello Ext”。在您的网页根目录创造下列目录和文件。 将包含Extjs SDK的Extjs文件夹放到helloext目录下。 典型的Ext应用包含单一的Html文档--index.html文件：
下面是应用程序逻辑：---app.js 打开浏览器浏览http://localhost/helloext/index.html。将看到一个面板标题为"Hello Ext"，内容为"welcome"。 动态加载 ExtJS4支持延迟-动态加载。例如Ext.create创建了一个Ext.container.Viewport实例。在Ext.create被调用时，加载器首先减产Ext.container.Viewport是否定义。没有定义则
一、EXT5 ext5的主题是用SASS（点击进入）和Compass（点击进入）编写的。 在ext5中，仅仅通过更改SASS的变量值，就可以将几乎所有的组件样式定制了，包括颜色，字体，边框，背景。 本文介绍了如何创建一个在多应用中可分享的定制化主题。 1.环境要求 Sencha Cmd 5 这是一个命令行工具，用于部署Ext JS应用，创建一个Ext JS 5主题，你必须拥有Sencha Cmd 5 或更高版本 注意：Sencha Cmd 5 已经预安装了SASS和Compass，如果你的电脑已经安装了，请卸载掉自己的。 Ruby 安装ruby环境（点击进入）用1.9.3版本 Ext JS 如果你本地有Ext JS SDK，解压后在本地路径下执行Cmd命令就行。 不过我们已经不用下载Ext JS 了，你可以用“-ext”命令来自动下载最新版的Ext JS 5！我们这次就用这个命令来做。 2.创建自定义主题 如上所述你需要安装ruby，cmd工具，就可以开始制作主题了 创建一个工作空间 第一步是用Sencha Cmd创建一个你自己的工作空间 [ruby]view plaincopyprint? 1.cd /d E:\ext 2.sencha generate workspace-ext my-workspace 如果你想使用一个下载好的SDK或本地的一个SDK副本，在命令前面加上你解压的Ext JS SDK的路径就可以了 [ruby]view plaincopyprint? 1.sencha -sdk~/sencha-5.0.0 generate workspace my-workspace 1. sencha -sdk C:\Users\zj\Desktop\ext-5.1.0-gpl\ext-5.1.0 generate workspace D: \EXT\Sencha\Cmd5\Sencha\Cmd\work\ZJ 生成的工作空间将利用脚手架生成一个Sencha目录，让我们进去看看 [ruby]view plaincopyprint? 1.cd my-workspace 如图： “ext” --- 包含了Ext JS SDK “packages” --- EXT JS语言环境和主题包 生成一个App来测试主题
SpringMVC+Mybatis+extjs4项目配置 1)软件准备： 1.Jdk6：这个需要统一一下，如果用高于jdk6得版本开发，到发布到tomcat服务器后可 能运行不正常，在ide上的高版本到低版本的话，也可能出现编译错误的问题，这个要跟生产环境统一起来； 2.Tomcat6（7）：这个好像关系不太大，主要看生产环境，但如果页面使用了el表达式的 话，则需要用高一点的tomcat服务器，低版本的tomcat对el表达式不支持； 3.springsource-tool-suite：开发的ide,推荐使用zip安装包，版本2.9的吧，现在的3.1不 是很稳定，占用内存很高，经常不响应 2)springMVC相关库(jar)配置 1.jar的引用主要配置在maven的pom.xml文件了，整个项目都是用pom.xml文件来组织 的，如下图： 实际项目的结果如：
有点不同，所有的代码是放在src文件夹里的，main/webapp文件夹则对应于发布到tomcat 应用的文件夹，所有如果要提交svn,则只需要提交src里的代码，如果改动了非*.java代码，也只要更新webapp目录里改动文件至tomcat相应目录就行了； 2.配置pom.xml可能用到的jar包： 1)Mybatis:数据库持续层；
ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 在学习了本教程后，可以下载https://www.doczj.com/doc/dc11924689.html,这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。 ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用，下面是一些使用ExtJS 开发的应用程序截图：ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。 Ext2.0对框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件，Ext组件是由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。 基本组件有： xtype Class ------------- ------------------ box Ext.BoxComponent 具有边框属性的组件 button Ext.Button按钮 colorpalette Ext.ColorPalette 调色板 component https://www.doczj.com/doc/dc11924689.html,ponent组件 container Ext.Container容器 cycle Ext.CycleButton一个SplitButton的实用子类,用于在多个item之间切换状态 dataview Ext.DataView 数据显示视图 datepicker Ext.DatePicker 日期选择面板 editor Ext.Editor编辑器 editorgrid Ext.grid.EditorGridPanel 可编辑的表格 grid Ext.grid.GridPanel 表格 paging Ext.PagingToolbar 工具栏中的间隔 panel Ext.Panel面板 progress Ext.ProgressBar 进度条 splitbutton Ext.SplitButton 可分裂的按钮 tabpanel Ext.TabPanel选项面板 treepanel Ext.tree.TreePanel 树 viewport Ext.ViewPort 视图 window Ext.Window窗口 工具栏组件有 ---------------------------------------
extjs 目录 编辑本段 ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。 自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。 再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。 呵呵~不过ext也不是万能的，ext没有默认的统计功能，也不支持excel，pdf等导出数据。 编辑本段 Ext发展史 1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展，但后来一度风头盖过其父辈YUI，足以说明大家对它的热情，很多人把它投入项目人并不十分了解它。分析人士打
了一比喻：就好比尚未谋面，并不了解一个人的家庭、教育、品行等背景，只因为他有一副精致漂亮的外观，就对其陷入了疯狂的倾慕之中。因此分析人士建议，在投入项目前，要认真仔细地了解EXT的内在原理和与其他Ajax库不同地方。 2、在2006年初，Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以“yul-ext"的名义下发布。 3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码，根据这名字（下开放源代码DSB许可）。在年底之前，这个库已大受欢迎, 名字被简化为Ext，反映了它作为一个框架的成熟和独立。 该公司成立于2007年初，Ext现在为双执照，使用LGPL和一个商业执照。 4、在2007年4月1日，发布1.0正式版。 5、官方在2009年4月14-16日的首次Ext Conference中发布了Ext 的3.0 RC版本。 6、2009年5月4日，Ext的3.0 版本发布。 7、2010年1月8日，ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户，现在的版本为Ext-3.2.0 8、2010年6月15日，当开发者访问著名的JavaScript库ExtJS网站，会发现自己被重导向到另一个不熟悉的网址和界面sencha。原来，，ExtJS 项目已经与触摸屏代码库项目jQTouch和SVG处理库Raphael合并，后两个项目的创始人David Kaneda和Dmitry Baranovskiy也将加入ExtJS。此举是ExtJS为了应对HTML5等新趋势，加强丰富图形和触摸屏功能的重要举措。 编辑本段 什么是EXT 1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
XT标准布局类 面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种： ContainerLayout（容器布局） FitLayout（自适应布局） AccordionLayout（折叠布局） CardLayout（卡片式布局） AnchorLayout（锚点布局） AbsoluteLayout（绝对位置布局） FormLayout（表单布局） ColumnLayout（列布局） TableLayout（表格布局） BorderLayout（边框布局） 接下来分别介绍这10种布局类的特点及使用方式。 1 ContainerLayout容器布局 https://www.doczj.com/doc/dc11924689.html,yout.ContainerLayout 提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过 new 关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。 表5-4 https://www.doczj.com/doc/dc11924689.html,yout.ContainerLayout主要配置项目表 2 FitLayout自适应布局
https://www.doczj.com/doc/dc11924689.html,yout.FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。 注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。在后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。 下面是自适应布局的一个简单的示例。 代码5-7：FitLayout（自适应布局）示例