EXT基础

晨曦之光 发布于 2012/03/09 14:49
阅读 699
收藏 2

ETX系列:

EXT基础

EXT表单

EXT表格

EXT事件

EXT窗口

EXT按钮事件

 

 

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

 

第一个例子--弹出框

引入文件

<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);  
  
});  
•//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.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 下拉框

·         pre   多行文本框

 

最普通的文本框:

{

   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:'文本框',
   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' }

 

复选框

{ 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,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。

 

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料

    21aspnet
    • 访问:3906789次
    • 积分:45743分
    • 排名:第10名
    • 原创:1408篇
    • 转载:54篇
    • 译文:8篇
    • 评论:3214条
    文章分类
    最新评论
pre
原文链接:http://blog.csdn.net/21aspnet/article/details/6782028
加载中
返回顶部
顶部