Ext⼊门学习系列（⼀）环境配置⼀、EXT是什么？1. Ext是⼀个Ajax框架，可以⽤来开发带有华丽外观的富客户端应⽤，使得我们的b/s应⽤更加具有活⼒及⽣命⼒，提⾼⽤户体验；2. Ext是⼀个⽤javascript编写，与后台技术⽆关的前端ajax框架。
因此，可以把Ext⽤在.Net、Java、Php等各种开发语⾔开发的应⽤中；3. Ext是⾯向对象的；4. Ext没有你想象中的那么难；⼆、Ext从哪⾥获取？解压后有50M⼤⼩，⾥⾯包含了很多其他的⽂档。
三、Ext环境怎么搭建？我们只需要从⾥⾯找出⾃⼰需要的⽂件即可。
按照顺序在根⽬录下找到ext-all.js（最主要的Ext代码库⽂件），然后在adapter/ext/⽬录下找到ext-base.js（EXT的适配器），接下来就需要找语⾔⽂件了名字叫“ext-lang-zh_CN.js”，最后需要把整个样式表⽂件夹找到，在resources ⽂件夹中。
把所有找到的⽂件全部复制到我们需要的⽂件夹下，暂定为Ext⽂件夹，则该⽂件夹下⾯的⽬录结构应该如：我们的站点⽂件放在上级⽬录，如：到此为⽌，环境配置基本完毕。
四、Ext代码怎么写？接下来我们⼀起来写⼀个测试例⼦，因为是JS库，所以⽹页中要做的第⼀件事情就是添加引⽤，在需要⽤到Ext的页⾯源⽂件头部加上：<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> //引⼊样式<script type="text/javascript" src="Ext/ext-base.js"></script>//引⼊适配器<script type="text/javascript" src="Ext/ext-all.js"></script>//引⼊主⽂件<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>//语⾔包接下来才可以正式写，先来⼀个测试：<script type="text/javascript">function start(){Ext.MessageBox.alert("测试","看我漂亮不!");}Ext.onReady(start);//所有的程序都是从这⾥开始执⾏，⾥⾯写函数名</script>如果在VS2010中上⾯的代码是可以直接点出来的，所有代码以Ext开始，如果想弹个对话框，就选Message即可。
目录Ext框架之button (2)Extjs buttons 的用法： (2)button的配置： (3)常用的方法： (4)Extjs框架之window组件 (6)属性： (6)方法 (6)事件 (6)应用举例 (6)Ext框架之buttonExtjs buttons 的用法：Ext.QuickTips.init();var buttonName = new Ext.Button({id:"buttonName",text:"Button组件基本用法",tooltip:"提示信息：Button组件基本用法",//提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();tooltipType:"title", //定义显示提示信息的类型，有qtip和title两种方式，默认是qtiptype:"button", //按钮类型：可以是submit, reset or button 默认是buttonautoShow:true, //默认false,自动显示Array hidden:false, //默认false，是否隐藏hideMode:"offsets", //隐藏方式，默认display,可以取值：display，offsets，visibilitycls:"cssButton", //样式定义,默认""disabled:false, //是否可用，默认falsedisabledClass:"", //默认x-item-disabledenableToggle:true, //默认falsepressed:false, //设置按钮是否已经被按下，默认是falsehtml:"Ext",//默认""handleMouseEvents:true, //默认true,如果为false,那么mouseoutmouseover 就不能被触发//x:number,y:number,在容器中的x,y 坐标handler:function(){Ext.Msg.alert('提示消息框','测试Button 组件：handler 事件！');},//添加事件listeners:{//添加监听事件 可以结合handler 测试这两个事件哪个最先执行"click":function(){Ext.Msg.alert('提示消息框','测试Button 组件：listeners 事件！');Ext.getCmp("buttonName").hide();//隐藏按钮}},cls:"x-btn-text-icon",//添加图标前需要设置该属性icon:"house.gif", //图标的地址//plugins : Object/Array 扩展插件时使用repeat:false, //默认false ,如果为true,需要设置mouseover 事件renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID}); button 的配置：1. id:"buttonName",2. text:"Button 组件基本用法",3. tooltip:"提示信息：Button 组件基本用法", //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();4. ooltipType:"title", //定义显示提示信息的类型，有qtip 和title 两种方式，默认是qtip5. ype:"button", //按钮类型：可以是submit, reset or button 默认是button6. autoShow:true, //默认false,自动显示7. hidden:false, //默认false ，是否隐藏8. hideMode:"offsets", //隐藏方式，默认display,可以取值：display ，offsets，visibility9. cls:"cssButton", //样式定义,默认""10. disabled:false, //是否可用，默认false11. disabledClass:"", //默认x-item-disabled12. enableToggle:true, //默认false13. pressed:false, //设置按钮是否已经被按下，默认是false14. html:"Ext",//默认""15. handleMouseEvents:true, //默认true,如果为false,那么mouseoutmouseover就不能被触发16. x:number,y:number,在容器中的x,y坐标17. handler:function(){Ext.Msg.alert('提示消息框','测试Button组件：handler事件！');},//添加事件18. listeners:{//添加监听事件可以结合handler测试这两个事件哪个最先执行"click":function(){Ext.Msg.alert('提示消息框','测试Button组件：listeners事件！');Ext.getCmp("buttonName").hide();//隐藏按钮}},19. cls:"x-btn-text-icon",//添加图标前需要设置该属性20. icon:"house.gif", //图标的地址21. plugins : Object/Array 扩展插件时使用22. repeat:false, //默认false ,如果为true,需要设置mouseover事件23. renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID常用的方法：1. enable();激活按钮2. disable();禁用按钮3. destroy();消灭按钮4. focus();按钮获取焦点5. getText();获取按钮上的文本6. hide();隐藏按钮7. show();显示按钮8. setText( String text );设置按钮上的文本9. setVisible( Boolean visible );设置按钮是否隐藏10. buttonName.purgeListeners();//使用该方法，意思是清除所有的监听事件，所以当执行该句后就不会再执行listeners的click事件了。
Extjs、雅虎UI库、jQuery—js框架介绍ExtJSExtJS是一个Javascript库，功能强大，界面美观，可以使用Ajax, DHTML，DOM等技术开发网络应用程序。
历史最初的ExtJS只是YUI的一个扩展包，从1.1版开始独立发布。
它是一个开源软件，遵守GPL 3.0协议。
许可证Extjs之前使用LGPL和商业授权的双重协议，在08年时改成了现在使用的GPL和商业授权的双重协议，也遵守其他的开源软件协议。
功能描述Ext包括多种控件，可以实现各种各样的功能文本框和文本域控制，可以控制文本框和文本域中的内容过滤，实现所见即所得的编辑形式。
单选框和复选框控制Grid control(表格控件)：可以轻松的实现表格数据统计，拖放。
树形控制：生成树形目录，编辑管理树，点击展开或是关闭。
Tabs：可活动的标签页，标签页组，可自由添加和删除的标签页，功能丰富。
工具条：在面板中可以方便的插入顶部工具条或是底部工具条，实现各种复杂的功能。
桌面应用程序菜单：可以制作类似于Windows桌面的网页菜单。
灵活的面板布局：将一个面板划分为东南西北中(ESWNC)五个部分，每个部分可以放不同的内容。
滚动条：用滚动条来控制数据的显示。
Flash图表：flash制作的数据图表功能。
优点和不足Ext整合了CSS样式文件，窗口、面板都有现成的样式，甚至都不需要美工进行特别的美化就可以直接使用。
功能涵盖了一个Web 2.0网站所需要的几乎所有的功能，非常完备。
但是相应的文件大，加载速度并不理想，而且在低版本的浏览器上显示效果不佳。
学习网站：雅虎UI库雅虎UI库 (Yahoo! UI Library，YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX，DHTML 和 DOM 等程式码技术。
它也包含了许多 CSS 资源。
使用授权为 BSD许可证.功能YUI 包含完整的说明文件。
ExtJS框架培训●1、ExtJS 简介●2、ExtJS 基础组件●3、ExtJS组件之Panel●4、ExtJS 4.0布局●5、ExtJS与后台交互ExtJS简介●什么是ExtJS？•ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建用户界面，且与后台技术无关的前端Ajax框架。
ExtJS 简介●ExtJS显示效果示例1ExtJS简介●ExtJS显示效果示例2ExtJS简介●认识ExtJS的开发包要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站/下载。
下载地址是/products/extjs/downloa dExtJS简介●ExtJS4.0开发包的文件目录结构ExtJS简介●以下为其主要资源的简单介绍•builds：ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。
•docs：ExtJS的文档，其中最重要的是ExtJS的API。
•examples：官方的演示示例，通过对这些演示示例的熟悉，就能很快掌握ExtJS开发。
•locale：多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。
•pkgs：ExtJS各部分功能的打包文件。
•resources：ExtJS要用到的图片文件和样式表文件。
•src：目录是未压缩的源代码目录。
•bootstrap.js：Extjs库的引导文件，通过参数可以自动切换ext_all.js和ext_all_debug.js。
•ext_all.js：ExtJS的核心库，是必须要引入的。
•ext_all_debug.js：ext_all.js的调试版。
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>ExtJS简介●HelloWorld运行效果如下图:ExtJS简介●ExtJS拦路虎•问题1：导入js文件后，在js文件中定义的中文显示在页面后出现乱码。
