EXT基础

ETX系列：

什么是EXT？

–Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。

–Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。

下载EXT2.0

官方下载地址：
http://extjs.com/deploy/ext-2.0.2.zip

开发人员必备的中文手册

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下的所有类。

第一个例子--弹出框

引入文件

说明：

•样式文件为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"> 不然会中文乱码

测试

效果图：

EXT基础

注意：

在进行下一步之前，我们应该为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下载。

EXT基础

获取对象节点

•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);

});

•//Html页面中包含一个id为hello的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基础

注释//Ext.getCmp("myFirstPanel").setTitle("新的标题");

再看效果：

EXT基础

•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基础

基本表单

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基础

EXT国际化问题（自动翻译为中文）

注意这时是默认英文下的日历，需要翻译为中文环境可以引入：

EXT基础

说明：该目录也有其他对应语言，各取所需即可。

修改日历格式：

{ xtype: 'datefield', fieldLabel: 'Released', width: 250, format:'Y-m-d', name: 'released' }

EXT基础

日历只能选择指定日期：

{ xtype: 'datefield', fieldLabel: 'Released', disabledDays: [6,0], format:'Y-m-d', name: 'released' }

EXT基础

这样除了工作日（周一到周五）以外的周六和周日就不能选择了。一定要记得0代表星期日！

EXT的xtype

xtype指的是Ext.form.TextField。这里罗列出一些xtype：

· textfield 文本框常用

· timefield 下拉时间框不常用

· numberfield 只能输入数字数字验证常用

· datefield 日历下拉框

· combo 下拉框

· textarea 多行文本框

最普通的文本框：

{

xtype: 'textfield',

fieldLabel: 'Title',

}

带校验功能：

{

xtype: 'textfield',

fieldLabel: 'Title',

allowBlank: false

}

一种常用的校验是看用户是否输入了任何内容，建立一个allowBlank配置项并把它设置为false。

EXT基础

内置校验——vtype

vtype。它可以被用来校验和约束用户的输入，并且抛出错误的信息。它的基础是正则表达式，现在介绍几种vType：

· email；必须输入邮件

· url；必须输入网址

· alpha；必须输入文字不能是数字

· alphanum。文字+数字

{

xtype: 'textfield',

fieldLabel: 'Director',

vtype: 'alpha'

}

气球提示：

Ext.onReady(function(){

Ext.QuickTips.init();

// our form here

});

EXT基础

完整的代码：

<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:网址============================================================================================
最大长度和最小长度

new Ext.form.TextField({
name:'text',
fieldLable:'文本框',
maxLength:10,
minLength:5
});

===================================================================================
输入不能为空

new Ext.form.TextField({
name:'text',
fieldLable:'文本框',
allowBlank:false//验证
});
====================================================================================
自定义验证

new Ext.form.TextField({
fieldLable:'文本框',
name:'text',
regex:/^[\u4E00-\u9FA5]+$/,
regexText:'只能输入汉字'
});

====================================================================================

单选按钮

{ xtype: 'radio', fieldLabel: 'Filmed In', name: 'filmed_in', boxLabel: '选asp.net' },

{ xtype: 'radio', hideLabel: false, labelSeparator: '', name: 'filmed_in', boxLabel: '选php' }

EXT基础

复选框

{ xtype: 'checkbox', fieldLabel: '请选择', name: 'bad_movie' }

EXT基础

下拉框

对于combobox我们也要为它添加配置。

store配置项就是用来说明combo中采用的数据的。

与此同时我们还需要mode配置项，用来说明数据的来源是local source（本地）还是remote source（远程），

还有displayField数据项，用来说明把哪一列数据展现在combo的选项中。

EXT基础

HTML编辑器

{ xtype: 'htmleditor', name: 'description', hideLabel: true, labelSeparator: '', height: 100, anchor: '100%' }

EXT基础

下拉菜单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基础

折叠控件

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中的内容"} ] } ); });

EXT基础

Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。

ETX系列：

EXT基础

EXT表单

EXT事件

EXT窗口

EXT按钮事件

EXT基础

ETX系列：

EXT基础

EXT表单

EXT事件

EXT窗口

EXT按钮事件

相关推荐