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>