官方下载地址：
http://extjs.com/deploy/ext-2.0.2.zip
EXT基础
ETX系列：
EXT基础
EXT表单
EXT表格
EXT事件
EXT窗口
EXT按钮事件
什么是EXT？
–Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。
–Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。
下载EXT2.0
开发人员必备的中文手册
http://extjs.org.cn/node/125
EXT学习以及资源不错的网站
http://extjs.org.cn/
下载好以后解压缩
•adapter ：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。
•build ：压缩后的ext全部源码(里面分类存放)。
•docs ： API帮助文档。
•exmaples：提供使用ExtJs技术做出的小实例。
•resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。
•source ：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。
•ext-all.js ：压缩后的Ext全部源码。
•ext-all-debug.js ：无压缩的Ext全部的源码(用于调试)。
•ext-core.js ：压缩后的Ext的核心组件，包括sources/core下的所有类。
•ext-core-debug.js ：无压缩Ext的核心组件，包括sources/core下的所有类。
第一个例子--弹出框
引入文件
- <link rel="stylesheet" type="text/css" media="all" 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>
说明：
•样式文件为resources/css/ext-all.css
•库文件主要包含两个：adapter/ext/ext-base.js及ext-all.js
•其中ext-base.js是框架基础库，ext-all.js是extjs的核心库。
要加：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 不然会中文乱码
测试
- <script type="text/javascript" language="javascript">
- Ext.onReady(function(){
- Ext.Msg.alert('系统提示','操作已经成功!');
- });
- </script>
效果图：
注意：
在进行下一步之前，我们应该为Ext提供它所需要的——空白图片。Ext需要一个1×1像素的透明gif图片，采用不同的方式来拉伸从而填补控件的宽度。我们需要如下定义该图片的路径：
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
});
您可能会问为什么需要这张图片。Ext的用户界面是依靠CSS的，但是CSS是通过为很多HTML元素提供样式来拼凑出Ext的组件的。唯一能够跨浏览器且保持精准大小的只有图片。所以图片被用来定义Ext组件的如何展现。这是Ext提供浏览器兼容性的一种主要方式。
如果没有这个，会默认从远程extjs.com下载。
获取对象节点
•getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。 (与getElementById是一个效果)
•Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
•//Html页面中包含一个id为hello的div，代码如下：
<div id="hello">aaa</div>
<div id="hello">aaa</div>
Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。
绑定
renderto是用来指明控件要渲染的节点的。每一个控件都要指明该控件需要渲染到哪一个DOM节点。
//renderTo: document.body,
renderTo:Ext.getDom("hello"),
新建一个panel
- <html>
- <head><title>Getting Started Example</title>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <link rel="stylesheet" type="text/css" media="all" 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" language="javascript">
- Ext.onReady(function(){
- var myPanel=new Ext.Panel({
- id:"myFirstPanel",
- title:"旧的标题",
- renderTo:"hello",
- width:300,
- height:200
- });
- Ext.getCmp("myFirstPanel").setTitle("新的标题");});
- </script>
- </head>
- <body>
- <div id="hello"></div>
- </body>
- </html>
效果图：
注释//Ext.getCmp("myFirstPanel").setTitle("新的标题");
再看效果：
•getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法中只有一个参数，也就是组件的id。
•getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。
也可以直接在body上增加panel
- Ext.onReady(function(){
- var myPanel=new Ext.Panel({
- id:"myFirstPanel",
- title:"旧的标题",
- renderTo:Ext.getBody(),
- width:300,
- height:200
- });
panel中增加html
- Ext.onReady(function(){
- var myPanel=new Ext.Panel({
- id:"myFirstPanel",
- title:"标题",
- renderTo:"hello",
- width:300,
- height:200,
- html:'<br> <span>http://blog.csdn.net/21aspnet/</span>'
- });
- });
基本表单
- Ext.onReady(function(){
- var movie_form = new Ext.FormPanel({
- url: 'movie-form-submit.php',
- renderTo: document.body,
- frame: true,
- title: '信息填写',
- width: 250,
- items: [{
- xtype: 'textfield',
- fieldLabel: '标题',
- name: 'title'
- },{
- xtype: 'datefield',
- fieldLabel: '日期',
- name: 'released'
- }]
- });
- });
效果图：
EXT国际化问题（自动翻译为中文）
注意这时是默认英文下的日历，需要翻译为中文环境可以引入：
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
说明：该目录也有其他对应语言，各取所需即可。
修改日历格式：
{ xtype: 'datefield', fieldLabel: 'Released', width: 250, format:'Y-m-d', name: 'released' }
日历只能选择指定日期：
{ xtype: 'datefield', fieldLabel: 'Released', disabledDays: [6,0], format:'Y-m-d', name: 'released' }
这样除了工作日（周一到周五）以外的周六和周日就不能选择了。一定要记得0代表星期日！
EXT的xtype
xtype指的是Ext.form.TextField。这里罗列出一些xtype：
· textfield 文本框 常用
· timefield 下拉时间框 不常用
· numberfield 只能输入数字 数字验证常用
· datefield 日历下拉框
· combo 下拉框
· textarea 多行文本框
最普通的文本框：
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title'
}
带校验功能：
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
}
一种常用的校验是看用户是否输入了任何内容，建立一个allowBlank配置项并把它设置为false。
内置校验——vtype
vtype。它可以被用来校验和约束用户的输入，并且抛出错误的信息。它的基础是正则表达式，现在介绍几种vType：
· email；必须输入邮件
· url；必须输入网址
· alpha；必须输入文字不能是数字
· alphanum。文字+数字
{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
vtype: 'alpha'
}
气球提示：
Ext.onReady(function(){
Ext.QuickTips.init();
// our form here
});
完整的代码：
- <html>
- <head>
- <title>开始EXT</title>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <link rel="stylesheet" type="text/css"
- href="extjs/resources/css/ext-all.css" />
- <script src="extjs/adapter/ext/ext-base.js"></script>
- <script src="extjs/ext-all-debug.js"></script>
- <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript" language="javascript">
- Ext.onReady(function(){
- Ext.QuickTips.init();
- var movie_form = new Ext.FormPanel({
- url: 'movie-form-submit.php',
- renderTo: document.body,
- frame: true,
- title: 'Movie Information Form',
- width: 250,
- items: [{
- xtype: 'textfield',
- fieldLabel: 'Title',
- name: 'title',
- allowBlank: false
- },{
- xtype: 'textfield',
- fieldLabel: 'Director',
- name: 'director',
- vtype: 'alphanum'
- },{
- xtype: 'datefield',
- fieldLabel: 'Released',
- name: 'released',
- disabledDays: [1,2,3,4,5]
- }]
- });
- });
- </script>
- </head>
- <body><div id="hello"></div></body>
- </html>
附：常见验证
ext 默认校验方案
- new Ext.form.TextField({
- name:'text',
- fieldLable:'文本框',
- vtype:'email'
- });
- //alpaha:只能输入英文字母
- //alphanum:字母和数字
- //email:电子邮箱
- //url:网址
最大长度和最小长度
单选按钮
{ xtype: 'radio', fieldLabel: 'Filmed In', name: 'filmed_in', boxLabel: '选asp.net' },
{ xtype: 'radio', hideLabel: false, labelSeparator: '', name: 'filmed_in', boxLabel: '选php' }
复选框
{ xtype: 'checkbox', fieldLabel: '请选择', name: 'bad_movie' }
下拉框
对于combobox我们也要为它添加配置。
store配置项就是用来说明combo中采用的数据的。
与此同时我们还需要mode配置项，用来说明数据的来源是local source（本地）还是remote source（远程），
还有displayField数据项，用来说明把哪一列数据展现在combo的选项中。
- var genres = new Ext.data.SimpleStore({
- fields: ['id', 'genre'],
- data : [['1','北京'],['2','上海'],['3','广州'],['4','南京']]
- });
- Ext.onReady(function(){
- Ext.QuickTips.init();
- var movie_form = new Ext.FormPanel({
- url: 'movie-form-submit.php',
- renderTo: document.body,
- frame: true,
- title: 'Movie Information Form',
- width: 450,
- items: [
- {
- xtype: 'combo',
- name: 'genre',
- fieldLabel: '请选择',
- mode: 'local',
- store: genres,
- displayField:'genre',
- width: 120
- }
- ]
- });
- });
HTML编辑器
{ xtype: 'htmleditor', name: 'description', hideLabel: true, labelSeparator: '', height: 100, anchor: '100%' }
下拉菜单Toolbar
说明：
xtype: 'tbbutton',按钮
xtype: 'tbbutton',菜单
菜单的items（项目）和buttons的原理一样。他们可以有图标、样式表，以及句柄。菜单的所有itmes可以组合起来形成一些列可选择的按钮
xtype: 'tbsplit',分割菜单
就是按钮和菜单的结合。在使用它的时候只要在menu配置项目中添加按钮的属性就可以了。点击按钮左边部分可以触发按钮本身的事件，点击按钮右边的部分（有个倒三角）可以展开菜单。
- Ext.onReady(function(){
- new Ext.Toolbar({
- renderTo: document.body,
- items: [{
- xtype: 'tbbutton',
- text: 'Button'
- },{
- xtype: 'tbbutton',
- text: 'Menu Button',
- menu: [{
- text: 'Better'
- },{
- text: 'Good'
- },{
- text: 'Best'
- }]
- },{
- xtype: 'tbsplit',
- text: 'Split Button',
- menu: [{
- text: 'Item One'
- },{
- text: 'Item Two'
- },{
- text: 'Item Three'
- }]
- }]
- });
- });
折叠控件
- Ext.onReady(function(){
- new Ext.Panel({
- renderTo:"hello",
- title:"容器组件",
- width:500,
- height:200,
- layout:"accordion",
- layoutConfig: {
- animate: true
- },
- items:[{title:"子元素1",html:"这是子元素1中的内容"},
- {title:"子元素2",html:"这是子元素2中的内容"},
- {title:"子元素3",html:"这是子元素3中的内容"}
- ]
- }
- );
- });
Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。