`
solomongg
  • 浏览: 53090 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

extjs msg用法

ext 
阅读更多

1.Ext.MessageBox.alert()方法
有四个参数:alert( title , msg , function(){} ,this)
其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发,可以传入点击的按钮的id,第四个参数scope:指回调函数作用域。

Ext.Msg.alert("Notice","hello world!");  //alert会阻塞程序的执行,而Ext版的alert是异步执行
Ext.Msg.alert(“Notice”,”<font color=red>hello world!</font>”); //支持html格式
Ext.Msg.alert(“Notice”,”<font color=red>hello world!</font>”,function callback(id){alert(‘您点的是’+id);});

2.Ext.MessageBox.confirm()方法

基本上同alert()方法一模一样。 注意这点:

Ext.MessageBox.confirm(“title“,“msg“,function(e){alert(e);});
这个参数e是什么?它是你点击的弹出框的按钮的值,三种值:yes,no,cancel. Alert()方法也是如此,不过只有两种值:ok,cancel.

回调函数可以传入一唯一参数:单击按钮的id,点击退出按钮也会触发此事件

3.Ext.MessageBox.prompt()方法
有五个参数,比前面alert方法多一个是否多行。

Ext.MessageBox.prompt(“title“,"msg");
Ext.Msg.prompt(‘Notice’,'请输入你的姓名:’,function callback(id,msg){alert(‘单击的按钮ID:’+id+’\n您输入的姓名是:’+msg);},this,false);
//输入”javachen”,点击ok按钮,弹出单击的按钮ID:OK 您输入的姓名是:javachen
Ext.MessageBox.prompt(“title“,“msg“,function(e,text){alert(e+“-“+text);},this,true);//true为多行,this表示作用域
4.Ext.MessageBox.show()方法
功能很强大,采用config配置形式,比前面的方法使用更方便。 参数很多,在此列举最常用的配置参数:

1.animEl:对话框弹出和关闭时的动画效果,比如设置为“id1”,则从id1处弹出并产生动画,收缩则相反
2.buttons:弹出框按钮的设置,主要有以下几种:Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CANCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定义按钮上面的字:{“ok“,“我本来是ok的“}。 若设为false,则不显示任何按钮.
3.closable:如果为false,则不显示右上角的小叉叉,默认为true。
4.msg:“消息的内容“
5.title:“标题“
6.fn:关闭弹出框后执行的函数
7.icon:弹出框内容前面的图标,取值为Ext.MessageBox.INFO,
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:弹出框的宽度,不带单位
9.prompt:设为true,则弹出框带有输入框
10.multiline:设为true,则弹出框带有多行输入框
11.progress:设为true,显示进度条,(但是是死的)
12.progressText:显示在进度条上的字
13.wait:设为true,动态显示progress
14.waitConfig:配置参数,以控制显示progress
例子:
Ext.Msg.show({
title:’Notice’,
msg:’请输入您的姓名!’,
width:300,
prompt:true,
//multiline:true,
//wait:true,
//progress:true,
//progressText:’progressing’,
closable:true,
modal:true,

buttons:Ext.Msg.OKCANCEL,
icon:Ext.Msg.INFO
});



5.Ext.MessageBox.wait()
参数 msg:显示信息  title:标题      config:配置信息
例子:
Ext.Msg.wait(‘请等待,操作正在进行中’,'Notice’);
Ext.Msg.wait(‘请等待,操作正在进行中!’,'Notice’,
{
text:’processing’,
duration:2700,   //进度条在被重置前运行的时间
interval:300,        //进度条的时间间隔
increment:10,      //进度条的分段数量
fn:function callback(){
alert(“complete”);
}
});
6.Ext.MessageBox.hide()
把显示着的当前message box隐藏起来。
参数: 无.       Returns:   Ext.MessageBox
7.Ext.MessageBox.updateProgress()
Ext.MessageBox.updateProgress(value,”ProgressText”,”msg”)  //(三个参数,看名字就知道意思), 注意value为0-1之间的数,表示进度条的进度.


8.修改默认的按钮文字为中文
Ext.Msg.buttonText={
yes:' yes',
no:'否',
ok:'确定',
cancel:'取消'
};
Ext.Msg.buttonText.yes='是';
9.动态跟新提示框
1)跟新提示文字
var msgBox = Ext.MessageBox.show({
title:’提示’,
msg:’动态跟新的信息文字’,
modal:true,
buttons:Ext.Msg.OK
})
//Ext.TaskMgr是一个功能类,用来定时执行程序,
//在这里我们使用它来定时触发提示信息的更新。
Ext.TaskMgr.start({
run:function(){
msgBox.updateText(‘会动的时间:’+new Date().format(‘Y-m-d g:i:s A’));
},
interval:1000
});
2).跟新进度条及提示信息
var msgBox = Ext.MessageBox.show({
title:’提示’,
msg:’动态跟新的进度条和信息文字’,
modal:true,
width:300,
progress:true
})

var count = 0;//滚动条被刷新的次数
var percentage = 0;//进度百分比
var progressText = ”;//进度条信息

Ext.TaskMgr.start({
run:function(){
count++;   //刷新10次后关闭信息提示对话框
if(count > 10){
msgBox.hide();
}
//计算进度
percentage = count/10;
//生成进度条文字
progressText = ‘当前完成度:’+percentage*100 + “%”;
//更新信息提示对话框
msgBox.updateProgress(percentage,progressText,
‘当前时间:’+new Date().format(‘Y-m-d g:i:s A’));

},
interval:1000
});

分享到:
评论

相关推荐

    extjs 进度条的显示

    在IT领域,特别是前端开发中,ExtJS是一个广泛使用的JavaScript框架,用于构建复杂的企业级Web应用程序。本文将深入探讨如何在ExtJS中实现进度条的显示,这是一个在数据加载、文件上传或任何需要用户等待的任务中...

    Extjs的loading效果

    在ExtJS中,我们可以使用`Ext.LoadMask`类来创建一个全局或者局部的加载遮罩。加载遮罩会在指定元素上覆盖一层半透明的背景,并显示一个加载图标或文字。例如,我们可以为整个页面设置加载遮罩: ```javascript ...

    ExtJs官方网站中文的入门指南 javascript

    通过本文档的学习,您已经掌握了ExtJs的基本使用方法,包括环境搭建、核心概念理解、基本控件使用以及Ajax通信等方面的知识。希望这些内容能够帮助您顺利入门ExtJs,为后续更深入的学习打下坚实基础。

    ExtJs消息提示框

    ExtJs是一种基于JavaScript的富客户端应用框架,由Sencha公司开发。它提供了丰富的组件库,用于构建复杂的...通过理解和掌握这个组件的使用,可以提升你的ExtJs应用的交互体验,为用户提供更加人性化的信息提示服务。

    extjs文档的详细介绍

    它的基本使用方法如下: ```javascript Ext.Ajax.request({ url: 'your_server_url', method: 'POST', // 可选'GET', 'POST', 'PUT', 'DELETE' params: {key: value}, // 发送到服务器的数据 success: function...

    ExtJs入门实例.doc

    本文将围绕ExtJs2.0入门实例,重点讲解Ext.MessageBox的使用,包括其基本方法和配置选项,帮助初学者快速掌握这一核心功能。 1. **Ext.MessageBox.alert()** `Ext.MessageBox.alert()`方法用于显示简单的警告...

    ExtJs自定义消息框

    本文将详细介绍ExtJs中三种常用的消息框——提示框(Alert)、输入框(Prompt)和确认框(Confirm)的使用方法,并通过实例演示如何在实际项目中运用这些功能。 #### 二、提示框(Alert) 提示框主要用于向用户...

    extjs实践大量实例讲解

    下面我们将通过一系列具体示例来逐步学习 ExtJS 的使用方法: ### 示例 1:创建一个简单的窗口 ```javascript Ext.create('Ext.window.Window', { title: 'Hello ExtJS', width: 400, height: 200, layout: '...

    ExtJs GridPanel双击事件获得双击的行

    在ExtJs中,我们可以使用`viewConfig`配置项中的`selType`来定义选择模型,通常是'checkboxmodel',以便在每行前添加复选框。然后通过`selModel`配置项设置双击时选中复选框的行为。同时,我们可以监听`itemdblclick...

    js语法之extjs

    在使用Extjs时,可以通过设置`Ext.Loader`来启用动态加载,并指定资源路径: ```javascript // 开启动态加载 Ext.Loader.setConfig({ enabled: true }); // 设置文件路径,将“../ux/”目录下的所有Js文件映射到...

    spring mvc +Extjs

    在ExtJS应用中,我们可以使用`Ext.Ajax.request`方法发送AJAX请求,将JSON数据作为请求参数。以下是一个示例,展示了如何向服务器发送POST请求,并接收JSON响应: ```javascript Ext.Ajax.request({ url: '...

    Extjs4的FormPanel从后台load json数据的要点

    在Extjs4中,可以使用`form.load()`方法将JSON数据加载到FormPanel中。这个方法接收一个配置对象作为参数,该对象通常包括URL、请求类型(GET或POST)、成功回调函数和失败回调函数等属性。当后端服务器返回JSON数据...

    EXTjs4类似qq消息提醒

    在EXTjs4中,可以创建`Ext.MessageBox`实例来显示通知书,利用`Ext.MessageBox.show`方法,并传递相应的配置选项,如消息类型(警告、信息、确认等)、标题、文本、按钮布局等。例如: ```javascript Ext....

    extjs实例 入门,提供ext所需要的资源文件,详细叙述怎么改变文件颜色

    本实例将帮助初学者了解如何使用ExtJS入门,并通过提供的资源文件学习如何改变文件的颜色。 首先,我们要明白在ExtJS中改变文件颜色主要涉及到CSS样式和组件的配置。ExtJS的组件如按钮、表格、面板等都可以通过CSS...

    Extjs4文件上传,后台struts2

    在本文中,我们将深入探讨如何使用ExtJS 4与Struts2框架实现文件上传功能。ExtJS是一个强大的JavaScript库,提供了丰富的用户界面组件,而Struts2是Java Web开发中的一个MVC框架,用于处理后端业务逻辑。下面,我们...

    ExtJS帮助文档

    ### ExtJS基础知识与应用 #### ExtJS简介 ExtJS是一款基于...通过以上内容的学习,你应该已经掌握了ExtJS的基础知识和一些常用组件的用法。接下来可以进一步深入学习更多高级特性,如自定义组件、数据绑定等。

    extjs_php向后台提交json_post的接收方法实例

    在ExtJS中,我们可以使用`Ext.Ajax.request`或FormPanel的`submit`方法来发送POST请求。例如: ```javascript Ext.Ajax.request({ url: 'post.php', method: 'POST', params: { data: Ext.encode({key1: 'value...

    extjs实现用户登录界面

    总的来说,学习和实现"extjs实现用户登录界面"需要掌握ExtJS的基本组件用法,包括表单、文本字段、密码字段以及按钮。同时,理解如何处理表单事件,如验证和提交,是至关重要的。通过实践这个项目,开发者能够更好地...

    ExtJs中Store加载(load)时候提示信息

    如果需要刷新Store中的数据并显示加载提示,同样可以在`reload`方法中使用`callback`来控制提示信息的显示与隐藏。例如: ```javascript reportStore.reload({ callback: function (records, options, success) { ...

Global site tag (gtag.js) - Google Analytics