ExtJS2.0中提供了一整套的web表示层UI解决方案,令我们可以非常轻易的实现平时较为复杂的javascript操作,在此我以表示层开发中使用较多的Dialog与Form功能进行一次ExtJS2.0的实现演示。
ExtJS2.0的配置及运行方式请参阅 ExtJS2.0开发与实践笔记[0]-初识ExtJS
DialogExt.js (此中包含了ExtJS的确定,分支选择,进度条,输入框等四个应用实例)
Dialog.html
效果图如下:
form应用实例,在此我演示了Ext中简单的Form生成方式。
FormExt.js
FormExt.html
ExtJS自2.0开始UI库已经有了极大的丰富,基本可满足我们日常开发所需的一切效果,而在Java操作中我们习以为常的很多功能,都能够在Ext找到对应的操作。在下回我将着重介绍 Ext中 Layout的使用。
ExtJS2.0的配置及运行方式请参阅 ExtJS2.0开发与实践笔记[0]-初识ExtJS
DialogExt.js (此中包含了ExtJS的确定,分支选择,进度条,输入框等四个应用实例)
/**
*
*/
var DialogExt = function () {
/**
* 追踪输出
* @param {Object} str
*/
var trace=function(str){
//在ExtJS2.0中,log由Ext统一调度
Ext.log(str);
};
//设置Ext.Button别名为Button
var Button=Ext.Button;
//设置Ext.MessageBox别名为MessageBox
var MessageBox=Ext.MessageBox;
//变量设置,用于保存DialogExt自身及当中键钮
var root;
var btn0;
var btn1;
var btn2;
var btn3;
//返回操作
return {
//初始化函数
init:function(){
//设定root等于this
root=this;
//生成Ext按钮,绑定数据到Element,renderTo为绑定的按钮名,text为输出内容
btn0=new Button({renderTo:'a',text:'确定选项'});
btn1=new Button({renderTo:'b',text:'yes/no选项'});
btn2=new Button({renderTo:'c',text:'输入框选项'});
btn3=new Button({renderTo:'d',text:'进度条选项'});
//确定选项
btn0.on('click',function() {
MessageBox.alert(
'消息框',
'Ext很简单。',
root.onResult);
});
//yes/no选项
btn1.on('click',function(evt) {
MessageBox.confirm(
'提问',
'Ext是否很容易掌握?',
root.onResult);
});
//输入框选项
btn2.on('click',function(evt) {
MessageBox.prompt(
'输入框',
'输入内容:',
root.onResult);
});
//进度条选项
btn3.on('click',function() {
//生成进度条,分别设定了标题,信息,宽,是否自动前进进度,是否自动关闭进度5项
MessageBox.show({
title :'进度条',
msg :'初始化中…',
width :240,
progress:true,
closable:false
});
//进度条定时处理
var f=function(v) {
return function(){
if (v<=10) {
MessageBox.updateProgress(
v/10,'读取进度 '+v+'/10');
} else {
//隐藏Ext消息框
MessageBox.hide();
}
};
};
//进度条时间设定
for (var i=1;i<=11;i++) {
setTimeout(f(i),i*1000);
}
});
},
//当前操作对象输出
onResult:function(button,text){
trace("点击按钮:"+button+" 输出文本:"+text);
}
};
} ();
// 设定onReady,Ext将在dom加载完毕后自动调用其中操作
Ext.onReady(DialogExt.init,DialogExt, true );
*
*/
var DialogExt = function () {
/**
* 追踪输出
* @param {Object} str
*/
var trace=function(str){
//在ExtJS2.0中,log由Ext统一调度
Ext.log(str);
};
//设置Ext.Button别名为Button
var Button=Ext.Button;
//设置Ext.MessageBox别名为MessageBox
var MessageBox=Ext.MessageBox;
//变量设置,用于保存DialogExt自身及当中键钮
var root;
var btn0;
var btn1;
var btn2;
var btn3;
//返回操作
return {
//初始化函数
init:function(){
//设定root等于this
root=this;
//生成Ext按钮,绑定数据到Element,renderTo为绑定的按钮名,text为输出内容
btn0=new Button({renderTo:'a',text:'确定选项'});
btn1=new Button({renderTo:'b',text:'yes/no选项'});
btn2=new Button({renderTo:'c',text:'输入框选项'});
btn3=new Button({renderTo:'d',text:'进度条选项'});
//确定选项
btn0.on('click',function() {
MessageBox.alert(
'消息框',
'Ext很简单。',
root.onResult);
});
//yes/no选项
btn1.on('click',function(evt) {
MessageBox.confirm(
'提问',
'Ext是否很容易掌握?',
root.onResult);
});
//输入框选项
btn2.on('click',function(evt) {
MessageBox.prompt(
'输入框',
'输入内容:',
root.onResult);
});
//进度条选项
btn3.on('click',function() {
//生成进度条,分别设定了标题,信息,宽,是否自动前进进度,是否自动关闭进度5项
MessageBox.show({
title :'进度条',
msg :'初始化中…',
width :240,
progress:true,
closable:false
});
//进度条定时处理
var f=function(v) {
return function(){
if (v<=10) {
MessageBox.updateProgress(
v/10,'读取进度 '+v+'/10');
} else {
//隐藏Ext消息框
MessageBox.hide();
}
};
};
//进度条时间设定
for (var i=1;i<=11;i++) {
setTimeout(f(i),i*1000);
}
});
},
//当前操作对象输出
onResult:function(button,text){
trace("点击按钮:"+button+" 输出文本:"+text);
}
};
} ();
// 设定onReady,Ext将在dom加载完毕后自动调用其中操作
Ext.onReady(DialogExt.init,DialogExt, true );
Dialog.html
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > DialogExt </ title >
<!-- 加载ExtJs资源[当调用Ext.log调试时,需要使用debug方式的js] -->
< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />
< script type ="text/javascript" src ="adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext-all-debug.js" ></ script >
<!-- 加载我的js文件 -->
< script type ="text/javascript" src ="DialogExt.js" ></ script >
</ head >
< body >
<!-- 设置Element,以供DialogExt.js调用 -->
< table cellspacing ="5" >
< tr >
< td >< div id ="a" ></ div ></ td >
< td >< div id ="b" ></ div ></ td >
< td >< div id ="c" ></ div ></ td >
< td >< div id ="d" ></ div ></ td >
</ tr >
</ table >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > DialogExt </ title >
<!-- 加载ExtJs资源[当调用Ext.log调试时,需要使用debug方式的js] -->
< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />
< script type ="text/javascript" src ="adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext-all-debug.js" ></ script >
<!-- 加载我的js文件 -->
< script type ="text/javascript" src ="DialogExt.js" ></ script >
</ head >
< body >
<!-- 设置Element,以供DialogExt.js调用 -->
< table cellspacing ="5" >
< tr >
< td >< div id ="a" ></ div ></ td >
< td >< div id ="b" ></ div ></ td >
< td >< div id ="c" ></ div ></ td >
< td >< div id ="d" ></ div ></ td >
</ tr >
</ table >
</ body >
</ html >
效果图如下:
form应用实例,在此我演示了Ext中简单的Form生成方式。
FormExt.js
FormExt
=
function
()
{
var trace=function(str){
Ext.log(str);
};
//1.1版为Ext.form.Form
var Form=Ext.form.FormPanel;
var MessageBox=Ext.MessageBox;
var TextField=Ext.form.TextField;
//变量设置
var root;
var form;
var textField0;
var textField1;
var textField2;
var textField3;
return {
//初始化FormExt
init:function(){
root=this;
//生成窗体
form=new Form({
//样式
baseCls: 'x-plain',
//label宽
labelWidth: 75,
//数据提交地址
url:'save.jspa'
});
//生成TextField
textField0=new TextField({
fieldLabel:'姓名',
name :'name',
width :175,
allowBlank:false
});
textField1=new TextField({
fieldLabel:'地址',
name :'address',
width :175
});
textField2=new TextField({
fieldLabel:'年齢',
name :'age',
width :175
});
textField3=new TextField({
fieldLabel:'email',
name :'email',
//验证类型为email
vtype :'email',
width :175
});
//将TextField加载入form
form.add(textField0,textField1,textField2,textField3);
//生成按钮
form.addButton('保存',function(){
MessageBox.alert('消息框','保存数据')});
form.addButton('取消',function(){
MessageBox.alert('消息框','取消操作')});
//将form内容实施到名称为frmExt的div上
form.render('frmExt');
}
};
} ();
// 设定onReady,Ext将在dom加载完毕后自动调用其中操作
Ext.onReady(FormExt.init,FormExt, true );
var trace=function(str){
Ext.log(str);
};
//1.1版为Ext.form.Form
var Form=Ext.form.FormPanel;
var MessageBox=Ext.MessageBox;
var TextField=Ext.form.TextField;
//变量设置
var root;
var form;
var textField0;
var textField1;
var textField2;
var textField3;
return {
//初始化FormExt
init:function(){
root=this;
//生成窗体
form=new Form({
//样式
baseCls: 'x-plain',
//label宽
labelWidth: 75,
//数据提交地址
url:'save.jspa'
});
//生成TextField
textField0=new TextField({
fieldLabel:'姓名',
name :'name',
width :175,
allowBlank:false
});
textField1=new TextField({
fieldLabel:'地址',
name :'address',
width :175
});
textField2=new TextField({
fieldLabel:'年齢',
name :'age',
width :175
});
textField3=new TextField({
fieldLabel:'email',
name :'email',
//验证类型为email
vtype :'email',
width :175
});
//将TextField加载入form
form.add(textField0,textField1,textField2,textField3);
//生成按钮
form.addButton('保存',function(){
MessageBox.alert('消息框','保存数据')});
form.addButton('取消',function(){
MessageBox.alert('消息框','取消操作')});
//将form内容实施到名称为frmExt的div上
form.render('frmExt');
}
};
} ();
// 设定onReady,Ext将在dom加载完毕后自动调用其中操作
Ext.onReady(FormExt.init,FormExt, true );
FormExt.html
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > FormExt </ title >
<!-- ExtJS资源引入 -->
< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />
< script type ="text/javascript" src ="adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext-all-debug.js" ></ script >
<!-- 我的js文件 -->
< script type ="text/javascript" src ="FormExt.js" ></ script >
</ head >
< body >
<!-- frame -->
< div style ="width:300px;" >
< div class ="x-box-tl" >< div class ="x-box-tr" >< div class ="x-box-tc" ></ div ></ div ></ div >
< div class ="x-box-ml" >< div class ="x-box-mr" >< div class ="x-box-mc" >
< h3 style ="margin-bottom:5px;" > Ext的form </ h3 >
< div id ="frmExt" ></ div >
</ div ></ div ></ div >
< div class ="x-box-bl" >< div class ="x-box-br" >< div class ="x-box-bc" ></ div ></ div ></ div >
</ div >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > FormExt </ title >
<!-- ExtJS资源引入 -->
< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />
< script type ="text/javascript" src ="adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="ext-all-debug.js" ></ script >
<!-- 我的js文件 -->
< script type ="text/javascript" src ="FormExt.js" ></ script >
</ head >
< body >
<!-- frame -->
< div style ="width:300px;" >
< div class ="x-box-tl" >< div class ="x-box-tr" >< div class ="x-box-tc" ></ div ></ div ></ div >
< div class ="x-box-ml" >< div class ="x-box-mr" >< div class ="x-box-mc" >
< h3 style ="margin-bottom:5px;" > Ext的form </ h3 >
< div id ="frmExt" ></ div >
</ div ></ div ></ div >
< div class ="x-box-bl" >< div class ="x-box-br" >< div class ="x-box-bc" ></ div ></ div ></ div >
</ div >
</ body >
</ html >
ExtJS自2.0开始UI库已经有了极大的丰富,基本可满足我们日常开发所需的一切效果,而在Java操作中我们习以为常的很多功能,都能够在Ext找到对应的操作。在下回我将着重介绍 Ext中 Layout的使用。
PS:由于ExtJS类库较多,所以将于较后进行介绍,目前仅以实例为主,现阶段请参阅ExtJS2.0的doc文档。
本文转自 cping 51CTO博客,原文链接:http://blog.51cto.com/cping1982/129953