日期:2014-05-16  浏览次数:20346 次

ExtJS4.0学习笔记一

//Ext.require(['*']);
Ext.onReady(function() {
?Ext.MessageBox.msgButtons[0].setText('确定');? //ok
?Ext.MessageBox.msgButtons[1].setText('接受');? //yes
?Ext.MessageBox.msgButtons[2].setText('取消');? //no
?Ext.MessageBox.msgButtons[3].setText('放弃');? //cancel
?var toolbar = new Ext.toolbar.Toolbar({
??renderTo : 'toolbar',
??width : 800
?});

?toolbar.add([ {
??text : '标准提示框', // 按钮上显示的文字
??handler : extjsAlert, // 单击后调用的函数
??inconCls : 'newIcon' // 按钮上显示的图标
?}, '-', // 加入工具栏分隔符
?{
??text : '确认消息框',
??handler : extjsConfirm,
??inconCls : 'newIcon'
?}, '-', '->',// 加入一个充满工具栏的空白元素
?{
??text : '输入信息提示框',
??handler : extjsPrompt,
??inconCls : 'newIcon'
?}, '-',{
??text : '进度条提示框',
??handler : extjsWait,
??inconCls : 'newIcon'
?}, '-',{
??text : 'show提示框',
??handler : extjsShow,
??inconCls : 'newIcon'
?},'-',{
??text : '更新提示文字',
??handler : extjsRefresh,
??inconCls : 'newIcon'
?}, '-',{
??text : '更新进度条',
??handler : extjsRefreshProgerss,
??inconCls : 'newIcon'
?}]);
?
?function extjsAlert(btn) {
??
??
??
??Ext.MessageBox.alert('提示框名称', '<font color=red>内容,支持HTML格式文本<font>');
??alert('!'); // Ext的消息框是异步执行,不会影响程序的运行,所以如果需要根据提示框的选择结果确定流程,需将选择后的函数放在提示框的回调函数中
?}

?function extjsConfirm(btn) { // 显示YES/NO按钮,做出选择
??
??
??
??Ext.MessageBox.confirm('提示框名称', '请单击我,做出选择', callBack);
??function callBack(id) { // 传入回调函数中按钮id是区分用户选择的唯一方法,通过判断该参数来执行不同的操作
???Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮');
??}
?}

?function extjsPrompt() { // 显示一个获取用户输入信息的提示框,接收用户输入
??
??
??
??Ext.MessageBox.prompt('提示框名称', '请输入...', callBack, this,true, '这是默认值');
??function callBack(id, msg) { // 传入回调函数中按钮id是区分用户选择的唯一方法,通过判断该参数来执行不同的操作
???Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮' + '\n' + '输入内容是:'
?????+ 'msg');
??}
?}
?
?function extjsWait(btn) { //不能定义一个时间自动关闭
??Ext.MessageBox.wait('正在运行中,请等待...', '提示框名称', {text:'进度条上的文字'});
?}
?
?function extjsShow(btn) { //上述三个提示框内部调用的都是这个方法,配置丰富,具体看API文档
??Ext.MessageBox.show({
???title:'提示框名称',
???msg:'三个按钮,和一行文本输入域',
???width:600,
???height:500,
???modal:true,
???prompt:true,
???value:'请输入...',
???fn:callBack,
???buttons:Ext.Msg.YESNOCANCEL,
???icon:Ext.Msg.QUESTION
??});
??function callBack(id,msg){
???Ext.MessageBox.alert('选择结果', '点击了' + id + '按钮' + '\n' + '输入内容是:'
?????+ 'msg');
??}
?}
?function extjsRefresh(btn){
??var msgBox=Ext.MessageBox.show({
???title:'提示',
???msg:'动态更新的信息文字',
???modal:true,
???buttons:Ext.Msg.OK,
???fn:function(){
????Ext.TaskManager.stop(task);
???}
??});
??var task={
???run:function(){
????msgBox.updateText('会动的时间:'+ Ext.util.Format.date(new Date(),'Y-m-d H:i:s'));
???},
???interval:1000
???};
??Ext.TaskManager.start(task);
?}
?
?function extjsRefreshProgerss(btn){
??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 H:i:s'));
?????if(count > 10){
??????Ext.TaskManager.stop(this);
??????msgBox.hide();
?????}
????},
????interval:300
??};
??Ext.TaskManager.start(task);
?}
});