ETX系列:
EXT基础
EXT表单
EXT事件
EXT窗口
EXT按钮事件
什么是EXT?
下载EXT2.0
开发人员必备的中文手册
EXT学习以及资源不错的网站
下载好以后解压缩
第一个例子--弹出框
引入文件
- <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>
说明:
要加:<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下载。
获取对象节点
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
<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("新的标题");
再看效果:
也可以直接在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,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。