ExtJS2.0中提供了一整套的web表示层UI解决方案，令我们可以非常轻易的实现平时较为复杂的javascript操作，在此我以表示层开发中使用较多的Dialog与Form功能进行一次ExtJS2.0的实现演示。
ExtJS2.0的配置及运行方式请参阅 ExtJS2.0开发与实践笔记[0]-初识ExtJS
DialogExt.js (此中包含了ExtJS的确定，分支选择，进度条，输入框等四个应用实例)
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpFMU1pOWhOREU1TlRSaE1qZGtObUZrT1RabVlUSmpNbU5tT0RFMlpUWTNOelEwT0M1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnek1pOHhNekkzWVdJMU5qbGpNV0ZsT0RJM016WTJPVE5oTlRCaU9HVXpNek0zT0M1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
/**//**
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpjek55ODJZVGxqTURjeFlUQTRaakZrWVdVeVpETmxNV00xTVRJd01EQmxaV1kwTVM1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
*
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THprME9DOHdNVGsyWXpOa1pqVmxZVGxsT1RNMlpqSXhaVGs1TXpKalkyRTVNVEF4TkM1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
*/
varDialogExt=function()...{
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpneE1TOHpOMk00WW1ZMk9HTmtZek5qWXpneE56VTVZek0wTVRZd056YzJZbU0xTXk1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpRek5DODNabVk0WkRreVkyUmxaRGRsTUdObE1UVmxOMk5oTVdGall6ZzNNREExTWk1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
/**//**
*追踪输出
*@param{Object}str
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpRMk1DODNNVGMwTkRaallUQTBZVFl4TWpWa1l6VmlObUkxTkdVd1ptRXhOR0ZpTkM1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
*/
vartrace=function(str)...{
//在ExtJS2.0中，log由Ext统一调度
Ext.log(str);
};
//设置Ext.Button别名为Button
varButton=Ext.Button;
//设置Ext.MessageBox别名为MessageBox
varMessageBox=Ext.MessageBox;
//变量设置，用于保存DialogExt自身及当中键钮
varroot;
varbtn0;
varbtn1;
varbtn2;
varbtn3;
//返回操作
return...{
//初始化函数
init:function()...{
//设定root等于this
root=this;
//生成Ext按钮，绑定数据到Element，renderTo为绑定的按钮名，text为输出内容
btn0=newButton(...{renderTo:'a',text:'确定选项'});
btn1=newButton(...{renderTo:'b',text:'yes/no选项'});
btn2=newButton(...{renderTo:'c',text:'输入框选项'});
btn3=newButton(...{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
});
//进度条定时处理
varf=function(v)...{
returnfunction()...{
if(v<=10)...{
MessageBox.updateProgress(
v/10,'读取进度'+v+'/10');
}else...{
//隐藏Ext消息框
MessageBox.hide();
}
};
};
//进度条时间设定
for(vari=1;i<=11;i++)...{
setTimeout(f(i),i*1000);
}
});
},
//当前操作对象输出
onResult:function(button,text)...{
trace("点击按钮:"+button+"输出文本:"+text);
}
};
}();
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpVeU1pODJPREV3TXpVMVl6Sm1OemhqTVRKbE9URmlOems1TjJFNFpUaGpOVGd6WVM1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
//设定onReady,Ext将在dom加载完毕后自动调用其中操作
Ext.onReady(DialogExt.init,DialogExt,true);
Dialog.html
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>DialogExt</title>
<!--加载ExtJs资源[当调用Ext.log调试时，需要使用debug方式的js]-->
<linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/>
<scripttype="text/javascript"src="adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="ext-all-debug.js"></script>
<!--加载我的js文件-->
<scripttype="text/javascript"src="DialogExt.js"></script>
</head>
<body>
<!--设置Element，以供DialogExt.js调用-->
<tablecellspacing="5">
<tr>
<td><divid="a"></div></td>
<td><divid="b"></div></td>
<td><divid="c"></div></td>
<td><divid="d"></div></td>
</tr>
</table>
</body>
</html>
效果图如下：
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpZd0x6RTBaak5qWW1WbE5USmlNbUZsWTJGaVlUYzFNalE1WXpaaFptSXhZbVZqTG1kcFpnPT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
form应用实例，在此我演示了Ext中简单的Form生成方式。
FormExt.js
FormExt=function()...{
vartrace=function(str)...{
Ext.log(str);
};
//1.1版为Ext.form.Form
varForm=Ext.form.FormPanel;
varMessageBox=Ext.MessageBox;
varTextField=Ext.form.TextField;
//变量设置
varroot;
varform;
vartextField0;
vartextField1;
vartextField2;
vartextField3;
return...{
//初始化FormExt
init:function()...{
root=this;
//生成窗体
form=newForm(...{
//样式
baseCls:'x-plain',
//label宽
labelWidth:75,
//数据提交地址
url:'save.jspa'
});
//生成TextField
textField0=newTextField(...{
fieldLabel:'姓名',
name:'name',
width:175,
allowBlank:false
});
textField1=newTextField(...{
fieldLabel:'地址',
name:'address',
width:175
});
textField2=newTextField(...{
fieldLabel:'年齢',
name:'age',
width:175
});
textField3=newTextField(...{
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>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>FormExt</title>
<!--ExtJS资源引入-->
<linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/>
<scripttype="text/javascript"src="adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="ext-all-debug.js"></script>
<!--我的js文件-->
<scripttype="text/javascript"src="FormExt.js"></script>
</head>
<body>
<!--frame-->
<divstyle="width:300px;">
<divclass="x-box-tl"><divclass="x-box-tr"><divclass="x-box-tc"></div></div></div>
<divclass="x-box-ml"><divclass="x-box-mr"><divclass="x-box-mc">
<h3style="margin-bottom:5px;">Ext的form</h3>
<divid="frmExt"></div>
</div></div></div>
<divclass="x-box-bl"><divclass="x-box-br"><divclass="x-box-bc"></div></div></div>
</div>
</body>
</html>
![ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form](/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTl3YVdGdWMyaGxiaTVqYjIwdmFXMWhaMlZ6THpnMk55OWhaalpoWXpGak9XRXhORGRsTURKa1lqUTRPVGMxTkdNeU5UZzBOVGhrWWk1bmFXWT0= "ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与Form")
ExtJS自2.0开始UI库已经有了极大的丰富，基本可满足我们日常开发所需的一切效果，而在Java操作中我们习以为常的很多功能，都能够在Ext找到对应的操作。在下回我将着重介绍Ext中Layout的使用。
PS:由于ExtJS类库较多，所以将于较后进行介绍，目前仅以实例为主，现阶段请参阅ExtJS2.0的doc文档。
相关文章：