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

时间:2022-12-08 21:16:18
  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>