ExtJS 4.0 基本功能

一：ExtJS 组件配置方式
1、使用逗号分隔参数列表配置组件 eg: Ext.Msg.alert(“提示”,”您好”);
2、使用JSON对象配置组件
Eg: var config={// 定义配置对象
title:’case01’,
msg:’JSON对象配置组件’
}
Ext.Msg.show(config);//将配置传入方法中
二：信息提示框组件介绍
认识Ext.window.MeessageBox （即Ext.Msg）工具类与JavaScript提供的原始信息提示框的差别，主要表现在：
实现方式：标准Js提供的信息提示框是一个真正的弹出窗口。
而Ext.Msg提供的信息提示框并不是真正的窗口，只是在当前页面显示的一个层，所以无法用捕捉软件来得到它。
显示信息的格式：标准Js提供的信息提示框中所显示的内容不是HTML格式文本，而是纯文本：不能用HTML中的格式化方式格式化方法进行排版，只能以空格、回车以及各种标点来构建显示格式。而Ext.Msg 提供的信息提示框显示的文本不仅支持纯文本显示还支持使用HTML格式文本。
对程序运行的影响：标准JS提供的信息提示框会对JS程序的运行产生阻塞。而Ext.Msg是异步的，它的调用并不会挺直浏览器中代码的执行。如果希望在信息提示框出现并且用户做出反馈后才能调用程序，就需要把相应的程序组织成一个函数，并且将该函数作为回调函数提供给Ext.Msg，在用户做出反馈后，该回调函数将被调用，这样就可以达到控制程序执行的目的了。
1、Ext.MessageBox.alert():一个只读信息框，用来代替JS标准的alert()，有一个确定按钮，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括上角的退出按钮），所以单击按钮的id将被作为唯一的参数传递到回调函数中。
Confirm:确认输入框：
Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack1);
function callBack1(id){
alert('单击的按钮ID 是：'+id);
}
2、Ext.MessageBox.prompt(title,msg,回调函数,scope, [Boolean/Number multiline：设置为false,将显示一个单行文本域，设置为true将以默认高度显示一个多行文本区],[用户输入的默认值]):显示一个获取用户输入的提示框，有两个按钮“确定”和“取消”，并提供文本输入框接收用户的输入，如果为其提供一个回调函数，则该函数在单击按钮后被调用，所以单击按钮的Id和文本框中的内容将被作为参数传递到回调函数中。
Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack2,this,true,'我是默认值');
function callBack2(id,msg){
alert('单击的按钮ID 是：'+id+' 输入的内容是：'+msg);
}
3、Ext.MessageBox.wait(msg,title,[Object config:用于配置进度条的配置对象])
Eg: Ext.MessageBox.wait('请等待，操作需要很长时间','提示',{
text:'进度条上的文字'
});
Eg: //进度框
Ext.MessageBox.wait('请等待，操作需要很长时间','提示',{
text:'进度条上的文字'
});
4、Ext.MessageBox.show方法，不但可以配置提示标题、提示信息、回调函数等常见部分，还提供了配置按钮文字及提示图标的方法，给了我们控制信息提示框的各种可能性。

[b] 改变默认的按钮文字[/b]：Ext.MessageBox.msgButtons[i].setText(‘文本’);// i:0,1,2,3 ok：0 ;yes:1;no:2;cancel:3

[b] 动态更新提示框信息[/b]：更新提示文字：updateText([String text]):text是显示的信息内容，返回值是Ext.window.MessageBox
Eg: //动态更新提示框
var msgBox=Ext.MessageBox.show({
title:'提示',
msg:'动态更新的信息文字',
modal:true,
buttons:Ext.Msg.OK,
fn:function(){
//停止定时任务
Ext.TaskManager.stop(task);
}
})
//Ext.taskManager是一个功能类，用来定时执行程序
//定时触发提示信息的更新
var task={
run:function(){
msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
},
interval:1000
}
Ext.TaskManager.start(task);

[b] 更新进度条以及提示信息[/b]
updateProgress(Number value,String progressText,String msg)，该方法在progress：true的情况下会生效。Value：0~1，默认为0；progressText：进度条上显示的文字；msg:显示的信息内容
返回值：Ext.window.MessageBox
Eg: //更新进度条提示信息
var msgBox=Ext.MessageBox.show({
title:'提示',
msg:'动态更新的进度条和信息文字',
modal:true,
width:300,
progress:true
})
var count=0;//滚动条被刷新的次数
var percentage=0;//进度百分比
var progressText='';//进度条信息
var task={
run:function(){
count++;
percentage=count/10;
//生成进度条文字
progressText='当前完成度：'+percentage*100 +"%";
//更新信息提示框
msgBox.updateProgress(percentage,progressText,'当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
//刷新10次后关闭信息提示框
if(count>10){
Ext.TaskManager.stop(task);
msgBox.hide();
}
},
interval:1000
}
Ext.TaskManager.start(task);
5、3. 进度条：Ext.ProgressBar,是一个可更新的进度条组件，具有2种不同的模式：手动模式和自动模式。
手动模式：程序员需要自己控制进度条的显示、更新、清除；在自动模式中，只需调用wait方法，进度条就会自动无限制地滚动下去，适合为长时间的同步操作进行提示。
手动模式的进度条：updateProgress([Float value:0~1],[String text:进度条上显示的文字],[Boolean animate:是否使用动画效果，默认false])，适用于可以掌握程序执行状态的长时间操作。
Eg: //手动模式进度条实例
var ProgressBar=new Ext.ProgressBar({
width:300,
renderTo:'ProgressBar'
});
var count=0;//滚动条刷新的次数
var percentage=0;//进度百分比
var progressText='';//进度条信息
Ext.TaskManager.start({
run:function(){
count++;
//刷新10次后关闭信息提示框
if(count>10){
ProgressBar.hide();
}
//计算进度
percentage=count/10;
progressText=percentage*100+'%';
//更新信息提示对话框
ProgressBar.updateProgress(percentage,progressText,true);
},
interval:1000,//设置时间间隔
repeat:6//设置执行次数
});
自动模式的进度条：不能准确地反应程序的执行状态，而是给用户提供一个友好的提示，表示正在执行一个耗时的操作，减轻用户的等待感。只调用进度条的wait()方法即可。
//自动模式进度条
var ProgressBar1=new Ext.ProgressBar({
text:'working...',
width:300,
renderTo:'ProgressBar1'
});
//另外可以自定义进度条的样式，通过cls:’样式名’ 添加到配置中
ProgressBar1.wait({
duration:10000,//持续更新10s
interval:1000,//每1s更新一次
increment:10,//进度条分10次更新完毕
text:'waiting',//进度上的文字
scope:this,//回调函数的执行范围
fn:function(){
alert('更新完毕');
} });