Extjs学习笔记1----------消息框，文本框，文本域，进度条的使用

ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s 应用更加具有活力及生命力。ExtJS

是一个用javascript 编写，与后台技术无关的前端ajax 框架。

学习Extjs就要从基础组件开始学起，通过小例子进行一步一步的学习。

1.首先到Extjs官网进行下载Extjs的包http://extjs.org.cn/node/3，本人自学的是ExtJs-2.0.2。

2.对于Extjs来讲，如果要进行开发，就要进行导入相应的js文件

（1）导入adapter文件夹中的ext中的ext-base.js文件。即adapter/ext/ext-base.js;

（2）导入ext-all.js文件。

（3）导入resources包，里面有很多css布局文件，目前我们需要的就是ext-all.css文件

（4）如果涉及到中文，那就需要导入ext-lang-zh_CN.js这个包。

3.创建HTML文件，文件中一般都按照如下方法进行配置Extjs（我是把所需要的.js文件都放在同级的extjs文件夹中）

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/ext-base.js"></script>

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>

4.第一个实例：HelloWorld经典程序

<script type="text/javascript">

Ext.onReady(function(){

Ext.MessageBox.alert("这是第一个Extjs程序","HelloWorld");

});

</script>

这就是简单的一个Extjs程序。

5.应用实例1-5：

实例1：确定+取消按钮

<script type="text/javascript">

Ext.onReady(function(){

Ext.MessageBox.confirm("选择","请选择",callback);

});

function callback(id){ //id的值就是button上面的值，yes或是no

if(id=="yes"){

Ext.MessageBox.alert("yes："+id);

}else{

Ext.MessageBox.alert("no："+id);

}

}

</script>

实例2：text文本框

<script type="text/javascript">

Ext.onReady(function(){

Ext.MessageBox.prompt("填写","写点什么东西吧",callback);

});

function callback(id,text){ //这个id的值就是button上面的值，但是不同于上个例子，id值为ok和cancel，text表示文本框中的内容

if(id=="ok"){

Ext.MessageBox.alert("yes："+text);

}else{

Ext.MessageBox.alert("cancel："+text);

}

}

</script>

实例3：文本域

<script type="text/javascript">

Ext.onReady(function(){

Ext.MessageBox.show({ title:"文本域",msg:"要显示的容",height:300,width:300,

buttons:Ext.MessageBox.OKCANCEL,//显示button

multiline: true, //文本域显示为true

fn: callback}); //fn是Extjs特有的函数，可以指示处理的函数名

});

function callback(id,text){ //这个id的值就是button上面的值,id值为ok和cancel，text表示文本域中的内容

if(id=="ok"){

Ext.MessageBox.alert("yes："+text);

}else{

Ext.MessageBox.alert("cancel："+text);

}

}

</script>

实例4：自定义button

<script type="text/javascript">

Ext.onReady(function(){

//将button组件的三个按钮yes，no，cancel定义为“是的”，“不的”，“取消了”

Ext.MessageBox.show({title:"自定义button",buttons:{yes:"是的",no:"不的",cancel:"取消了"},fn:callback});

});

function callback(id){ //这个id的值就是button上面的值,id值为yes、no、cancel

if(id=="ok"){

Ext.MessageBox.alert("yes："+id);

}else if(id=="no"){

Ext.MessageBox.alert("no："+id);

}else{

Ext.MessageBox.alert("cancle："+id);

}

}

</script>

实例5：进度条

<script type="text/javascript">

Ext.onReady(function(){

Ext.MessageBox.show({title:"进度条",msg:"加载中....",width:300,progress:true,closable:false});

var f = function(v){return function(){

if(v==20){

Ext.MessageBox.hide();

Ext.MessageBox.alert("加载完成");

}else{

var i = v/19;

Ext.MessageBox.updateProgress(i,Math.round(100*i)+"%已完成");

}

};

};

for(var i=1;i<21;i++){

setTimeout(f(i),i*500);//休眠时间，也就是进程条的读条速度

}

});

</script>