EXT基础

Java架构师必看

发布于 2021-03-22 11:26:34

4.3K0

发布于 2021-03-22 11:26:34

文章被收录于专栏：Java架构师必看

什么是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 下拉框

· 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:网址

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

最大长度和最小长度

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