分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

Extjs——窗口

发布时间:2023-09-06 01:12责任编辑:沈小雨关键词:js

Ext中的窗口主要包括Ext.Window窗口和Ext.MessageBox对话框。

                                                                                                 Ext.Window窗口

1.Ext.Window窗口的常用属性:

2.窗口分组:

窗口分组有Ext.WindowGroup类定义,该类包括bringToFront(),getActive(),hideAll(),sendToBack()等函数,可以用来操作分组中的窗口。

<script type="text/javascript">var i = 0;function newWin() { ???var id = i++; ???var win = new Ext.Window({ ???????headerPosition: ‘right‘, ???????title:"窗口" + id, ???????width: 400, ???????height: 300, ???????maximizable: true ???}); ???win.show();}function toBack() { ???Ext.WindowManager.sendToBack(Ext.WindowManager.getActive());}function hideAll() { ???Ext.WindowManager.hideAll();}Ext.onReady(function(){ ???Ext.get("btn").on("click",newWin); ???Ext.get("btnToBack").on("click",toBack); ???Ext.get("btnHide").on("click",hideAll);}); ???????</script> ???</head> ???<body> ???????<script type="text/javascript" src="../../examples/shared/examples.js"></script> ???????<input id="btn" type="button" name="add" value="新窗口" /> ???????<input id="btnToBack" type="button" name="add" value="放到后台" /> ???????<input id="btnHide" type="button" name="add" value="隐藏所有" /> ???</body>

3.向窗口中放入各种控件:

窗口继承自Ext.Panel,因此可以在内部嵌套其他组件,如表单,表格等。

 var win = new Ext.Window({ ???????layout:‘fit‘, ???????width:500, ???????height:300, ???????closeAction:‘hide‘, ???????items: [grid],//这里省略了grid生成代码 ???????buttons: [{ ???????????text:‘按钮‘ ???????}] ???}); ???win.show();

效果如下:

                                                                

      Ext.MessageBox对话框

1.对话框的基本形式:

Ext中主要包括三种对话框:

                                                                  

     alert对话框                                               confirm对话框                                                                     prompt对话框

 ?Ext.MessageBox.alert(‘标题‘, ‘内容‘, function(btn) { ???????alert(‘你刚刚点击了 ‘ + btn); ???}); ???Ext.MessageBox.confirm(‘选择框‘, ‘你到底是选择yes还是no?‘, function(btn) { ???????alert(‘你刚刚点击了 ‘ + btn); ???}); ???Ext.MessageBox.prompt(‘输入框‘, ‘随便输入一些东西‘, function(btn, text) { ???????alert(‘你刚刚点击了 ‘ + btn + ‘,刚刚输入了 ‘ + text); ???});

2.对话框的更多设置:

可以通过Ext.MessageBox.show()来实现对话框的各种个性化设置,如将原来的单行输入(textfield)变成多行输入(textarea),还可以修改对话框的标题和提示内容,自定义对话框的按钮

 Ext.MessageBox.show({ ???????title: ‘多行输入框‘, ???????msg: ‘你可以输入好几行‘, ???????width:300, ???????buttons: Ext.MessageBox.OKCANCEL, ???????multiline: true, ???????fn: function(btn, text) { ???????????alert(‘你刚刚点击了 ‘ + btn + ‘,刚刚输入了 ‘ + text); ???????} ???}); ???Ext.MessageBox.show({ ???????title:‘随便按个按钮‘, ???????msg: ‘从三个按钮里随便选择一个‘, ???????buttons: Ext.MessageBox.YESNOCANCEL, ???????fn: function(btn) { ???????????alert(‘你刚刚点击了 ‘ + btn); ???????} ???});

进度条:

除了用Ext.MessageBoxprogress()外,还可以直接用Ext.MessageBox.wait(),这种进度条是自动变化的,不用定时器来控制,不过它无法对进度条的值进行精确控制。

 ??Ext.MessageBox.show({ ???????title: ‘请等待‘, ???????msg: ‘读取数据中‘, ???????width:240, ???????progress:true,//开启进度条 ???????closable:false ???}); ???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); ???}

动画效果:

可以为对话框设置弹出和关闭的动画效果,使用animalEl参数指定一个HTML元素,对话框就会依据指定的HTML元素播放弹出和关闭的动画。

Extjs——窗口

原文地址:http://www.cnblogs.com/chen1234/p/7554691.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved