`
shaohan126448
  • 浏览: 118795 次
  • 来自: 北京
社区版块
存档分类
最新评论

第 5 章 雀跃吧!超脱了一切的弹出窗口。

阅读更多

5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。

 

浏览器原声的alert(),confirm(),prompt()显得如此寒酸,而且还不能灵活配置,比如啥时候想加个按钮,删个按钮,或者改改按下按钮触发的事件了,都是难上加难的事情。

既然如此,为何不同ext提供的对话框呢?那么漂亮,那么好配置,可以拖啊,可以随便放什么东西,在里边用啥控件都可以,甚至放几个tab乱切换呀,连最小化窗口的功能都提供了。哈哈,神奇啊,完全可以让alert退役了。

5.2. 先看看最基本的三个例子

 

嘿嘿,为了加深认识,还是先去看看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);
});

随便输入几个字,然后点按钮,它会告诉你输入了些什么东西

5.3. 如果你想的话,可以控制得更多

 

5.3.1. 可以输入多行的输入框

 
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这个回调函数接受我们想要得到的结果。

5.3.2. 再看一个例子呗

 

可能让我们对show这个方法的理解更深

Ext.MessageBox.show({
    title:'随便按个按钮',
    msg: '从三个按钮里随便选择一个',
    buttons: Ext.MessageBox.YESNOCANCEL,
    fn: function(btn) {
        alert('你刚刚点击了 ' + btn);
    }
});

我相信buttons这个参数是一个数组,里边的这个参数绝对了应该显示哪些按钮,Ext.MessageBox给我们提供了一些预先定义好的组合,比如YESNOCANCEL,OKCANCEL,可以直接使用。

5.3.3. 下一个例子是进度条

 

实际上只需要将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);
}

5.3.4. 动画效果,跳出来,缩回去

 

超炫效果,让对话框好像是从一个按钮跳出来的,关闭的时候还会自己缩回去。你可以看到它从小变大,又从大变小,最后不见了。实际上的配置缺非常简单,加一个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稍后加上。

5.4.1. 2.0的弹出表格哦

 

稍微说一下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。

5.4.2. 向2.0的window里加表格

 

唉,地方都划出来了,弄个表格放进去就好了呗。

首先弄一个grid,超简单那种。我是直接把第二章的例子给copy了过来,嘿嘿,表格还是那个表格哟。

有了表格,直接扔到window里,然后ok,哈哈~效果如下:

看到没?表格出来了,如果想加分页条什么的,只管动手,别怕伤到窗口。

现在回头让我们看看,需要注意些什么。

  1. 第一,grid不用调用render()了,只要加入了window,在win.show()的时候,会自动渲染里边的组件。

  2. 第二,html里,要把grid对应的div写到window的div里面,嵌套关系。

    <div id="window-win">
        <div id="grid"></div>
    </div>
  3. 第三,如果还不知道怎么把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。敬请大家继续关注。

5.5. 更进一步撒。

 

希望上边的那些足够了,如果不够,咱们还有更厉害的,如果你看了examples里的例子,就知道里边还有更复杂的对话框,你甚至可以在里边用各种布局。

分享到:
评论

相关推荐

    EXT2.0 简明教程!(chm)

    超脱了一切的弹出窗口。 第 6 章 奔腾吧!让不同的浏览器里显示一样的布局。 第 7 章 低鸣吧!拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才开始讲基础问题。 第 9 章 沉寂吧!我们要自己的控件 ...

    掏钱学Ext(完整版) 附全部源码

    超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个例子 5.2.1. Ext.MessageBox.alert() 5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3....

    EXT2.0中文教程

    超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个例子 5.2.1. Ext.MessageBox.alert() 5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3. 如果你...

    Ext 开发指南 学习资料

    超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 5.2. 先看看最基本的三个例子 5.2.1. Ext.MessageBox.alert() 5.2.2. Ext.MessageBox.confirm() 5.2.3. Ext.MessageBox.prompt() 5.3. 如果你想...

    基于CST软件的三维超材料能带计算及其应用

    内容概要:本文介绍了如何利用CST软件进行三维超材料的能带计算。首先概述了三维超材料的独特性质及其广泛应用前景,接着简要介绍了CST软件的功能特点。随后详细阐述了能带计算的具体步骤,包括模型建立、材料参数设置、网格划分与求解设置以及最终的计算与结果分析。最后给出了一段Python代码示例,展示了如何处理CST输出的数据并绘制能带图。文章强调了计算机模拟技术对于深入了解超材料电子结构和物理性质的重要性。 适合人群:从事材料科学研究的专业人士,尤其是对三维超材料和电磁场模拟感兴趣的科研工作者和技术人员。 使用场景及目标:适用于希望借助CST软件开展三维超材料能带计算的研究项目,旨在提高对超材料的理解,推动相关领域的技术创新和发展。 其他说明:文中提供的Python代码仅为示例,在实际操作时可根据具体情况进行调整优化。同时,掌握CST软件的基本操作和电磁理论基础知识有助于更好地理解和应用本文内容。

    基于FPGA的永磁同步伺服系统设计:电流环及矢量控制实现

    内容概要:本文详细介绍了基于FPGA的永磁同步伺服系统的矢量控制设计,涵盖了从电流环到速度环的关键模块实现。具体包括Clarke和Park变换、PI调节器、AD7606采样、正交编码器反馈以及SVPWM生成等部分。文中提供了详细的Verilog代码片段,展示了各个模块的具体实现方法和技术细节。特别强调了定点数处理、时序设计和跨时钟域处理等方面的技术挑战及其解决方案。 适合人群:具备一定FPGA开发经验和电机控制基础知识的研发人员。 使用场景及目标:适用于希望深入了解FPGA在电机控制应用中的具体实现方式,特别是矢量控制和电流环设计的专业人士。目标是掌握FPGA平台下高效、低延迟的电机控制系统设计方法。 阅读建议:由于涉及大量具体的Verilog代码和硬件设计细节,建议读者在阅读过程中结合实际项目进行实验和调试,以便更好地理解和掌握相关技术。

    飞机大战:从运动方程到战斗系统的全链路设计解析

    经典飞机大战游戏是理解实时交互系统设计的绝佳载体。本文将深入剖析现代空战游戏的核心模块,涵盖刚体运动学、弹道轨迹优化、碰撞检测算法等关键技术,揭示二维游戏背后复杂的三维数学建模过程。

    scratch少儿编程逻辑思维游戏源码-冰塔.zip

    scratch少儿编程逻辑思维游戏源码-冰塔.zip

    scratch少儿编程逻辑思维游戏源码-弹跳(4).zip

    scratch少儿编程逻辑思维游戏源码-弹跳(4).zip

    COMSOL焊接热源模型解析:双椭球、高斯旋转体与柱状体热源的应用与优化

    内容概要:本文详细介绍了COMSOL软件中三种常见的焊接热源模型——双椭球热源、高斯旋转体热源和柱状体热源。双椭球热源适用于模拟移动热源(如激光焊、电弧焊),通过调整轴向系数a1和a2来控制热流分布;高斯旋转体热源适合小范围焊接,采用三维高斯函数描述热流密度;柱状体热源则用于深熔焊场景,特点是计算速度快。文中还提供了每种模型的具体代码实现,并强调了调试时需要注意的关键点,如时间步长、网格加密等。此外,作者分享了一些实用技巧,如将热源参数设置为全局变量并利用参数扫描功能提高调试效率。 适合人群:从事焊接工艺仿真、材料加工领域的研究人员和技术人员,以及对COMSOL建模感兴趣的工程技术人员。 使用场景及目标:帮助用户选择合适的热源模型进行焊接模拟,确保模拟结果的准确性;提供具体的代码实现和调试方法,使用户能够快速掌握并应用于实际项目中。 其他说明:文中提到的热源模型不仅限于理论介绍,还包括实际操作中的注意事项和优化建议,有助于提升模拟效果和工作效率。

    基于RBF神经网络的PID控制器在PMSM转速环中的Simulink模型设计与性能分析

    内容概要:本文介绍了将基于RBF神经网络的PID控制器应用于永磁同步电机(PMSM)转速环控制的方法及其性能优势。传统的PID控制器在面对非线性和时变系统时存在参数整定困难的问题,而引入RBF神经网络可以实现实时在线调参,提高系统的灵活性和鲁棒性。文中详细描述了Simulink模型的设计,特别是Matlab s-function模块中RBF神经网络的具体实现,包括高斯函数激活和带惯性的权值更新机制。实验结果显示,在转速突变情况下,改进后的控制器能够迅速稳定系统,超调量控制在2%以内,调节时间较传统方法缩短约40%,并且在负载变化时表现出色,无需重新整定参数。 适合人群:从事电机控制系统研究和开发的技术人员,尤其是对PID控制器优化感兴趣的工程师。 使用场景及目标:适用于需要提升PMSM转速环控制精度和响应速度的应用场合,如工业自动化设备、机器人等领域。目标是通过引入智能算法解决传统PID控制器参数整定难题,提高系统性能。 阅读建议:关注RBF神经网络与PID控制器结合的具体实现细节,特别是在Matlab s-function模块中的编码技巧以及参数调整策略。同时,注意学习率的选择和动量项的作用,这对于实际应用至关重要。

    scratch少儿编程逻辑思维游戏源码-GTA 6.zip

    scratch少儿编程逻辑思维游戏源码-GTA 6.zip

    scratch少儿编程逻辑思维游戏源码-仓鼠跑酷.zip

    scratch少儿编程逻辑思维游戏源码-仓鼠跑酷.zip

    scratch少儿编程逻辑思维游戏源码-超级麦克世界.zip

    scratch少儿编程逻辑思维游戏源码-超级麦克世界.zip

    scratch少儿编程逻辑思维游戏源码-400年.zip

    scratch少儿编程逻辑思维游戏源码-400年.zip

    少儿编程scratch项目源代码文件案例素材-气球足球.zip

    少儿编程scratch项目源代码文件案例素材-气球足球.zip

    少儿编程scratch项目源代码文件案例素材-沙漠迷城.zip

    少儿编程scratch项目源代码文件案例素材-沙漠迷城.zip

    scratch少儿编程逻辑思维游戏源码-比谁高.zip

    scratch少儿编程逻辑思维游戏源码-比谁高.zip

    少儿编程scratch项目源代码文件案例素材-乾坤大挪移.zip

    少儿编程scratch项目源代码文件案例素材-乾坤大挪移.zip

    scratch少儿编程逻辑思维游戏源码-菜鸟跳跃.zip

    scratch少儿编程逻辑思维游戏源码-菜鸟跳跃.zip

Global site tag (gtag.js) - Google Analytics