Extjs4.0.7 desktop基础搭建

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是一个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布局详解序⾔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框架简介 (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的各种控件。

第一章起步在这章里，我们将介绍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的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。

入门环境要求浏览器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是否定义。

ExtJS开发步骤说明一. 准备工作：1.1 ExtJS所需文件列表首先将ExtJS的相关源代码,置于项目WebRoot目录下,目录结构如下：----WebRoot----extEngine----adapter----builder----resources----sourceext-all.jsext-all-debug.jsext-core.jsext-back-format.jsext-core-debug.js(从CVS上check的代码中已包含这部分代码)1.2 开发时页面可能需要的资源1．必须的Ext相关的资源：extEngine/ext-all.jsextEngine/adapter/ext/ext-base.jsextEngine/resources/css/ext-all.cssjs/ext-lang-zh_CN-GBK.js (汉化)2．分页js：js/PagingToolbarExt.js3. 关闭tab页js：js/TabCloseMenu.js4. 页面共用的js：js/b2bcommon.js5. 相关css文件：css/b2b-grid.css6. 文件上传js:b2b/Ext.ux.UploadDialog.js二．实例开发：下面以产品中心——产品——产品信息查询为例：概述整个页面布局是ExtJS的border布局：north-west-center-south主面板为一个TabPanel, 位于主页面的一个id为center的div，也就是页面右边的区域2.1主页面index.jsp<script type=”text/javascript”>va r mainPanel = ne w Ext.TabPane l({i d:"mai n",titl e:"主工作区",regio n:"cente r", //位于center区域deferredRende r:fal se,enableTabScrol l:tr ue, //可以滚动activeTab: 0,autoDestro y: fal se,item s:{titl e:'我的工作台',i d:'tod o',xtyp e:'porta l',items:[{columnWidth:.37,styl e:'padding:10px 0px 0px 10p x',items:[{title: '待办事宜列表',layou t:'fi t',tools: tools,items: ne w SampleGrid([0, 2, 3])},{title: '系统通知',tools: tools,html: systemNotice}]},{columnWidth:.37,styl e:'padding:10px 0px 0px 10p x',items:[{title: '产品信息',layou t:'fi t',tools: tools,items: ne w FileInfoGrid([0, 1, 2, 3])},{title: '审批通知',tools: tools,html: Ext.example.shortBogusMarkup}]},{columnWidth:.24,styl e:'padding:10px 0px 10px 10p x',items:[{title: '日历',item s:ne w My.ExtCalendar(),draggabl e:fal se,collapsibl e:false},{title: '采购通知',tools: tools,html: Ext.example.shortBogusMarkup}]}]},plugins: ne w Ext.ux.TabCloseMenu() //tabPanel设置可以关闭插件 });//通过tabFrame.jsp中的iframe,向主面板中添加tab页functio n addTab(id,tabTitle, targetUr l){mainPanel.ad d({id:id,title: tabTitle,iconCls: 'tab s',autoLoad: {url: "tabFrame.jsp?url="+targetUrl, scope: thi s},autoScrol l:fal se,closable:true}).show();}//tabFrame.jsp的代码如下：//<%@ page language="java" pageEncoding="utf-8"%>//<%@taglib uri="/jsp/jstl/core" prefix="c"%>//<IFRAME SRC="${param.url}" width="100%" height="100%" frameborder="0"></IFRAME> //tabFrame.jsp 是通过iframe加载页面到center区域中//更新tab页functio n updateTab(id,title, url) {va r tab = mainPanel.getItem(id);if(ta b){ //如果tab页已存在，就先删除mainPanel.remove(tab);}tab = addTab(id,title,url); //添加tab页mainPanel.setActiveTab(tab); //将当前的tab页置为活动的，即在center区域中显示当前的tab页}//ExtJS代码的执行写在Ext.onReady(function(){ js代码块});Ext.onReady(function(){//设置显示提示Ext.QuickTips.init();//设置cookieExt.state.Manager.setProvider(new Ext.state.CookieProvider());//创建产品中心导航栏的根结点var root = new Ext.tree.TreeNode({id:'productCenter', //根结点id,在一个页面上要保证唯一text:'产品中心', //根结点名称expanded:true //展开此结点，缺省为false});//创建产品分支结点var productNode = new Ext.tree.TreeNode({id:'product',text:'产品',expanded:true});//创建产品信息查询叶子结点var productSearchNode = new Ext.tree.TreeNode({id:'productInfo',text:'产品信息查询',leaf:true, //叶子结点icon:'images/other/class.gif', //图标cls:"x-btn-text-icon" //样式});//创建产品历史查询叶子结点var productHistoryNode = new Ext.tree.TreeNode({id:'productHistory',text:'产品历史查询',leaf:true,icon:'images/other/class.gif'});//将“产品信息查询”叶子结点添加到分支结点“产品“上productNode.appendChild(productSearchNode);//将“产品历史查询”叶子结点添加到分支结点“产品“上productNode.appendChild(productHistoryNode);//将“产品“分支结点添加到树根”产品中心“上root.appendChild(productNode);//创建产品中心Panelvar productPanel = new Ext.Panel({contentEl: 'west_1', //productPanel定位于页面的一个id为‘west_1’的div title:'产品中心', //显示在viewPort左侧导航栏上的标题border:false, //有无边框iconCls:'nav', //设置图标样式animate:true, //是否有动画显示效果items:[productTree], //将“产品中心“树添加到此面板中cls:"x-btn-text-icon" //指定样式});//给“产品中心“树添加Click事件监听productTree.on("click",function (node){var id = node.id; //树结点的id//如果点击了“产品中心“或”产品“结点，就返回if(id=="productCenter"||id=="product")return;//如果点击了“产品查询“结点,就在右边的center区域显示part.jspif(id=="productInfo"){ //产品信息查询（添删改查）updateTab("productInfo","产品信息查询","${pageContext.request.contextPath}/b2b/part.jsp");}else if(id=="productHistory"){ //产品历史查询-按产品查询（添删改查）updateTab("productHistory","产品历史查询","${pageContext.request.contextPath}/b2b/partEvent.jsp");}mainPanel.doLayout(); //呈现页面});//定义一个Viewport,Viewport代表整个浏览器显示区域，其布局指定为boder布局va r viewport = ne w Ext.Viewpor t({layou t:'borde r',items:[ne w Ext.BoxComponen t({ //设置viewport的north区域regio n:'nort h', //定位在north区域,即页面顶部el: 'nort h',height:32}),ne w Ext.BoxComponen t({ //设置viewport的south区域regio n:'sout h', //定位在south区域,即页面底部el: 'sout h',height:20}),{ //设置west区域,即左边导航栏区域regio n:'wes t', //定位在west区域,即左边i d:'west-pane l',titl e:'B2B管理系统',cl s:"x-btn-text-ico n",spli t:tr ue,iconCl s:'forwar d',width: 200,minSize: 175,maxSize: 400,collapsible: tr ue,margin s:'0 0 0 5',layou t:'accordio n', //指定布局layoutConfi g:{animat e:true},//将导航栏的面板和mainPanel添加到viewport中items:[todoPanel,productPanel,orderPanel,storagePanel,systemPanel,userInfoPanel,helpPanel] },mainPanel]});});</script><div id="west"><ul id="west_1" class="munuList"></ul><ul id="west_2" class="munuList"></ul><ul id="west_3" class="munuList"></ul><ul id="west_4" class="munuList"></ul><ul id="west_5" class="munuList"></ul><ul id="west_6" class="munuList"></ul><ul id="west_7" class="munuList"></ul></div><div id="north"></div><div id="south"></div><div id="center"></div>2.2 产品信息查询页面产品信息查询页面主要包括：查询表单PartSearchForm和产品信息面板ProductPanel。

ext入门手册Ext JS 学习笔记目录1开始EXTJS (1)1.1获取EXTJS (1)1.2应用EXTJS (1)1.3演示H ELLO W ORD (2)2组件的介绍和应用 (3)2.1介绍 (3)2.2应用 (5)2.2.1简单示例 (5)2.3组件详解 (7)2.3.1EXT.Panel (7)2.3.2布局控件 (9)2.3.3表格控件 (13)2.3.4树形控件 (15)2.3.5表单控件Form (19)2.3.6弹出窗口 (22)3EXT核心 (28)3.1E XT.E LEMENT (28)3.2CSS样式操作 (30)3.1DOM操作 (31)3.1A JAX介绍 (36)1开始extjs1.1获取extjs要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/doc/3d9942416.html/download，把下载得到的ZIP压缩文件解压可以看到如下目录和文件1.2应用extjs应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。

因此，要使用ExtJS框架的页面中一般包括下面几句：<="" bdsfid="99" p="" rel="stylesheet" type="text/css"/> href="extjs/resources/css/ext-all.css" />在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：1.3演示HelloWord<="" bdsfid="123" p="" rel="stylesheet" type="text/css"/> href="extjs/resources/css/ext-all.css" />2组件的介绍和应用2.1介绍组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

ExtExtjs js入门教程1.前言Ext是一款优秀的Ajax框架，目前已经出道了4.x版本。

可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。

ExtJS 是一个用javascript编写，与后台技术无关的前端ajax框架。

因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。

这次培训的目的：对Ext有一个大体的了解，并且掌握进一步学习的方法。

2.JS基础要学好Ext必须对JS有一定的了解。

2.1闭包所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。

看下面这段代码：function a(){var i=0;function b(){alert(++i);}return b;}var c=a();c();这段代码有两个特点：1）函数b嵌套在函数a内部；2）函数a返回函数b。

这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。

这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

闭包的应用场景：1)保护函数内的变量安全。

以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。

2)在内存中维持一个变量。

依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。

以上两点是闭包最基本的应用场景，很多经典案例都源于此。

Ext中也存在许多这样的情况。

2.2对象简单的声明一个对象var Person={name:"刘德华","年龄":50,address:"中国"};var personObj=new Object();personObj.firstname="John";stname="Doe";personObj.age=50;personObj.eyecolor="blue";构造对象的方式有以下几种:1构造方式function User(){ername="zhangsan";//this.不能丢this.say=function(){//this.不能丢alert("username:"+ername);//this.不能丢}//下面注释的这种写法不对//function say(){//alert("username:"+ername);//}}var user=new User();ername="lisi";user.say();//username:lisivar user1=new User();user1.say();//username:zhangsan,不受user对象的影响//多个实例对象不共享类的属性值，如下:function User(){ername=new Array();//this.不能丢this.say=function(){//this.不能丢alert("username:"+ername);//this.不能丢}}var user=new User();ername.push("zhangsan");user.say();//username:zhangsanvar user1=new User();user1.say();//user1的username为空，不为zhangsan,因为user1的属性值不受user影响优点:多个实例对象不共享类的属性值，缺点:每个实例对象都会产生出一个函数say。

使用Java开发桌面应用程序的基本步骤使用Java开发桌面应用程序的基本步骤：一、环境配置1. 确保计算机已安装Java Development Kit（JDK），版本要求为1.8或更高版本。

2. 下载并安装集成开发环境（IDE），如Eclipse、IntelliJ IDEA等。

二、项目创建1. 打开IDE，点击新建项目（New Project）按钮。

2. 在项目名称中输入一个合适的名称，并选择保存目录。

3. 选择Java应用程序（Java Application）作为项目类型，并点击下一步（Next）按钮。

4. 确认项目配置信息，点击完成（Finish）按钮。

三、界面设计1. 在项目中创建一个新的Java类，用于编写界面。

2. 在类中导入所需的包，如Swing包或JavaFX包。

3. 设计应用程序的用户界面，包括按钮、文本框、标签等组件，通过拖拽方式或手动编写代码实现。

4. 设置各个组件的属性和布局，以满足应用程序的需求。

四、事件处理1. 在Java类中实现事件监听器接口，如ActionListener、MouseListener等。

2. 重写监听器接口中的方法，编写相应的事件处理代码。

3. 将事件监听器与界面组件绑定，以响应用户的操作。

五、业务逻辑1. 在Java类中编写业务逻辑代码，处理用户的输入和输出。

2. 实现与其他类或数据库的交互，以实现应用程序的功能。

六、编译与运行1. 在IDE中点击编译（Build）或运行（Run）按钮，编译和运行应用程序。

2. 根据需要进行调试和测试，修复错误和优化代码。

七、打包与发布1. 在IDE中选择打包（Export）功能，将应用程序打包成可执行的程序文件。

2. 选择合适的打包格式，如JAR或EXE等。

3. 进行必要的配置和设置，如指定主类和类路径等。

4. 点击打包（Package）按钮，生成最终的发布文件。

以上就是使用Java开发桌面应用程序的基本步骤。

概念：（1）ExtJS是一个面向开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。

（以前是基于YAHOO-UI ,现在已经完全独立了）（2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去写庞大js实现；它是一种纯面向对象的JS框架。

扩展性相当的好，可以自己写扩展，自己定义命名空间，web应用可能感觉太大，不过您可以根据需要按需动态的加载您想要的类库就可以了，避免了网络传输流量问题。

（3）它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧，更重要的是它核心的组件基本覆盖了我们构建富客户端的常用的组件以及各种功能，在统计方面做的也非常出色。

（4）在3.0的时候提供了类似与dwr的方式调用后台代码，交互更加简单;4.0版本又提出了MVC模式的开发，支持组件化、模块插拔化设计以及提供本地数据源的支持。

第一章 EXTJS的基本概念1. 组件component : 能够以图形化形式呈现界面的类，其中还可以分为容器组件与元件组件。

∙容器组件:能够包含其它容器或者元件组件的类，其是进行单元化组件开发的基础∙元件组件：能图形化形式表现一个片面功能的组件，其不仅在实现了原有传统WEB程序的现有组件，而且还扩展了许多实用的组件，如刻度器、日历、树形列表等。

2. 类提供功能的非图形可形的类，它们为图形类提供了有力的支持按其功能可分为：数据支持类(Data)、拖放支持类（DD）、布局支持类（layout）、本地状态存储支持类（state）、实用工具类（Util）。

密封类：不能被扩展的类原型类：扩展了javascript标准类库中的类3. 方法作为类的功能体现，能够产生改变对象本身产生变化的直接因素方法按访问形式可分为公有方法与私有方法。

但由于javascript从原理上根本不支持这种结构，因此在EXTJS中，私有与公有方法完全凭借着用户自觉，没有像JAVA那样的强制性。

Extjs一路走来可谓风光无限！现在的extjs最新版本已经到了4.07，下载地址：/products/extjs现在说下版权问题，商用是要收费的，个人学习研究是免费的GPL3的许可证.其余不多说！现在完之后解压，解压后的目录结构如下图所示：不多说，一步一步来。

环境的搭建：建立web工程（当然本地工程也可以）—>在web目录下新建extjs 目录—>复制extjs4.0的解压文件中bootstrap.js,ext-debug-all.js,ext-all.js以及resource目录到此目录下，目录结构图如下：ok，截止目前为止所有环境ok。

现在开发HelloWorld程序！很简单只是一个HelloWorld！【需求：在页面加载完成的时候alert一个’hello’的信息】现在extjs目录下新建hello.html页面，其内容如下：<html><head><title>extjs-demo–来自的教程</title><link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/><script type="text/javascript" src="bootstrap.js"></script></head><body></body></html>在此简单解释，ext-all.css是extjs通用的css文件。

extjs本身的所有css 样式都在这里面定义，bootstrap.js文件用来加载extjs的相应js文件，其能根据是开发环境还是生产环境进行动态加载。

其在如下代码完成配置:isDevelopment = null 默认的’isDevelopment ‘是null值，如果是null则加载的是ext-all-debug.js原因如下：if (queryString.match(‘(\\?|&)debug’) !== null) {isDevelopment = true;}else if (queryString.match(‘(\\?|&)nodebug’) !== null) {isDevelopment = false;}document.write(‘<script type="text/javascript" src="’ + path +‘ext-all’ + ((isDevelopment) ? ‘-debug’ : ”) + ‘.js"></script>’);以上代码还算简单，不多费口舌了。

序言ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。

ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。

本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。

教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。

本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。

在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。

本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。

该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。

凡是购买了《ExtJS 实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。

最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。