2、使用Ext.panel.Panel--创建面板

3、使用Ext.toolbar.ToolBar--创建工具条

4、使用Ext.tab.Panel--创建Tab面板

5、使用Ext.container.Viewport--整体布局

6、使用Ext.window.Window--创建窗口

7、使用Ext.window.MessageBox--创建对话框

8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker实现特殊菜单项

9、使用Ext.Ation--创建按钮

10、使用Ext.ProgressBar--创建进度条

11、使用Ext.slider.Single--创建滑动条

12、使用Ext.Img--创建图片

13、使用Ext.Editor--创建编辑器

14、使用Ext.tip.ToolTip--创建提示

15、使用Ext.QuickTipManager和Ext.tip.QuickTip--创建提示

16、使用Ext.ux.GMapPanel实现Google地图

17、使用Ext.form.field.ComboBox--创建复合框

18、使用Ext.data.Store与Ext.data.Model管理数据

19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader读取数据

20、使用Ext.grid.Panel--生成表格

21、使用Ext.grid.column.Column-定义列

22、使用Ext.grid.Panel显示远程数据

23、使用Ext.tree.Panel生成数

xtype Class 描述

button Ext.Button 按钮

splitbutton Ext.SplitButton 带下拉菜单的按钮

cycle Ext.CycleButton 带下拉选项菜单的按钮

buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)

slider Ext.Slider 滑动条

progressExt.ProgressBar 进度条

statusbar Ext.StatusBar 状态条，2.2加进来，3.0 又去了

colorpaletteExt.ColorPalette调色板

datepicker Ext.DatePicker 日期选择面板

xtype Class 描述

window Ext.Window 窗口

viewportExt.ViewPort视口，即浏览器的视口，能随之伸缩

box Ext.BoxComponent盒子组件，相当于一个 <div>

component Ext.Component 组件

container Ext.Container 容器

panel Ext.Panel 面板

tabpanelExt.TabPanel选项面板

treepanel Ext.tree.TreePanel 树型面板

flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)

gridExt.grid.GridPanel 表格

editorgrid Ext.grid.EditorGridPanel可编辑的表格

propertygridExt.grid.PropertyGrid 属性表格

editor Ext.Editor 编辑器

dataviewExt.DataView数据显示视图

listviewExt.ListView列表视图

xtype Class 描述

paging Ext.PagingToolbar 分页工具条

toolbar Ext.Toolbar 工具栏

tbbuttonExt.Toolbar.Button 工具栏按钮

tbfill Ext.Toolbar.Fill工具栏填充区

tbitem Ext.Toolbar.Item工具条项目

tbseparator Ext.Toolbar.Separator 工具栏分隔符

tbspacerExt.Toolbar.Spacer 工具栏空白

tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮

tbtext Ext.Toolbar.TextItem工具栏文本项

xtype Class 描述

menuExt.menu.Menu 菜单

colormenu Ext.menu.ColorMenu 颜色选择菜单

datemenuExt.menu.DateMenu 日期选择菜单

menubaseitemBaseItem

menucheckitem Ext.menu.CheckItem 选项菜单项

menuitemExt.menu.Item

menuseparator Ext.menu.Separator 菜单分隔线

menutextitemExt.menu.TextItem 文本菜单项

xtype Class 描述

formExt.FormPanel/Ext.form.FormPanel表单面板

checkboxExt.form.Checkbox 多选框

combo Ext.form.ComboBox 下拉框

datefield Ext.form.DateField 日期选择项

timefield Ext.form.TimeField 时间录入项

field Ext.form.Field 表单字段

fieldsetExt.form.FieldSet 表单字段组

hidden Ext.form.Hidden 表单隐藏域

htmleditor Ext.form.HtmlEditor HTML 编辑器

label Ext.form.Label 标签

numberfield Ext.form.NumberField数字编辑器

radio Ext.form.Radio 单选按钮

textareaExt.form.TextArea 多行文本框

textfield Ext.form.TextField 表单文本框

trigger Ext.form.TriggerField 触发录入项

checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)

displayfieldExt.form.DisplayField 仅显示，不校验/不被提交的文本框

radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)

xtype Class 描述

chart Ext.chart.Chart 图表组件

barchartExt.chart.BarChart 柱状图

cartsianchart Ext.chart.CartesianChart

columnchart Ext.chart.ColumnChart

linechart Ext.chart.LineChart 连线图

piechartExt.chart.PieChart 扇形图

xtype Class 描述

arraystore Ext.data.ArrayStore

directstore Ext.data.DirectStore

groupingstore Ext.data.GroupingStore

jsonstore Ext.data.JsonStore

simplestore Ext.data.SimpleStore

store Ext.data.Store

xmlstoreExt.data.XmlStore

js：

<script language="JavaScript" type="text/JavaScript">

var img=null

