Extjs4.0.7 desktop基础搭建
ExtJs4.0入门教程
ExtJS简介
ExtJS显示效果示例1
ExtJS简介
ExtJS显示效果示例2
ExtJS简介
认识ExtJS的开发包
要开始ExtJS之旅的第一步是要获得开发包，可以 从官方网站/下载。下载 地址是 /products/extjs/downloa d
•
ExtJS组件之Panel
•
控件
控件(widgets)：控件是指可以直接在页面中创建 的可视化组件，比如面板、选项板、表格、树、 窗口、菜单、工具栏、按钮等等，在我们的应用 程序中可以直接通过应用这些控件来实现友好、 交互性强的应用程序的UI。
ExtJS基础组件
•
组件分类举例
容器组件：如toolbar、pagingtoolbar、panel、 form、menu、treePanel、gridPanel、window等。 工具栏及菜单栏组件：如tbseparator（工具栏分 隔符）、menuitem（菜单项）等。 表单及元素组件：如checkboxfield（复选框）、 combo(下拉列表)、datefield（日期选择项）等。 其他组件（包括图表、视图、编辑、按钮组件）： 如chart、button。
• • • • •
• •
ExtJS简介
ExtJS API文档
ExtJS简介
•
从Hello World开始
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel='stylesheet' type='text/css' href='./ext/resources/css/ext-all.css'> <script type="text/javascript" src="./ext/bootstrap.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.MessageBox.alert('helloWorld',"I'm coming"); }); </script> </head> <body> </body> </html>
Citrix虚拟桌面快速部署手册-XenDesktop(PVS Pool桌面)安装配置
Citrix虚拟桌面快速部署手册-XenDesktop(PVS Pool桌面)安装配置篇修正历史修正改变说明更新者日期V0.1 原始文件陈艳东2013年4月11日V2.0 更改图片，更新内容Ran.Zhao 2013年7月12日星期五V2.0 Reviewed Martin Liu 2013/7/14产品版本产品版本Provisioning Server 6.1Xendesktop 5.6XenServer 6.1第1章文档说明及约定由于用户环境及需求不同，虚拟桌面部署实施也会采用不同的方式。
本文档仅作为部署实施的参考。
第2章部署组件与架构说明2.1 组件说明本部署手册重点介绍Citrix虚拟化环境下的采用PVS置备方式自动部署虚拟桌面的标准化部署（采用Xendesktop+PVS+UPM+XS+NAS+Netscaler整合方式自动化部署），包含以下内容：∙部署组件与架构说明∙部署SQL Server数据库Mirror镜像∙XenDesktop/WI服务器安装部署∙PVS服务器部署∙PVS批量发布虚拟桌面∙User Profile Management部署∙Netscaler 部署配置∙ TFTP 服务的负载均衡配置（Source IP 方式） Xendesktop 标准化部署需要划分两个单元环境：基础架构（管理控制）单元和服务（工作者）单元。
项目部署可以根据实际需求部署的来划分基础架构（管理控制）单元和服务（工作者）单元的服务器主机数量。
基础架构（管理控制）单元：用于部署承载基础架构管理服务器，如AD 域控制器服务器、数据库服务器、License 服务器、Desktop Delivery Cotroller 控制器、Provisioning Services 服务器、文件服务器等。
基础架构（管理控制）单元实现对桌面虚拟化平台的授权管理和资源分配。
基础架构（管理控制）单元建议采用3台服务器并配置成 2 + 1（HA ）模式。
extjs基础篇
ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
朋友问我,Ext怎么学习,我记得自己学的时候纯纯因为它的简单和视觉效果特别好,因为喜欢了才有努力的坚持不懈的激情.有朋友说能否写点简单的示例方便入门,我是觉得自己写的都是很浅陋东西,实在不知道怎么简单了,昨天晚上想了许久,觉得自己还是无比的粗浅,但依然有人说看不懂,我想可能是言语没有说清楚,或者你在等到天上掉馅饼吧.因为,我觉得开始学习就是不断的模仿,只要知道它的大致概念,在自己的项目中不断的接触,一天一天就会成长起来,建议最好根据自己的学习进度写个小网站,将所学的知识融会贯通一下,就像我写了好几个Ext的网站,虽然暂时都没有发布出去,但自己经常看看也是对自己的工作的激励吧.接下来一段日子,尽量写一些Ext2.2所有的对象的最简单的用法.如果能够坚持,以后会写一个对应的提高系列.下面就开始Ext之旅吧Ext是什么?答曰:Ext是一个用jscript(javascript)所写的一个ajax框架(我想大家都知道什么是ajax 了吧,假想你已经知道,那我就不说了).而javascript也是更知道它的概念了,就更不用说了吧,好,那就也不说了.什么是Ext呢,结合javascript和ajax,我想你闭眼猜都能够猜出它的功能了吧.那就用自己的语言说下什么是Ext吧,呵呵,思考真的很重要的.学习的重要环节就是要不断的自己总结,总结就来自自己的思考.Ext有多好呢?答曰:仁者见仁, 自己好好看看吧,它的绚丽多姿是无法用语言描述的,你可能会很惊叹,但我还要告诉你,这个并没有把Ext的所有的功能都罗列出来,仅仅是一部分,有更多的有太多的等你去发现,星哥说了:太阳已经落山了,时间不等人滴.Ext难吗?答曰:太多的人问这个问题,就像我开始学习java一样,我问了好多好多人,都说难,让我学习的信心到最后都剩的没有一点儿了,于是学了当时身边谁也不懂的.呵呵.如果有人问我这个问题,我告诉你,真的很简单,不是说我会了才这么说,其实,我想说的是:大家玩游戏基本上都是无师自通的吧,现在明白了吧,如果你有玩游戏的那份精神和斗志,靠,天下事难难难者亦易易易也.在哪里下载Ext呢?答曰:好,你能够这么问,看来我做说客还是可以的(信心指数又增加了),因为我是从2.0版本,2.1版本,到现在的2.2版本,我真的说不出来他们到底有何具体的差别,但明显的看见它明显壮大了,不仅仅是体积,更是它的力量. 官方的版本,有各个版本的,我建议学习最新的吧.Ext有核心吗?答曰:看来只有我才能够问这个问题呀,当年比干无心而死,看来框架也是一样的,没有核心怎么可以呢.我想在javascript中大家也都知道什么是类了吧,简单的说就是一个函数就是一个类,类里面还可以有很多的类,可以无限嵌套.而Ext就是有很多的类库组成,也就是有很多的函数组成,只是现在天上飞的水里游的都成了对象了,所以很多技术也都用对象的语言来描述.Ext就是主要有哪些类库组成呢?有人说肯定有API层,是的,有的,有些人总是喜欢称底层是API(API是什么意思,全称Application Programming Interface 应用编程接口),喜欢就喜欢吧,我管不着.但Ext说了,要改变这样的称呼,于是Ext称之为Core,为什么呢?因为Ext的底层在Core这个文件夹里面.core是什么意思呢?core[kC:]n.果核, 中心, 核心,我觉得称底层为Core确实不错,而且大写的CORE还有一个意思:CORE=Congress of Racial Equality 争取种族平等大会.感觉Ext的作者Jack Slocum是具有很浓烈的浪漫主义情怀的追求完美的一个程序员. 说到Core了:core对Ext的DoM操作,事件处理以及所有的直接在页面上可以展示的和不可以展示的组件等提供了基础的功能.刚刚提到可显示的控件也叫组件,我们在程序中可以直接通过这些控件来实现非常友好,并且交互性也很好的应用.特别一提的是在那些不可见的组件中,有一个utils类,该类提供了很多的很实用的功能,可以方便实现对接收和发送的数据进行各种操作,实在是Ext框架不可或缺的一部分.如何介绍Ext的组件呢?答曰:这个问题我确实想了很长时间,因为像很多软件的帮助教程一样,它们总是把该软件的所有功能都罗列出来,然后再逐个详解,甚至很多功能可能你都从来都不需要,但你并不知道自己是否需要,就像最近在学习flash,总感到自己有茫然不知所措的感觉,学习的态度都会转变.但,也不能够说人家的帮助教程不好呀,毕竟是追求完整性和可用性方面,每个人的见解并不一样. 好吧,我下定决心了.先简单把组件说下,然后对这些组件再详细解说加示例,而且每个示例都追求可用和简单,将来再写一个深入的就能够达到完整性,倒不是说一定要追求完整,而是,如果你仅仅写了入门,却没有提高的版本,感觉自己并没有把事情做好做完整,毕竟人人都希望有始有终呀.毕竟自己还想早点介绍点关于Flex的故事呢,唉,总是没有时间. Ext的组件有哪些呢?答曰:Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. 下面就是这些可以使用了控件的列表了,我直接从它的帮助文档复制过来,并同时加上了它的英文原文,因为每次看到这段我总是能够想起什么,呵呵:Ext组件主要包括一些常用组件,如表单组件,数据组件,导航组件,相信大家看名称就知道什么意思了.xtype Class基本组件---------------------------------------box Ext.BoxComponentbutton Ext.Buttoncolorpalette Ext.ColorPalettecomponent ponentcontainer Ext.Containercycle Ext.CycleButtondataview Ext.DataViewdatepicker Ext.DatePickereditor Ext.Editoreditorgrid Ext.grid.EditorGridPanel grid Ext.grid.GridPanelpaging Ext.PagingToolbarpanel Ext.Panelprogress Ext.ProgressBar propertygrid Ext.grid.PropertyGrid slider Ext.Slidersplitbutton Ext.SplitButtonstatusbar Ext.StatusBartabpanel Ext.T abPaneltreepanel Ext.tree.TreePanel viewport Ext.Viewportwindow Ext.Window导航组件--------------------------------------- toolbar Ext.Toolbartbbutton Ext.Toolbar.Buttontbfill Ext.Toolbar.Filltbitem Ext.Toolbar.Item tbseparator Ext.Toolbar.Separator tbspacer Ext.Toolbar.Spacer tbsplit Ext.Toolbar.SplitButton tbtext Ext.Toolbar.TextItem窗体组件--------------------------------------- form Ext.FormPanel checkbox Ext.form.Checkbox combo boBox datefield Ext.form.DateFieldfield Ext.form.Fieldfieldset Ext.form.FieldSethidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label bel numberfield Ext.form.NumberFieldradio Ext.form.Radiotextarea Ext.form.TextAreatextfield Ext.form.TextFieldtimefield Ext.form.TimeFieldtrigger Ext.form.TriggerFieldExt的每个组件都是有一个指定的Xtype属性值,通过该值就可以得到该组件的类型,同时也可以根据该组件来定义一个组件例如:{xtype:"button",id:"btnEnter",text:"确定"} //这就是定义了一个按钮的组件. {xtype:"field",id:"txtName"} //这就是定义了一个输入框的组件. {xtype:"field",id:"txtPwd",inputType:"password"} //这就是定义了一个密码框的组件.当然你可以不用xtype 比如:var btnEnter = new Ext.Button({id:"btnEnter",text:"确定"} );//这就是定义了一个按钮的组件.var txtName = new Ext.form.Textfield({id:"txtName"} );//这就是定义了一个输入框的组件.var txtPwd = newExt.form.Textfield({id:"txtPwd",inputType:"password"} );//这就是定义了一个密码框的组件.是不是很简单,在下面会解说具体的示例,包括它的基本的语法结构,同时,你需要明确,这和你在javascript里面的用法不会有不同的地方,只是有些方法Ext已经给我们封装好了,我们只要有拿来主义的精神就可以.特别一说的是:Ext的一些很实用的类都是全局的,无须new了,直接用就可以.在下节会介绍一些Ext的很好的很实用的也很简单就能够使用的Util类.精美的消息框截图了感觉就像写书一样,好难,不过我有玩游戏的精神,难亦易也.如果你看到了上文,那么我想你手上现在应该有Ext2.2的文件了吧.这里再说一次,所有的程序除非有说明,则全部是以2008 c#.net为前提,虽然Ext不在乎你使用什么语言,但我只会.net.好,首先建立一个新的网站吧,然后把你下载的Ext2.2文件复制到网站的任何一个目录里面,在页面设置正确的路径即可.如下图所示:需要说明一点，以后所有的程序都不再罗列整个页面，只写出<body></body>之间的语句<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="" ><head runat="server"><title>无标题页</title>//下面是整个Ext框架所必备的文件,除了中文映射老外不需要外<link rel="Stylesheet" type="text/css"href="../ExtJS/resources/css/ext-all.css" />//样式文件<script type="text/javascript"src="../ExtJS/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ExtJS/ext-all.js"></script><script type="text/javascript"src="../ExtJS/ext-lang-zh_CN.js"></script> //中文映射</head><%--这是一个的页面头部分.在里面输入正确访问Ext的路径.顺序更要注意哦,而且绝对不可以颠倒.有了上面的正确的引用后,我们就要开始实战演练了.好吧,我们也是从hello世界开始吧!--%><body><form id="form1" runat="server"><div><%--既然Ext是基于javascript的，所以我们要把Ext的东东包裹在javascript里面--%><script type="text/javascript">//定义一个函数，在里面定义一个弹出按钮,当网页上出现弹出按钮后,点击就会出现hello世界了.function ready(){// 下面openMs就是出发事件后所执行的函数var openMsg = function(){//alert("good");比较下ext的弹出消息框是多么多么的令人狂喜Ext.Msg.alert("提示消息，可以自定义","hello世界-hello世界-hello世界-hello世界");};//定义Ext的按钮var 弹出按钮= new Ext.Button({id:"btnOpen", //定义按钮的IDtext:"弹出按钮", //定义按钮的标题handler:openMsg, //定义按钮出发的事件，handler后面直接写函数的名称openMsg//也可以写成下面这样，本质是一样的，效果也是一样的//handler:function(){Ext.Msg.alert("提示消息，可以自定义","hello世界-hello世界-hello世界-hello世界"); },renderTo:document.body//将弹出按钮渲染到窗体上});}Ext.onReady(ready);//里面的参数就是上面定义的函数//onReady是使用Ext的入口,只有在上面所说的Ext框架全部加载完成后,才会执行Ext.onReady里面所包含的函数，就是说具体执行什么函数，由Ext的onReady方法指定．//当然onReady这个Ext方法总共有三个参数，为了力求简单，这里先使用一个参数，在提高篇里面则会详细讲解．</script></div></form></body></html>上面是一个完整的网页,路径正确后,就可以直接在页面显示出来．精美的消息框截图了另外，提一句，Ext的所有消息框都封装在Ext.Msg类里面．【原】基础篇:第三篇,常用的一些Ext方法在开始编写每个Ext的组件用法之前，先对自己在工作中常用的一些Ext方法总结出来．只罗列一些经常用到的，偶尔也会用到的仅仅说明下．Ext框架把一些我们平时在工作经常遇到的情况封装成了方法，有兴趣的朋友读读它的源代码，会发现里面封装的语句和我们平时写的没有什么区别．提一句，它的源代码读起来真的是一种享受，虽然有很多地方我还看不懂，但，我觉得它的源代码确实是学习javascript的最好的教程．ext-all-debug.js 和ext-core-debug.js这两个文件是调试文件，非常清晰，假如我有２个月的时间休假，我是愿意把时间全部花在上面的．第一想说的方法想来想去，觉得还是再说一次Ext类的onReady()方法吧，它的作用就是指定当Ext类的全部框架全部加载完成后执行什么函数．具体执行什么函数就是它的参数．第一：Ext.getCmp("对象ID"):该方法只有一个参数，就是组件的ID说明：在执行下面的语句后，点击确定会弹出定义的Ext按钮的一些属性值，同时将原来的值由"确定"更改为"取消"<body><form id="form1" runat="server"><div><script type="text/javascript">function ready(){//这个函数的主要作用有两个：//一个获取定义的buttonName按钮。
ExtJs布局详解
ExtJs布局详解序⾔1、百度百科上说：ExtJs功能丰富，⽆⼈能出其右。
⽆论是界⾯之美，还是功能之强，extjs都⾼居榜⾸。
2、呵呵，界⾯之美当是少不了布局的，这篇⽂章我写layout的七种布局。
（extjs是4.+版本）Border布局__边界布局这中布局是最常⽤的布局之⼀，看图border布局：border布局也称边界布局，他将页⾯分隔为west,east,south,north,center这五个部分，我们需要在其items中指定使⽤region参数为其⼦元素指定具体位置。
注意：north和south部分只能设置⾼度（height），west和east部分只能设置宽度（width）。
north south west east区域变⼤，center区域就变⼩了。
参数 split:true 可以调整除了center四个区域的⼤⼩。
参数 collapsible:true 将激活折叠功能。
center 区域是必须使⽤的，Center区域会⾃动填充其他区域的剩余空间。
尤其在Extjs4.0中，当指定布局为border时，如果没有指定center区域时，会出现报错信息。
Ext.onReady(function () {new Ext.Viewport({title: "Viewport",layout: "border",defaults: {bodyStyle: "background-color: #FFFFFF;",frame: true},items: [{ region: "west", width:90, title: 'north', collapsible: true },{ region: "east", width: 90, title: 'north', collapsible: true },{ region: "north", height: 100, title:'north' , collapsible:true },{ region: "center", split: true, border: true, collapsible: true,title:'center' },{ region: "south", title:"south", split: true, border: true, collapsible: true, height: 100 },]});});Accordion布局__⼿风琴布局accordion布局：accordion布局也称⼿风琴布局，在accordion布局下，在任何时间⾥，只有⼀个⾯板处于激活状态。
ExtJS快速入门指南
ExtJS快速入门指南一、ExtJS框架简介 (1)二、如何使用Ext (2)三、Ext组件 (3)1、组件简介 (3)2、组件XType (4)3、组件应用 (4)4、组件配置选项 (5)5、组件属性 (6)6、组件方法 (6)四、事件及事件响应 (7)五、Component及Container简介 (10)1、ponent (10)2、tainer (10)六、面板Ext.Panel (11)面板Panel简介 (11)面板内容 (12)面板与DOM节点DIV (13)七、ViewPort (14)八、窗口Window (17)九、对话框 (18)十、TabPanel (22)十一、布局 (26)十二、表格Grid (29)十三、TreePanel (30)十四、表单Form (32)十五、理解Html DOM、Ext Element及Component (34)十六、Ext类中的get方法简介 (35)十七、如何学习及掌握Ext (37)一、ExtJS框架简介ExtJS也就是Ext框架，官方网址为，ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA(Rich Internet Application，富互联网应用系统)的开源AJAX应用框架，使用的开源协议是GPL。
ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于UI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
二、如何使用Ext首先从ext官方网站下载ext的sdk，把sdk拷到web应用程序目录，然后即可在web 页面中直接通过<script>标签引入ext的库文件，就可以使用javascript调用ext的各种控件。
ext基础
ExtJS引用 ExtJS引用
到官方网站 /products/extjs/download.php下载必要 的核心包； 解压ext-4.0.7-gpl.zip； 在Html中引入相应文件。 <!—引入ExtJs的样式文件--> <link type="text/css" rel="Stylesheet" href="extjs/res ources/css/ext-all.css" /> <!—引入ExtJs的框架文件--> <script type=“text/javascript” src=“extjs/extall.js”></script>
表单与元素组件
radio Ext.form.field.Radio 单选按钮 textarea Ext.form.field.TextArea 区域文本 框 Text Ext.form. Field.Text 表单文本框 time Ext.form. field.Time时间录入项 trigger Ext.form.field.Trigger 触发录入项 在这些组件中最常用的组件有： grid、panel、treepanel、 form、 window等等
allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }], buttons: [{ text: 'Reset', handler: function() { this.up('form').getForm().reset(); } }, { text: 'Submit',
ExtJS快速入门
TabPanel简介 如何创建Tab 编程控制TabPnael中的内容
成都传智播客
布局Layout
什么是布局Layout 布局Layout示例 border布局 column布局 form布局 fit布局 accordion布局
成都传智播客
ExtJS学习方法
掌握ExtJS组件的特点 善于使用API文档 使用Examples 查看ExtJS源代码 提高Javascript编程语言
成都传智播客
实战练习1
完成一个用户界面布局
成都传智播客
实战练习2
完成一个主应用程序框架 包括菜单，主区域，点打菜单打开一个界面。
成都传智播客教学现场!
传智播客学员正在听课
成都传智播客
成都传智播客教学现场!
成都传智主讲教师蔡世友老师在上课
成都传智播客
成都传智播客教学现场!
蔡世友老师在andorid课堂上指导学生实战
成都传智播客
成都传智播客师资团队!
Logo，时间，欢迎信息
菜单 功能1 功能2 功能3
主区域
成都传智播客
作业
完成如下的界面布局
成都传智播客
结束语
热烈欢迎大家到成都传智播客免费 领取Java学习视频光盘； 热烈欢迎大家到成都传智播客教学 现场免费试听Java及3G课程！
热烈欢迎各软件公司到成都传智 播客预定和招聘软件开发人才！
Viewport及Window
Viewport
Viewport代表整个浏览器窗口，直接渲染到document.body节点，取代页面中的所有内容。
一般作为应用程序主界面。
Extjs教程_第一章_起步
第一章起步在这章里，我们将介绍ExtJS的基本功能。
如果你对web开发熟悉的话，您会惊诧于ExtJS框架的优雅！不同其他的JavaScript库，ExtJS为您的开发夯实了基础，只需几行代码，你就可以制作出丰富的用户界面。
本章包括：1. ExtJS的功能和您将会喜爱上它的原因；2. 如何获得Ext并在web应用中采用它；3. 采用”适配器(adapters)“使得Ext和其他的JavaScript库共存；4. 充分利用AJAX技术；5. 在您的语言中展示ExtJS对象；关于Ext：我们采用最新的的Ext 2.x版本，1.x版本到2.x版本的是一个重组的过程，包括添加新的组件、重命名组件用来重新组织结构等等。
这使得1.x和2.x兼容性很低。
3.x 版本则不然，他对2.x有很强的兼容性，可以很好的联合本书中所设计的内容。
Ext的开发组决定在日后的版本发布中都做到向前兼容。
Ext库是对雅虎YUI的一个拓展，提供了它所不支持的特性：良好的API，真实的控件。
虽然YUI致力于用户界面，但是它却没有提供许多有用的功能。
Ext的产生源自于开发者、开源贡献者们将YUI扩展成一个强大的客户端应用程序库的努力。
Ext提供了一个简单丰富的用户界面，如同桌面程序一般。
这使得开发者能够把精力更多的转移到实现应用的功能上。
Ext官网上的示例会让你知道它是如何的不可思议：/deploy/dev/examples/。
其中最引人注目的一个例子就是Feed Viewer，它展示了Ext.However提供的多种特性，对于学习来说它可能太复杂了，所以现在只需你感受它带给你的精彩。
另外一个精彩的例子就是Simple Task任务跟踪程序，它加载了Google Gears的数据库。
Ext: 不仅仅是另一个JS库：Ext不仅仅是另一个JS库，实际上它可以通过适配器（adapter）和其它JS库一起工作。
我们将在本章的稍后来介绍适配器。
通常来说，我们使用Ext的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Extjs4.0.7 desktop初级搭建涉及内容：1.classes.js的拆分2.App.js和Settings.js里代码的含义3.桌面图标的换行4.一些小小的修改首先上官网上下载最新版本的Extjs，本次讲解以4.0.7版本为例，下载地址/products/extjs/download/ext-js-4.0.7/1234然后打开myeclipse新建一个web project工程，这个工程的结构如下其中core文件夹用于存放desktop的核心代码css文件夹用于存放样式表ext文件夹用于存放ext-all.js等images文件夹用于存放desktop实例中imagesmodules文件夹用于存放桌面上显示的模块resources文件夹用于存放desktop实例自带的壁纸文件夹wallpapers 和Extjs中resources下的themes文件夹接下来把App.js,Settings.js和index.jsp(即desktop.html)放在webroot 目录下面一．classes.js的拆分：首先来看一下index.jsp中的代码<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>extjs4 desktop</title><!-- css --><link rel="stylesheet"type="text/css" href="js/css/ext-all.css"/><link rel="stylesheet"type="text/css" href="js/css/desktop.css"/><!-- base js --><script type="text/javascript"src="js/ext/ext-all.js"></script><script type="text/javascript"src="js/ext/ext-lang-zh_CN.js"></script> <!-- core js --><script type="text/javascript"src="js/core/Module.js"></script><script type="text/javascript"src="js/core/Video.js"></script><script type="text/javascript"src="js/core/Wallpaper.js"></script> <script type="text/javascript"src="js/core/FitAllLayout.js"></script> <script type="text/javascript"src="js/core/StartMenu.js"></script> <script type="text/javascript"src="js/core/TaskBar.js"></script><script type="text/javascript"src="js/core/ShortcutModel.js"></script> <script type="text/javascript"src="js/core/Desktop.js"></script><script type="text/javascript"src="js/core/App.js"></script><!-- module js --><script type="text/javascript"src="modules/WallpaperModel.js"></script> <script type="text/javascript"src="modules/VideoWindow.js"></script> <script type="text/javascript"src="modules/BogusModule.js"></script> <script type="text/javascript"src="modules/BogusMenuModule.js"></script> <script type="text/javascript"src="modules/TabWindow.js"></script> <script type="text/javascript"src="modules/GridWindow.js"></script> <script type="text/javascript"src="modules/AccordionWindow.js"></script> <script type="text/javascript"src="modules/SystemStatus.js"></script><script type="text/javascript"src="modules/Notepad.js"></script><!-- config js --><script type="text/javascript"src="Settings.js"></script><script type="text/javascript"src="App.js"></script> <script type="text/javascript">Ext.Loader.setPath({'Ext.ux.desktop': 'js',MyDesktop: ''});Ext.require('MyDesktop.App');var myDesktopApp;Ext.onReady(function () {myDesktopApp = new MyDesktop.App();});</script></head><body><a href=""target="_blank"alt="Powered by Ext JS"id="poweredby"><div></div></a></body></html>其实有了这段代码就算是拆分完了，但是还不够，我们还需要修改两个地方，1.settings.js中修改2.App.js中修改以上两处如果不改当你在桌面上点击右键来改变桌面背景图片时会发生错误。
运行之后的效果图：如下二．App.js中部分代码的含义Ext.define此方法官方给出的解释是用来定义或重写一个类，相当于接下来看看requires在实例化MyDesktop.App之前将会加载requires列表里的类，但是我在实际的运行中发现去了这一段也没有什么不妥。
模块初始化，这一段我没什么好说的接下来这一段比较关键，这是桌面要加载的模块，一般这的模块都应该存储在数据库中，每次程序启动的时候加载，模块只有从这里加载了，我们在点击桌面上或快捷栏上的图标时才会弹出相应的窗体，在这里加载的模块首先会在开始菜单中显示，要在其他地方如桌面上，快捷栏上显示就要通过其他的配置。
接下来看一下桌面图标的配置getDesktopConfig这个方法分为三块：1,.contextMenuItems用来配置桌面上的右键菜单2.shortcuts用来配置桌面的图标（模块）3.wallpaper用来配置桌面的起始背景1,3没什么好说的，看一下shortcuts，发现他是一个store，而我们需要配置的就是这个store中的data数据。
data中的一条数据包含三部分其中name是要显示在桌面上图标的名字iconCls指的是图标的样式，这个样式存储在desktop.css中，当然我们也能把它单独的拿出来建立一个新的modules.css放在modules文件夹下，来配置各模块的图标。
.accordion-shortcut {background-image: url(../images/im48x48.png);}module指的是每个模块的id，不能重下一个方法是用来配置开始菜单旁边的快捷栏的主要来看一下这个方法里的quickstart，这里的name字段将会作为快速启动栏里每个模块的tooltip属性（自我理解）iconCls也是存放在desktop.css里的图标样式，你也可以把这种样式移植到modules.css中去.icon-grid {background-image:url( ../images/grid.png )!important; }module指的也是每个模块的id，不能重App.js想要说的也就这些东西。