Extjs学习第一弹
由于各种主观和客观的原因，本人需要学习Extjs，从网上搜了下相关的教程，发现写的并是不易于理解，所以将网上的资料整理了一下，欢迎有兴趣的IT猿一起学习
首先，关于Extjs是什么，用来干什么的，这些你可以从百度百科知道，就不做赘述了，下来就进入学习阶段，首先，我们需要下载一个版本的Extjs，本博以
此版本为例，下载好后，解压缩，会看到
这样一个目录，而我们在开发时，需要的是
整个resourses文件夹，ext-all.js文件，和locale下面的ext-lang-zh_CN.js文件，把这些都添加到工程了以后，文件目录如图所示（以Eclipse为例）：
下面就从基本的对话框学起，第一次写博客，有什么意见或者错误的地方请大家果断提出来
首先看源代码
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script src="js/ext-all.js" type="text/javascript"></script>
<script src="js/ext-lang-zh_CN.js" type="text/javascript"></script>
<title>Dialog</title>
<script type="text/javascript">
Ext.onReady(function () {
Ext.get("but1").on("click",function(){
Ext.MessageBox.alert('欢迎1', 'Hello World!');
});
Ext.get("but2").on("click",function(){
Ext.Msg.alert('欢迎2', 'Hello World!');
});
Ext.get("but3").on("click",function(){
Ext.MessageBox.confirm("提示","确认修改吗？",function(btn,txt){
if(btn=="yes"){
Ext.MessageBox.alert('提示', '已修改!');
}
else{
Ext.MessageBox.alert('提示', '未修改!');
}
});
});
Ext.get("but4").on("click",function(){
Ext.MessageBox.prompt('提示', '请输入姓名',function(btn,txt){
debugger;
if(btn=="ok"){
}
else{
}
});
});
});
</script>
</head>
<body>
<ul>
<li>
<input id="but1" type="button" value="简单对话框1"/>
</li>
<li>
<input id="but2" type="button" value="简单对话框2"/>
</li>
<li>
<input id="but3" type="button" value="确认对话框"/>
</li>
<li>
<input id="but4" type="button" value="输入对话框"/>
</li>
</ul>
</body>
</html>
作为一个有素养的程序猿，我们不难发现，extjs的入口为Ext.onReady，而Ext.get("id").on("click",function(){});就是获取名字为id的控件，为这个控件添加click事件，Extjs的对话框有很多的格式，但常用的基本对话框就这三个，confirm对话框的肯定值默认为“yes”，而prompt对话框的肯定值默认为“ok”，这个大家可以打个bugger跟踪下就可以看到，另外有时候我们会需要自定义一些对话框格式如下：
function fuc(btn){
if(btn=="yes"){
}else if(btn=="no"){
}else{
}
}
Ext.get("buttonid").on("click",function(){
Ext.Msg.show({
title:'', //对话框标题
msg: '你想要保存修改信息吗？', //对话框内显示的内容
buttons: Ext.Msg.YESNOCANCEL, //对话框所需要的按钮
fn: fuc//点击对话框按钮所触发的函数
});
}
);
浙公网安备 33010602011771号