㈠ 深入浅出Extjs的完整目录
第1章EXT概述 11.1下载EXT发布包 11.2如何查看EXT自带的API和示例 11.3为什么有些示例必须放在服务器上才能看到效果 21.4Hello World 21.4.1直接使用下载的发布包 21.4.2在项目中使用EXT 31.5为什么页面提示找不到图片 31.6辅助开发 41.6.1调试工具Firebug 41.6.2开发利器Spket 71.7本章小结 10第2章EXT框架基础 112.1EXT的事件和类 112.1.1自定义事件 112.1.2浏览器事件 132.1.3Ext.lib.Event 132.1.4Ext.util.Observable 142.1.5Ext.EventManager 172.1.6Ext.EventObject 192.2EXT的核心组件 202.2.1Ext.Component 202.2.2Ext.BoxComponent 222.2.3Ext.Container 232.2.4Ext.Panel 242.2.5Ext.TabPanel 242.3本章小结 27第3章表格控件 283.1Grid的特性简介 283.2制作一个简单的Grid 293.3Grid常用功能详解 323.3.1部分属性功能 323.3.2自主决定每列的宽度 333.3.3让Grid支持按列排序 353.3.4解决中文排序 353.3.5显示日期类型数据 373.4在单元格里显示红色的字、图片和按钮 383.5给Grid的行和列设置颜色 413.6自动显示行号和复选框 423.6.1自动显示行号 433.6.2复选框 443.7选择模型 453.8表格视图--Ext.grid.GridView 463.9表格分页 473.9.1为Grid添加分页工具条 483.9.2通过后台脚本获得分页数据 493.9.3分页工具栏显示在Grid的顶部 513.9.4让EXT支持前台排序 523.10后台排序 533.11可编辑表格控件--EditorGrid 553.11.1制作一个简单的EditorGrid 553.11.2添加一行数据 563.11.3保存修改结果 583.11.4验证EditGrid中的数据 593.11.5限制输入数据的类型 603.12属性表格控件--PropertyGrid 633.12.1PropertyGrid 643.12.2只能看不能动的PropertyGrid 653.12.3强制对name列排序 653.12.4根据name获得value 663.12.5自定义编辑器 663.13分组表格控件--group 663.13.1分组表格简介 673.13.2分组表格视图Ext.grid.GroupingView 683.14可拖放的表格 693.14.1拖放改变表格的大小 693.14.2在同一个表格里拖放 703.14.3表格之间的拖放 723.14.4表格与树之间的拖放 733.15Grid与右键菜单 733.16本章小结 74第4章表单与输入控件 764.1制作一个表单 764.2FormPanel和BasicForm详解 774.3EXT支持的控件 774.3.1控件继承图 774.3.2表单控件 784.3.3基本输入控件Ext.form.Field 784.3.4文本输入控件Ext.form.TextField 794.3.5多行文本输入控件Ext.form.TextArea 804.3.6日期输入控件Ext.form.DateField 804.3.7时间输入控件Ext.form.TimeField 814.3.8在线编辑器Ext.form.HtmlEditor 814.3.9隐藏域Ext.form.Hidden 824.3.10下拉输入框Ext.form.TriggerField 824.4使用表单提交数据 834.4.1EXT默认的提交形式 834.4.2使用HTML原始的提交形式 854.4.3单纯Ajax 854.5数据校验 864.5.1输入不能为空 864.5.2最大长度和最小长度 874.5.3借助vtype 884.5.4自定义校验规则 884.5.5算不上校验的NumberField 884.5.6使用后台返回的校验信息 894.6表单布局 904.6.1默认的平铺布局 904.6.2平行分列布局 914.6.3在布局中使用fieldset 934.6.4在fieldset中使用布局 954.6.5自定义布局:在表单中加入图片 964.7ComboBox、datefield和timefield详解 974.7.1ComboBox简介 984.7.2将Select转换成ComboBox 994.7.3ComboBox结构详解 994.7.4使用远程数据 1014.7.5ComboBox的高级配置 1024.7.6监听用户选择了哪条数据 1044.7.7使用本地数据实现省、市、县级联 1044.7.8使用后台数据实现省、市、县级联 1074.8复选框和单选框 1104.8.1复选框 1104.8.2单选框Radio 1114.9文件上传 1124.10自动把数据填充到表单中 1134.11本章小结 114第5章树形结构 1165.1TreePanel的基本使用 1165.1.1创建一棵树 1165.1.2为树生枝展叶 1175.1.3tree的配置 1185.1.4使用TreeLoader获得数据 1195.1.5读取本地JSON数据 1215.1.6Struts 2的JsonPlugin 1215.1.7使用JSP提供后台数据 1225.2树的事件 1255.3右键菜单 1265.4修改节点的默认图标 1275.5从节点弹出对话框 1285.6节点提示信息 1295.7为节点设置超链接 1295.8直接修改树节点名称 1305.9树形的拖放 1315.9.1节点拖放的三种形式 1315.9.2叶子不能append 1315.9.3判断拖放的目标 1325.9.4树之间的拖放 1345.10树形过滤器TreeFilter 1355.11利用TreeSorter对树进行排序 1375.12树形节点视图--Ext.tree.TreeNodeUI 1385.13表格与树形的结合--Ext.tree.ColumnTree 1395.14本章小结 142第6章拖放 1436.1拖放简介 1436.2拖放的简单应用 1436.3拖放组件体系 1446.4拖放的事件 1466.5高级拖放 1486.5.1Basic 1486.5.2Handle 1496.5.3On Top 1506.5.4Proxy 1516.5.5Group 1526.5.6Grid 1546.5.7Circle 1556.5.8Region 1576.6本章小结 158第7章弹出窗口 1597.1Ext.MessageBox 1597.1.1Ext.MessageBox.alert() 1597.1.2Ext.MessageBox.confirm() 1607.1.3Ext.MessageBox.prompt() 1607.2对话框的更多配置 1617.2.1可以输入多行的输入框 1617.2.2自定义对话框的按钮 1627.2.3进度条 1627.2.4动画效果 1647.3Ext.window的常用属性 1647.3.1创建一个窗口 1647.3.2窗口的最大化和最小化 1657.3.3窗口的隐藏与销毁 1677.3.4防止窗口超出浏览器 1677.3.5设置窗口中的按钮 1697.3.6窗口的其他配置选项 1707.4窗口分组 1717.5向窗口中放入各种控件 1727.5.1在窗口中加入表格 1727.5.2在窗口中加入表单 1737.5.3复杂布局 1747.6本章小结 176第8章布局 1778.1布局的用途 1778.2最简单的布局FitLayout 1798.3常用的边框布局BorderLayout 1828.3.1设置子区域的大小 1848.3.2使用split并限制它的范围 1858.3.3子区域的展开和折叠 1878.4制作伸缩菜单的布局--Accordion 1918.5实现操作向导的布局--CardLayout 1928.6控制位置和大小的布局--AnchorLayout和AbsoluteLayout 1948.7表单专用的布局FormLayout 1998.8分列式的布局ColumnLayout 2008.9表格状的布局TableLayout 2028.10与布局相关的其他知识 2048.10.1超类Ext.Conainter的公共配置与xtype的概念 2048.10.2layout的超类Ext.layout.ContainerLayout 2058.10.3不指定任何布局时会发生的情况 2068.10.4使用Viewport对整个页面进行布局 2068.10.5使用嵌套实现复杂布局 2078.11本章小结 210第9章工具栏和菜单 2119.1简单菜单 2119.2向菜单中添加分隔线 2129.3多级菜单 2139.4高级菜单 2149.4.1多选菜单和单选菜单 2149.4.2日期菜单 2169.4.3颜色菜单 2169.4.4Ext.menu.Adapter菜单适配器 2179.4.5使用Ext.menu.MenuMgr统一管理菜单 2209.5工具栏组件详解 2209.5.1Ext.Toolbar.Button 2219.5.2Ext.Toolbar.TextMenu 2219.5.3Ext.Toolbar.Spacer 2229.5.4Ext.Toolbar.Separator 2229.5.5Ext.Toolbar.Fill 2239.5.6Ext.Toolbar.SplitButton 2239.5.7为工具条添加HTML标签 2249.5.8为工具条添加输入控件 2259.6分页工具条Ext.PagingToolbar 2259.6.1Ext.PagingToolbar的基本用法 2259.6.2向Ext.PagingToolbar添加按钮组件 2269.7右键弹出菜单 2279.8本章小结 229第10章数据存储与传输 23010.1Ext.data简介 23010.2Ext.data.Connection 23010.3Ext.data.Record 23210.4Ext.data.Store 23310.4.1基本应用 23310.4.2对数据进行排序 23410.4.3从store中获取数据 23410.4.4更新store中的数据 23610.4.5加载及显示数据 23710.4.6其他功能 23810.5常用proxy 23910.5.1MemoryProxy 23910.5.2HttpProxy 24010.5.3ScriptTagProxy 24010.6常用Reader 24110.6.1ArrayReader 24110.6.2JsonReader 24210.6.3XmlReader 24310.7高级store 24510.8EXT中的Ajax 24610.8.1最容易看到的Ext.Ajax 24610.8.2Ext.lib.Ajax是更底层的封装 24710.9关于scope和createDelegate() 24710.10DWR与EXT整合 24910.10.1在EXT中直接使用DWR 24910.10.2DWRProxy 25010.10.3DWRTreeLoader 25210.10.4DWRProxy和ComboBox 25310.11localXHR支持本地使用Ajax 25410.12本章小结 255第11章实用工具 25611.1EXT提供的常用函数 25611.1.1onReady函数 25611.1.2get函数 25711.1.3query函数和select函数 26011.1.4encode函数和decode函数 26311.1.5extend函数 26511.1.6apply和applyIf函数 26611.1.7namespace函数 26611.1.8Ext.isEmpty函数 26711.1.9Ext.each函数 26811.1.10Ext.DomQuery 26911.2用DomHelper和Template动态生成HTML 27211.2.1用DomHelper生成小片段 27211.2.2Ext.DomHelper.applyStyles函数 27511.2.3Template模板 27611.2.4Ext.DomHelper.createTemplate函数 27811.2.5复杂模板XTemplate 27911.3用Ext.Utils.CSS切换主题 28111.4悬停提示 28211.4.1初始化 28211.4.2注册提示 28311.4.3标签提示 28311.4.4全局配置 28311.4.5个体配置 28411.5使用Ext.state保存状态 28511.6fx实现的动画效果 28811.7局部更新网页内容 28811.8Ext.util.Format 29011.9使用Ext.util.CSS管理CSS样式 29011.10使用Ext.util.ClickRepeater处理点击事件 29111.11使用Ext.util.DelayedTask延时执行函数 29311.12使用Ext.util.TaskRunner执行循环任务 29411.13混合型集合Ext.util.MixedCollection 29511.14使用Ext.util.TextMetrices获得文本所占的高度和宽度 29911.15Ext.KeyNav处理导航按键 30011.16Ext.KeyMap为对象绑定按键功能 30211.17扩展 30411.17.1扩展Date 30411.17.2扩展String 30611.17.3扩展Function 30611.17.4扩展Number 30811.17.5扩展Array 30811.18Ext.ux.Portal 30911.19Ext.Desktop 31211.20本章小结 316第12章一个完整的EXT应用 31712.1确定整体布局 31712.2使用HTML和CSS设置静态信息 31912.3对学生信息进行数据建模 32012.4在页面中显示学生信息列表 32412.5添加表单编辑学生信息 32912.6为表单添加提交事件 33212.7清空表单信息 33512.8删除指定的学生信息 33612.9在Grid和Form之间进行数据交互 33712.10本章小结 338第13章通过Ext Framework合理地应用EXT 33913.1Ext Framework简介 33913.2Ext Framework架构解析 34213.2.1主要的第三方包 34213.2.2后台类关系图 34213.2.3前台组件关系图 34413.3本章小结 347附录A EXT常见问题 348附录B EXT对AIR的支持 355附录C EXT的版本变迁 364
㈡ ExtJS是什么,一位学长说的,对这个从未听说
1.extja是什么?
答: ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。
功能丰富,无人能出其右
无论是界面之美,还是功能之强,ext的表格控件都高居榜首。
单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了。
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。
呵呵~不过ext也不是万能的,与fins的ecside比较,ext不能锁定列(土豆说1.x里支持锁定列,但是2.0里没有了,因为影响效率。),也没有默认的统计功能,也不支持excel,pdf等导出数据。另外fins说,通过测试ecside的效率明显优于ext呢。:)
[编辑本段]Ext发展史
1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展,但后来一度风头盖过其父辈YUI,足以说明 大家对它的热情,很多人把它投入项目人并不十分了解它。分析人士打了一比喻:就好比尚未谋面, 并不了解一个人的家庭、教育、品行等背景,只因为他有一副精致漂亮的外观,就对其陷入了疯狂的倾慕之中。因此分析人士建议,在投入项目前,要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。
2、在2006年初 ,Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以” yui-ext” 的名义下发布。
3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码,根据这名字(下开放源代码DSB许可)。在年底之前,这个库已大受欢迎, 名字被简化为Ext,反映了它作为一个框架的成熟和独立。
该公司成立于2007年初,Ext现在为双执照,使用LGPL和一个商业执照。
4、在2007年4月1日,发布1.0正式版。
5、直至今日(2008年4月1日)ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户,现在的版本为Ext-3.0
6、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。
7、2009年5月4日,Ext的3.0 版本发布。
[编辑本段]什么是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官方网站www.extjs.com
[编辑本段]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、Ajax.NET,或其它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)那样有固定的代码设计模式,而往往是不同的人就有不同的编程风格。在实际应用开发中,只有见多识广,才能在自己的在脑中建立一个开发库。
学习别人的示例对于我们开发帮助会非常大,示例包括基本组件的应用、综合应用等多个方面。在此,简单推荐几个。
1、Ext官方示例,在ext项目下载包的examples目录中,包括各个控件的基本应用演示,同时还有一些比较复杂的组合示例,有简有繁,非常适合初学者认真研究。
2、Vifir推出的示例,Vifir推出的一些示例主要包括两类,一种是开源的示例应用,另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统,这个一个集合了前后台技术的ext综合示例,而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。
3、其它示例,在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等也是必看的。当需要从一个控件进行扩展的时候,最好能简单看一看这个控件的源代码。
2.extjs应该很少应用吧 我做jsp的,从来就没有用过这些东西·
㈢ extjs Ext.dd.DDProxy 层次
首先复申明java和extjs不是同一种语言,制他们类似处是都基于oo来设计。基于我对extjs了解,从语言设计的方面讲有以下特点。
1.extjs架构于javascript之上(其本质区别是javascript是基于原型继承,并具有闭包等动态语言的特性,这是java/c++不具备的),创建了对象组件和类的单继承,更符合我们熟悉的静态地面向对象语言的思维。
2.extjs具有类似mfc的类库设计的层次结构,这让我们可对其进行改造和扩充。
3.extjs类命名是基于命名空间的层次关系来的(就是你所指的包),具体可以参考extjs的类层次结构视图,譬如ext本身就是最顶层的命名空间并不是一个类,就如你的问题ext.dd.ddproxy 其中ext.dd表明了命名空间的层次关系并不表示类,DDProxy才是一个类(如果带上命名空间,类的全称是ext.dd.DDproxy)
㈣ ExtJS Grid 搜索功能
大致思路,你参考下:
{
text: '搜索', iconCls:'icon-zoom',
handler: function(btn){ //点击搜索时执行函数
var type= Ext.getCmp('combo_id').getValue(); //关键字类型
var value= Ext.getCmp('textfield_id').getValue(); //搜索值
var gridSearch = {keyType:type, searchStr:value}; //组合成一个对象去传递
var store = Ext.getCmp('grid_id').getStore(); //获取grid的store
store.baseParams = {}; //绑定参数(在store访问的那个路由中去接收并处理)
store.baseParams['gridSearch'] = Ext.encode(gridSearch);
store.lastOptions.params[store.paramNames.start] = 0;
store.removeAll();
store.commitChanges();
store.reload();
}
}
㈤ extjs 怎么使用正则表达式
javascript本身支持复正则表达式,和制extjs没有关系。
javascript中可以用反斜线将字符串括起来就表示一个正则表达式模式,例如
varregexp=/[0-9]{2,5}/;//regexp变量值就是一个正则模式,匹配2~5位数字
也可以用创建对象的标准语法来表示,例如:
varregexp=newRegExp("[0-9]{2,5}");//和上例等效
模式可以有附加参数(非必需),包括:
包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。可以组合使用,例如“ig”。
例如:
varregexp=/[a-n]{3}/i;//忽略大小写,匹配3个a到n的英文字母
//也可以写成varregexp=newRegExp("[a-n]{3}","i")
js正则表达式有多个方法,常用的有exec、test、compile。
test() 方法检索字符串中的指定值。返回值是 true 或 false。
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
compile() 方法用于改变 RegExp。
㈥ easyui和extjs哪个好
作为ExtJs和EasyUI都用得很熟练的一个老资格程序员,我发表一下我的看法。
首先两个框架的组件都很丰富,商业应用都要收费。ExtJS的动态性和扩展性更好,从使用效果看,easyui的组件相对体验更好一点。
ExtJS
优点:1.完全开源,我说的开源的意思并不是说不收费。
2.我非常赞赏它的架构设计,完全的面向对象的组件化设计。所有的组件都是从一些基础的组件派生出来的,并且提供了overide,extend等扩展方式,可以说能够任意扩展。可能一些半桶水的人觉得ExtJS很难用,那是因为他们只懂皮毛。
3.ExtJS的文档和实例做得比EasyUI要好得多,基础比较好的开发人员只用看官方的文档、demo、适当参考源码就能够完成任何工作,遇到问题完全不用去网络或论坛问其他人。
4.可以完全动态开发,代码都写在JS文件里,不像ExtJS那样非得在页面放一个DOM元素。所以可以自己定制组件在任意页面引用,复用性好。
缺点:1.可能太多人用,造成审美疲劳,反正我看腻了它的界面,自己定制界面主题有太难。
2.可能因为它太庞大,不像easyUI那样基于页面已有的HTML
DOM渲染,所以一般人觉得比较难(但是话有说会来,如果使用者的水平高的话,这其实也是也是它的优点。因为你要是在同一个界面点击不同按钮要动态显示各种各样不同的window、form等等的话,只要把这些JS引用到当前页面就可以吧,见上述优点4)。
easyui
优点:
1.在页面的DOM元素加一些属性然后加几行JS就可以动态构造出相应的组件。开发方式相对ExtJS直观和简洁一些。
2.组件相对体验更好一点,界面好像跟干净简洁。
缺点:1.半开源,对于一个高手来说看不到源代码是很痛苦的,事,因为他们总有这样那样的扩展需求。
2.一定要在页面上放置相应的DOM元素才能渲染(如果不对dom元素设置隐藏的话,在页面没有渲染过程中会显示一堆乱七八糟的东西)所以无法自己定制组件在其他页面引用,要复用的话得搬砖一样把JS和DOM都复制过来,遇到非常复杂的页面那是相当杂乱和痛苦的。