function checkPic(Form1){

var location=Form1.pic.value

if(location==""){

alert("友情提示：\n\n请先选择图片文件，然后再点击“上传照片”按钮。")

window.location.href=window.location.href

return false

}

var point = location.lastIndexOf(".")

var type = location.substr(point)

if(type==".jpg"||type==".gif"||type==".png"||type==".JPG"||type==".GIF"||type==".PNG"){

img=document.createElement("img")

img.style.position="absolute"

img.style.visibility="hidden"

document.body.insertAdjacentElement("beforeend",img)

img.src=location

//if(img.fileSize>35540)

if(img.fileSize>102400) {

alert("友情提示：\n\n您上传的图片尺寸超过了网站的限定，请不要大于102400字节，宽度小于450px。\n\n您目前上传的图片宽度："+img.offsetWidth+"px，高度："+img.offsetHeight+"px，图片大小："+img.fileSize+"字节。\n\n请调整到规定大小再上传！谢谢合作！")

window.location.href=window.location.href

return false

}else

return true

}

else{

alert("友情提示：您要上传的图片格式不对！\n\n只能输入jpg、png或者gif格式的图片，\n\n请重新选择图片！谢谢合作！")

window.location.href=window.location.href

return false

}

return true

}

function changesrc(){

yourpic.src=Form1.pic.value

}

</script>

后台：

<%

set upload=new upload_file

if upload.form("act")="uploadfile" then

filepath=trim(upload.form("filepath"))

filelx=trim(upload.form("filelx"))

i=0

for each formName in upload.File

set file=upload.File(formName)

fileExt=lcase(file.FileExt) '得到的文件扩展名不含有.

if file.filesize<100 then

response.write "<span style=""font-family: 宋体font-size: 9pt"">请先选择你要上传的文件！　[ <a href=# onclick=history.go(-1)>重新上传</a>]</span>"

response.end

end if

if (filelx<>"swf") and (filelx<>"jpg") then

'response.write "<span style=""font-family: 宋体font-size: 9pt"">该文件类型不能上传！　[ <a href=# onclick=history.go(-1)>重新上传</a>]</span>"

'response.end

response.write "<script language='javascript'>" &VbCRlf

response.write "alert('友情提示：\n\n您上传出错啦！该文件类型不能上传！\n\n请重新选择文件再上传，请点击“确定”重新输入！')" &VbCrlf

response.write "history.go(-1)" &vbCrlf

response.write "</script>" &VbCRLF

response.end

end if

if filelx="swf" then

if fileext<>"swf" then

'response.write "<span style=""font-family: 宋体font-size: 9pt"">只能上传swf格式的Flash文件！　[ <a href=# onclick=history.go(-1)>重新上传</a>]</span>"

'response.end

response.write "<script language='javascript'>" &VbCRlf

response.write "alert('友情提示：\n\n您上传出错啦！只能上传swf格式的Flash文件！\n\n请重新选择文件再上传，请点击“确定”重新输入！')" &VbCrlf

response.write "history.go(-1)" &vbCrlf

response.write "</script>" &VbCRLF

response.end

end if

end if

if filelx="jpg" then

if fileext<>"gif" and fileext<>"jpg" and fileext<>"png" then

'response.write "<span style=""font-family: 宋体font-size: 9pt"">只能上传jpg或gif格式的图片！　[ <a href=# onclick=history.go(-1)>重新上传</a>]</span>"

'response.end

response.write "<script language='javascript'>" &VbCRlf

response.write "alert('友情提示：\n\n您上传出错啦！只能上传jpg、png或gif格式的图片！\n\n请重新选择文件再上传，请点击“确定”重新输入！')" &VbCrlf

response.write "history.go(-1)" &vbCrlf

response.write "</script>" &VbCRLF

response.end

end if

end if

if filelx="swf" then

if file.filesize>(3000*1024) then

'response.write "<span style=""font-family: 宋体font-size: 9pt"">最大只能上传 3M 的Flash文件！　[ <a href=# onclick=history.go(-1)>重新上传</a>]</span>"

'response.end

response.write "<script language='javascript'>" &VbCRlf

response.write "alert('友情提示：\n\n您上传出错啦！最大只能上传 300k 的Flash文件！\n\n请重新选择文件再上传，请点击“确定”重新输入！')" &VbCrlf

response.write "history.go(-1)" &vbCrlf

response.write "</script>" &VbCRLF

response.end

end if

end if

if filelx="jpg" then

if file.filesize>(200*724) then

'response.write "<span style=""font-family: 宋体font-size: 9pt"">最大只能上传 1000K 的图片文件！　[ <a href=# onclick=history.go(-1)>重新上传</a>]</span>"

'response.end

response.write "<script language='javascript'>" &VbCRlf

response.write "alert('友情提示：\n\n您上传的图片尺寸超过了网站的限定，最大只能上传 600K 的图片文件！\n\n请将图片调整到宽度为：450px，小于规定大小再上传！\n\n请点击“确定”重新输入！')" &VbCrlf

response.write "history.go(-1)" &vbCrlf

response.write "</script>" &VbCRLF

response.end

end if

end if

%>

要注意与上传控件一起配合好才行的。 有问题找偶。

答： 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的，从来就没有用过这些东西·