浏览器原声的alert(),confirm(),prompt()显得如此寒酸,而且还不能灵活配置,比如啥时候想加个按钮,删个按钮,或者改改按下按钮触发的事件了,都是难上加难的事情。
既然如此,为何不同ext提供的对话框呢?那么漂亮,那么好配置,可以拖啊,可以随便放什么东西,在里边用啥控件都可以,甚至放几个tab乱切换呀,连最小化窗口的功能都提供了。哈哈,神奇啊,完全可以让alert退役了。
嘿嘿,为了加深认识,还是先去看看examples下的例子吧。1.x在dialog目录下。2.0在message-box目录下。
5.2.1. Ext.MessageBox.alert()
Ext.MessageBox.alert('标题', '内容', function(btn) {
alert('你刚刚点击了 ' + btn);
});
现在可以通过第一个参数修改窗口的标题,第二个参数决定窗口的的内容,第三个参数是你关闭按钮之后(无论是点ok按钮还是右上角那个负责关闭的小叉叉),就会执行的函数,嘿嘿,传说中的回调函数。
5.2.2. Ext.MessageBox.confirm()
Ext.MessageBox.confirm('选择框', '你到底是选择yes还是no?', function(btn) {
alert('你刚刚点击了 ' + btn);
});
选择yes或者是no,然后回调函数里可以知道你到底是选择了哪个东东。
5.2.3. Ext.MessageBox.prompt()
Ext.MessageBox.prompt('输入框', '随便输入一些东西', function(btn, text) {
alert('你刚刚点击了 ' + btn + ',刚刚输入了 ' + text);
});
随便输入几个字,然后点按钮,它会告诉你输入了些什么东西
Ext.MessageBox.show({
title: '多行输入框',
msg: '你可以输入好几行',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: function(btn, text) {
alert('你刚刚点击了 ' + btn + ',刚刚输入了 ' + text);
}
});
其实只需要show,我们就可以构造各种各样的窗口了,title代表标题,msg代表输出的内容,buttons是显示按钮,multiline告诉我们可以输入好几行,最后用fn这个回调函数接受我们想要得到的结果。
可能让我们对show这个方法的理解更深
Ext.MessageBox.show({
title:'随便按个按钮',
msg: '从三个按钮里随便选择一个',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: function(btn) {
alert('你刚刚点击了 ' + btn);
}
});
我相信buttons这个参数是一个数组,里边的这个参数绝对了应该显示哪些按钮,Ext.MessageBox给我们提供了一些预先定义好的组合,比如YESNOCANCEL,OKCANCEL,可以直接使用。
实际上只需要将progress这个属性设置为true,对话框里就会显示个条条。
Ext.MessageBox.show({
title: '请等待',
msg: '读取数据中',
width:240,
progress:true,
closable:false
});
看到进度条了吧,不过它可不会自动滚啊滚的,你需要调用Ext.MessageBox.updateProgress让进度条发生变化。
另外多说一句,closable: false会隐藏对话框右上角的小叉叉,这样咱们就不能随便关掉它了。
现在让咱们加上更新进度条的函数,使用timeout定时更新,这样咱们就可以看到效果了。呵呵~效果真不错,这样咱们以后就可以使用进度条了。
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10, '正在读取第 ' + v + ' 个,一共10个。');
}
};
};
for(var i = 1; i < 12; i++){
setTimeout(f(i), i*1000);
}
超炫效果,让对话框好像是从一个按钮跳出来的,关闭的时候还会自己缩回去。你可以看到它从小变大,又从大变小,最后不见了。实际上的配置缺非常简单,加一个animEl吧。让我们看看上边那个三个按钮的例子会变成什么样子。
Ext.MessageBox.show({
title:'随便按个按钮',
msg: '从三个按钮里随便选择一个',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: function(btn) {
alert('你刚刚点击了 ' + btn);
},
animEl: 'dialog'
});
animEl的值是一个字符串,它对应着html里一个元素的id,比如<div id="dialog"></div>。指定好了这个,咱们的对话框才知道根据哪个元素播放展开和关闭的动画呀。
只需要这样,咱们就得到动画效果,嘿嘿,截不到动画效果的图,大家自己去看吧。
以上的例子在examples里都可以找到,不过咱们也提供了一份自己的例子,1.x在lingo-sample/1.1.1/05-01.html。2.0在lingo-sample/2.0/05-01.html。
好消息是,这部分的api没有什么改动。不过表现形式上有些差别,如果像我在例子里写的那样,一次生成N个MessageBox,只能显示最后一个对话框。
不过在1.x里明显有一些数据同步的问题,1.x里的updateProgress甚至可以影响其他对话框的msg,以及可以关闭最后那个对话框。2.0里至少是好的。
5.4. 让弹出窗口,显示我们想要的东东,比如表格
2.0需要window来完成这个任务,1.x版的BasicDialog稍后加上。
稍微说一下window咋用呢?其实看起来跟MessageBox差不多啦,只是可以在里边随便放东西,现在先看个单纯的例子。
var win = new Ext.Window({
el:'window-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
items: [{}],
buttons: [{
text:'按钮'
}]
});
win.show();
首先要讲明的是,这个window需要一个对应的div呀,就像el对应的'window-win'一样,这个div的id就应该等于'window-win',然后设置宽和高,这些都很明朗。
其次,需要设置的是布局类型,layout:'fit'说明布局会适应整个window的大小,估计改变大小的时候也要做响应的改变。
closeAction:'hide'是一个预设值,简单来说就是你用鼠标点了右上角的叉叉,会执行什么操作,这里就是隐藏啦。问为啥是隐藏?因为,因为预设啦,乖,背下来撒。
items部分,嘿嘿~就是告诉咱们的window里要有什么内容啦。这里放表格,放树形,吼吼。
buttons里设置在底端显示的按钮。我们就为了试一下,弄了一个按钮,但是按了没反应,嘿嘿。
最后调用一下show(),让窗口显示出来。
看一下截图啦,更直观。
中间的空白就是items:[{}]的杰作,默认{}会成为一个Ext.Panel,咱们什么都没定义,里边自然什么都没有。当然500*300不会只有这么大,但是为了让图片小一点儿,我把它拖下了,嘿嘿~自动支持的修改大小效果,帅吧?
例子超简单,见lingo-sample/2.0/05-02.html。
唉,地方都划出来了,弄个表格放进去就好了呗。
首先弄一个grid,超简单那种。我是直接把第二章的例子给copy了过来,嘿嘿,表格还是那个表格哟。
有了表格,直接扔到window里,然后ok,哈哈~效果如下:
看到没?表格出来了,如果想加分页条什么的,只管动手,别怕伤到窗口。
现在回头让我们看看,需要注意些什么。
-
第一,grid不用调用render()了,只要加入了window,在win.show()的时候,会自动渲染里边的组件。
-
第二,html里,要把grid对应的div写到window的div里面,嵌套关系。
<div id="window-win">
<div id="grid"></div>
</div>
-
第三,如果还不知道怎么把grid放进window里,我给你看下代码。
var win = new Ext.Window({
el:'window-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
items: [grid],
buttons: [{
text:'按钮'
}]
});
看到items:[grid]了吗?就这么简单哟。
好了,具体例子在lingo-sample/2.0/05-03.html。敬请大家继续关注。
希望上边的那些足够了,如果不够,咱们还有更厉害的,如果你看了examples里的例子,就知道里边还有更复杂的对话框,你甚至可以在里边用各种布局。
分享到:
相关推荐
超脱了一切的弹出窗口。 第 6 章 奔腾吧!让不同的浏览器里显示一样的布局。 第 7 章 低鸣吧!拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才开始讲基础问题。 第 9 章 沉寂吧!我们要自己的控件 ...
超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个例子 5.2.1. Ext.MessageBox.alert() 5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3....
"雀跃众筹项目微信端"是一个基于微信平台的众筹应用,主要使用JavaScript技术进行开发,具体涉及的领域可能包括微信小程序、前端交互设计以及后端API接口通信等。在这个项目中,JavaScript作为主要的编程语言,承担...
超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个例子 5.2.1. Ext.MessageBox.alert() 5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3. 如果你...
超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个例子 5.2.1. Ext.MessageBox.alert() 5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3. 如果你想...
在这个充满变化与机遇的时代,每个人都会经历无数难忘的瞬间,尤其是那些令人内心雀跃的时刻。它们如同点亮生命的火花,让人在人生的道路上留下一道道亮丽的风景线。为了让同学们能够更好地抒发这样的情感,下面将...
这篇文章,名为“我心雀跃”,它是一篇关于生活感悟与成长体验的作文,字里行间透露出作者对生活中小确幸的珍视,对自然环境的亲切感,以及对乡村生活的向往。而这些感受,不仅构成了一幅幅生动的画面,更是我们每个...
第四层交换技术相对原来的第二层、...在巨大的市场潜力推动下,更多的厂商致力于生产性能更好、更先进的第四层交换器产品,甚至第七层交换机产品这样令人雀跃的局面也是大势所趋,这必将进一步促进网络应用技术的发展。
5. 成语运用:第四题考察成语的应用,比如“汗牛充栋”、“淋漓尽致”、“洗心革面”、“头头是道”等,要求学生理解成语的含义并能恰当使用。 6. 病句辨析:第五题是关于语病的辨析,让学生找出没有语病的句子,...
5. **专题及综合实践** - 成语与谚语:这题要求学生提供与物候相关的成语和谚语,比如成语“春暖花开”、“秋高气爽”,谚语“瑞雪兆丰年”、“清明前后,种瓜点豆”等,都是与自然规律和农事活动密切相关的。 - ...
5. 开发趋势与挑战 移动社交应用的发展趋势表明,用户体验、个性化推荐和社交数据分析将成为关键。雀跃的设计和开发需要考虑如何利用Android的优势,提供流畅、直观的交互,同时应对大数据处理和深度学习等先进技术...
商代前期金文的代表作有《戌嗣子鼎》《宰甫卣》等,笔画饱满柔韧,结体端庄雀跃,体势恢弘。西周金文比拟风行,要紧有《毛公鼎》《散氏盘》等,作风多姿多彩,笔画遒劲峻拔,结体天然且变更无常,笔法圆润精严,行款...
- 第4、第5小节将雏菊和溪流拟人化,赋予它们开放和歌唱的能力。 - 描绘“我”欣喜动作的词:看到、捉住、放掉、等待、唤醒、跑。 这些知识点旨在帮助学生巩固拼音、词汇、语言运用等方面的基础,通过阅读理解...
【标题】和【描述】提及的是江苏省南通市如皋第一中专2015年对口单招高三语文试题的情况,这份试题采用的是苏教版教材。【标签】表明这是一个课件,可能包含了教学材料或者练习题目的内容。以下是根据【部分内容】中...
雀跃计划用C ++ / Scheme编写的Souped-up R4RS方案解释器!编写尽可能少的C ++和尽可能多的Scheme,以实现编译速度和可入侵性!使用import库系统选择加入原语,以加快解释器的启动速度!使用雀跃方案: =>有关逐步的...
江苏省景范中学2020学年九年级语文第一学期期中考试试卷,是一份针对初中学生语文能力的全面检测试卷。它不仅覆盖了传统的语文基础知识,如汉字的正确书写和错别字的辨别,还注重考查学生对经典文学作品的积累以及对...
根据给出的拼音,正确填写汉字如下: - kāng 慷 - biàn 辨 - wéi 唯 - yù 遇 - xié 谐 - jùn 峻 - 抵御 - 协作 - 俊俏 - 复习 - 告别 - 幕布 - 监督 - 威胁 - 骏马 二、词语搭配 1. 形容人多...
“(纯真)的幻想”表达了儿童天真无邪的想象,“(朴实)无华”形容事物简单而真实,“(迫不)及待”表现出急切的心情,“(小心)翼翼”描述谨慎的行为,“欢呼(雀跃)”则表达出极度的喜悦。 接下来,句型转换...
例如,让学生填写“摇摆”、“雀跃”、“盼望”和“变换”等词语,既能让学生体会到春天的动感,又能训练他们的书写能力。这些词语往往与孩子们的生活紧密相连,能够引起他们的共鸣,从而更好地记忆。 字词的辨析...
湖北省丹江口市凉水河镇2017届九年级语文上学期第一次月考试题,作为一项重要的教学评估活动,无疑是对九年级学生语文基础知识和理解能力的全面检阅。本次试题涵盖了多个方面的考查内容,旨在通过这一系列的测试题目...