静态MessageBox,代码包含注释,不需要的方法先要注释掉
<html> <head> <title>ExtJs-JSON</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="bootstrap.js"></script> <script type="text/javascript" src="locale/ext-lang-zh-CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { // Ext.MessageBox.alert(title,text,callback); Ext.MessageBox.alert('Alert','Show Alert',callBack); function callBack(id) { Ext.MessageBox.alert('Result','<font color=red>' + id + '</font>'); } }); Ext.onReady(function() { // Ext.MessageBox.prompt(title,text,callback,scope,multilines,defaulttext); Ext.MessageBox.prompt('Prompt','Input some text: ',callBack,this,true,'DefaultValue'); function callBack(id,msg) { Ext.MessageBox.alert('Result','<font color=red>' + id + '</font></Br>' + msg); } }); Ext.onReady(function() { // Ext.MessageBox.confirm(title,text,callback); Ext.MessageBox.confirm('Confirm','Click me!',callBack); function callBack(id,msg) { Ext.MessageBox.alert('Result','<font color=red>' + id + '</font></Br>' + msg); } }); Ext.onReady(function() { // Ext.MessageBox.wait(title,text,properties); Ext.MessageBox.wait('Waiting','Wait!',{text:'Processing!'}); }); Ext.onReady(function(){ // Ext.MessageBox.show(properties); Ext.MessageBox.show({ title:'Tip', msg: 'justwe', modal: true, prompt: true, value: "input", fn: callBack, buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.QUESTION, }); function callBack(id,msg) { Ext.MessageBox.alert('Result','<font color=red>' + id + ' ' + msg'</font>'); } }); </script> </head> <body> </body> </html>
稍微加点动态因素
<html> <head> <title>ExtJs-JSON</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="bootstrap.js"></script> <script type="text/javascript" src="locale/ext-lang-zh-CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ // update text show time var msgBox = Ext.MessageBox.show({ title:'Tip', msg: 'show time', modal: true, buttons: Ext.Msg.OK, fn: function() { Ext.TaskManager.stop(task); } }) var task = { run:function() { msgBox.updateText('<font color=red>Time: ' + Ext.util.Format.date(new Date(),'Y-m-d g:i:s A</font>')); }, interval:1000 } Ext.TaskManager.start(task); }); Ext.onReady(function() { var msgBox = Ext.MessageBox.show({ title:'Tip', msg: 'show process', modal: true, width:300, progress:true }) var count = 0; var percentage = 0; var progressText = ''; var task = { run: function() { count++; percentage = count/10; progressText = 'Processing: ' + percentage*100 + '%'; msgBox.updateProgress(percentage,progressText,'<font color=red>Now time: ' + Ext.util.Format.date(new Data(),'Y-m-d g:i:s A</font>')); if (count > 10) { Ext.TaskManager.stop(task); msgBox.hide(); } }, interval:1000 } Ext.TaskManager.start(task); }); </script> </head> <body> </body> </html>
来个综合的示例
messagebox_all.html
<html> <head> <title>消息框综合演示</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="bootstrap.js"></script> <script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="messagebox_all.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1><font color="red">消息框综合演示</font></h1> <p> <b>Alert</b><br/> 只有OK的确认框 <button id="show_alert">演示</button> </p> <p> <b>Confirm</b><br/> 带有YES||NO的选择框 <button id="show_confirm">演示</button> </p> <p> <b>Prompt</b><br/> 带有文本输入的对话框 <button id="show_prompt">演示</button> </p> <p> <b>Show</b><br/> 自定义对话框 <button id="show_show">演示</button> </p> <p> <b>Progress</b><br/> 带有进度条的对话框(手动) <button id="show_progress">演示</button> </p> <p> <b>Progress_plus</b><br/> 带有进度条的对话框(自动) <button id="show_progress_plus">演示</button> </p> <p> <b>Icon</b><br/> 带有图标的自定义按钮对话框(手动) <button id="show_icon">演示</button> </p> </body> </html>messagebox_all.js
相关推荐
用钩子函数实现的自定义MessageBox,可以修改按钮的文字等属性
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
在其中新建一个my目录,以后所有的样例文件都...Extjs MessageBox</title> <link rel=”Stylesheet” type=”text/css” href=”../resources/css/ext-all.css” /> [removed][removed] <script type
论坛上找的ExtJs消息提示框,各个方向的都有,十分人性化
1. ExtJs2.0学习系列(1)--Ext.MessageBox 2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
ExtJs2.0学习系列(1)--Ext.MessageBox
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
ExtJS实现文件下载的方法 前台代码: Ext.get('outputuser').on('click', function(e){ Ext.MessageBox.confirm('提示','确定要导出用户吗?',function(btn){
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 ...接下来认识一下Ext.MessageBox Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种
Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮“是”...//相关内容 返回值: Ext.MessageBox 代码示例: 代码如下: <script type=”tex
第1章 认识ExtJS 1.1 ExtJS的精彩表现 1.2 ExtJS的前世今生 1.3 是否真的需要学习ExtJS 1.4 ExtJS4.0新特性 1.5 ExtJSUI组件基础 1.6 了解一下类似技术 1.7 本章小结 第2章 开始ExtJS之旅 2.1 认识ExtJS的...
这是一份Extjs2.0的技术材料,全部是基础知识,非常适合初学者。
一、基础篇 1、Ext JS下载及配置 2、基本功能 2.1、Ext.MessageBox消息框 2.2、Ext.window.MessageBox 3、工具栏和菜单栏 3.1、Ext.toolbar.Toolbar工具栏 3.2、Ext.menu.Menu菜单栏 4、表单
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
修改过的Ext.MessageBox.prompt方法,可直接调用,对输入的文字加密,适合做密码验证框
EXT简介 无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你。... 目录 ...o 6.1 MessageBox o 6.2 Grid o 6.3 还有更多的.. • 7 使用Ajax o 7.1 PHP o 7.2 ASP.Net o 7.3 Cold Fusion