ExtJs学习之弹出框,提示框,输入框等框
来源:互联网 发布:新加坡手机网络制式 编辑:程序博客网 时间:2024/04/30 01:25
1.ExtJs之消息框:
语法:Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope); 参数定义:
例如:
如果要将上面的代码运行,则要将改源码保存JS,然后导入页面中,增加
2. ExtJs 之输入框
语法:Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline);
参数定义:
例如:
3.ExtJs之确认框
语法:
Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);
参数定义:
4. ExtJs之自定义消息框
语法:
Ext.MessageBox.show(Object config); config属性说明:
注意: 在ExtJs.MessageBox中已经定义了buttons的取值.如下
OK:只有"确定"按钮
CANCEL:只有"取消"按钮
OKCANCEL:有"确定"和"取消"按钮
YESNO: 有"是"和"否"按钮
YESNOCANCEL:有"是"、"否"和"取消"按钮
icons取值如下
INFO:信息图标
WARNING:警告图标
QUESTION:询问图标
ERROR:错误图标
5.ExtJs之进度条对话框
进度条对话框也是自定义消息框的一种,只是在配置Config时添progress=true即可,同时在设置其他相关信息,比如进度提示。
下面看看代码:
解析上述代码中ProgressText属性是进度条滚动之前最初的文本,滚动进程由updateProgress(Number value,String progressText)方法来定义,参数value是从0-1之间的小数,表示进度百分比;progressText则表示进度条滚动过程中的文本提示信息。
6.ExtJs之消息框动画效果
直接看代码
在html代码中加入
语法:Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope); 参数定义:
- title: 标题
- msg: 提示内容
- fn: 提示框关闭之后自动调用的回调函数
- scope: 作用域,用于指定this指向哪里
例如:
- ExtJsAlert = function(){
- Ext.MessageBox.alert("提示框","这是一个提示框");
- }
- or
- ExtJsAlert = function(){
- Ext.MessageBox.alert("提示框","这是一个提示框",function(){
- alert("提示框关闭")
- });
- }
ExtJsAlert = function(){ Ext.MessageBox.alert("提示框","这是一个提示框"); } or ExtJsAlert = function(){ Ext.MessageBox.alert("提示框","这是一个提示框",function(){ alert("提示框关闭")}); }
如果要将上面的代码运行,则要将改源码保存JS,然后导入页面中,增加
- <input type="button" value="点击" onclick="ExtJsAlert();"/>
<input type="button" value="点击" onclick="ExtJsAlert();"/>
2. ExtJs 之输入框
语法:Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline);
参数定义:
- title: 标题
- msg: 提示内容
- fn: 提示框关闭之后自动调用的回调函数
- scope: 作用域,用于指定this指向哪里
- Boolean/Number:如果为true或为数字,则表示允许输入多行或者指定默认高度
例如:
- ExtJsPrompt = function(){
- Ext.MessageBox.prompt("输入框","请输入名字:",function(bu,txt){
- Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为:"+txt);
- });
- }
- or
- ExtJsPrompt = function(){
- Ext.MessageBox.prompt("输入框","请输入名字:",function(bu,txt){
- Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为:"+txt);
- },this,300);
- }
ExtJsPrompt = function(){ Ext.MessageBox.prompt("输入框","请输入名字:",function(bu,txt){ Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为:"+txt);});}or ExtJsPrompt = function(){ Ext.MessageBox.prompt("输入框","请输入名字:",function(bu,txt){ Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br> 输入的内容为:"+txt);},this,300);}
3.ExtJs之确认框
语法:
Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);
参数定义:
- title: 标题
- msg: 提示内容
- fn: 提示框关闭之后自动调用的回调函数
- scope: 作用域,用于指定this指向哪里
- ExtJsComfirm = function(){
- Ext.MessageBox.confirm("确认","请点击下面的按钮作出选择",function(btn{
- Ext.MessageBox.alert("你单击的按钮是:"+btn);
- });
- }
ExtJsComfirm = function(){ Ext.MessageBox.confirm("确认","请点击下面的按钮作出选择",function(btn{Ext.MessageBox.alert("你单击的按钮是:"+btn);});}
4. ExtJs之自定义消息框
语法:
Ext.MessageBox.show(Object config); config属性说明:
- title : 消息框标题栏
- msg:消息内容
- width:消息框的宽度
- multiline: 是否显示多行文本
- closable:是否显示关闭按钮
- buttons:按钮
- icon:图标
- fn:回调函数
- ExtJsCustom = function(){
- var config ={
- title:"自定义对话框",
- msg:"这是一个自定义对话框",
- width:400,
- multiline:true,
- closable:false,
- buttons:Ext.MessageBox.YESNOCANCEL,
- icon:Ext.MessageBox.QUESTION,
- fn: function(btn,txt){
- Ext.MessageBox.alert("Result","你点击了'yes'按钮<br>,输入的值是:"+txt);
- };
- Ext.MessageBox.show(config);
- }
ExtJsCustom = function(){ var config ={ title:"自定义对话框", msg:"这是一个自定义对话框", width:400, multiline:true, closable:false, buttons:Ext.MessageBox.YESNOCANCEL, icon:Ext.MessageBox.QUESTION, fn: function(btn,txt){ Ext.MessageBox.alert("Result","你点击了'yes'按钮<br>,输入的值是:"+txt);} }; Ext.MessageBox.show(config); }
注意: 在ExtJs.MessageBox中已经定义了buttons的取值.如下
引用
OK:只有"确定"按钮
CANCEL:只有"取消"按钮
OKCANCEL:有"确定"和"取消"按钮
YESNO: 有"是"和"否"按钮
YESNOCANCEL:有"是"、"否"和"取消"按钮
icons取值如下
引用
INFO:信息图标
WARNING:警告图标
QUESTION:询问图标
ERROR:错误图标
5.ExtJs之进度条对话框
进度条对话框也是自定义消息框的一种,只是在配置Config时添progress=true即可,同时在设置其他相关信息,比如进度提示。
下面看看代码:
- ExtJsProgress = function(){
- Ext.MessageBox.show({
- title:'请等待片刻',
- msg:'正在加载项目....',
- progressText:'正在初始化...',
- Width:300,
- progress:true,
- closable:false
- });
- var f = function(v){
- return function(){
- if(v == 12){
- Ext.MessageBox.hide();
- Ext.MessageBox.alert('完成','所有项目加载完成!');
- }else{
- var i = v/11;
- Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');
- }
- };
- };
- for(var i=0; i<13;i++){
- setTimeout(f(i),i*500);
- }
- }
ExtJsProgress = function(){ Ext.MessageBox.show({ title:'请等待片刻', msg:'正在加载项目....', progressText:'正在初始化...', Width:300, progress:true, closable:false }); var f = function(v){ return function(){ if(v == 12){ Ext.MessageBox.hide(); Ext.MessageBox.alert('完成','所有项目加载完成!'); }else{ var i = v/11; Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成'); } }; }; for(var i=0; i<13;i++){ setTimeout(f(i),i*500); } }
解析上述代码中ProgressText属性是进度条滚动之前最初的文本,滚动进程由updateProgress(Number value,String progressText)方法来定义,参数value是从0-1之间的小数,表示进度百分比;progressText则表示进度条滚动过程中的文本提示信息。
6.ExtJs之消息框动画效果
直接看代码
- ExtJsAnimal = funciton(){
- var config = {
- title:"飞出的消息框",
- msg:"这是一个自定义对话框,是飞出来的哦",
- width:400,
- multiline:true,
- closable:false,
- buttons:Ext.MessageBox.YESNOCANCEL,
- icon:Ext.MessageBox.QUESTION,
- animEl:"fly"
- };
- Ext.MessageBox.show(config);
- }
ExtJsAnimal = funciton(){ var config = { title:"飞出的消息框", msg:"这是一个自定义对话框,是飞出来的哦", width:400, multiline:true, closable:false, buttons:Ext.MessageBox.YESNOCANCEL, icon:Ext.MessageBox.QUESTION, animEl:"fly" }; Ext.MessageBox.show(config); }
在html代码中加入
- <input type="button" value="Animal" id="fly" onclick="ExtJsAnimal();"/>
- =fly就是animEL的值
- ExtJs学习之弹出框,提示框,输入框等框
- EXTJS 弹出提示框
- ExtJS实现弹出密码输入框
- ExtJS入门 提示框 show.messagebox等
- extjs各种弹出框
- extjs各种弹出框
- Extjs弹出框
- extjs各种弹出框
- (三)ExtJs小例子之:带有输入框的提示框(prompt)
- swift学习之弹出提示框的几种方式
- extjs 提示框介绍
- ExtJs教程--提示框
- Extjs文本输入框
- extjs弹出框使用fckeditor
- Extjs自定义弹出框默认值
- qlineedit校验输入合法性,弹出错误提示框
- js实现删除等其他操作弹出的提示框
- Android 开发之 Toast (弹出提示框)
- Android 分割线
- 牛人博客
- 表单验证
- GCC 编译选项
- Piped 管道流的使用
- ExtJs学习之弹出框,提示框,输入框等框
- 两个list比较去掉重复值
- The ball collide
- Sql时间函数
- C++回调函数(callback)的使用
- 菜鸟修炼C语言小设计之——工资统计
- 经典多态例题(二)
- JVM 启动调优
- Android高手进阶教程(一)-------Android常用命令集锦(图文并茂)!