ExtJS基础第五讲学习--Extjs窗口组件Window

最新推荐文章于 2020-11-30 06:41:03 发布
最新推荐文章于 2020-11-30 06:41:03 发布
阅读量381 收藏
点赞数
分类专栏： EXTJS 文章标签： windows窗口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhengN/article/details/83930200
版权

第五讲：窗口组件Window

示例一：显示Window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

    <title>Window</title>

    <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../Ext/ext-all-debug.js"></script>

    <script type="text/javascript" src="Window.js"></script>

    <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link>

  </head>

  <body>

  </body>

</html>

 

 

 

Ext.onReady(

function() {

new Ext.Window({

width:300,

height:300,

title:"window"

}).show();

}

);

 

resizable:false,(是否可以改变大小，默认可以)

maximizable:true,（是否增加最大化，默认没有）

draggable:false,（是否可以拖动，默认可以）

minimizable:true,（是否增加最小化，默认无）

 

closeAction属性用来设置关闭按钮操作，有两个可选值，一个为close，一个为hide。

如果为close，那么关闭后不能再打开，而hide可以重新打开该窗口。

示例二：打开隐藏后的窗口

Ext.onReady(

function() {

var myWindow  = new Ext.Window({

width:300,

height:300,

title:"window",

closeAction:"hide"

});

 

myWindow.show();

 

Ext.get("showWindow").on("click",function() {

myWindow.show();

}

)

}

);

 

控制窗口的关闭和打开。

Ext.onReady(

function() {

var myWindow  = new Ext.Window({

width:300,

height:300,

title:"window",

closeAction:"hide"

});

myWindow.show();

 

 

var openWin = Ext.get("openWin");

openWin.on("click",function() {

myWindow.show();

}

)

 

var closeWin = Ext.get("closeWin");

closeWin.on("click",function() {

myWindow.hide();

}

)

}

);

 

 

closable属性用来设置是否显示关闭按钮。

实例三：

Ext.onReady(

function() {

var myWindow  = new Ext.Window({

contentEl:hello,

width:300,

height:300,

title:"window",

closable:false

});

 

myWindow.show();

}

);

 

 

constrain属性如果为true则强制此window控制在viewport，默认为false。
实例四：控制窗口只能在显示在页面显示区域。

Ext.onReady(

function() {

var myWindow  = new Ext.Window({

contentEl:hello,

width:300,

height:300,

title:"window",

closable:false,

constrain:true

});

 

myWindow.show();

}

);

 

plain属性如果为true则主体背景透明，false则主体有小差别的背景色，默认为false

示例五：设置窗体主体背景透明

Ext.onReady(

function() {

var myWindow  = new Ext.Window({

contentEl:hello,

width:300,

height:300,

title:"window",

closable:false,

constrain:true,

plain:true

});

 

myWindow.show();

}

);

 

带头部工具栏的窗口

Ext.onReady(

function() {

//初始化提示信息

Ext.QuickTips.init();

 

var myWindow  = new Ext.Window({

contentEl:hello,

width:300,

height:300,

title:"window",

closable:false,

//头部工具栏

tools:[

{id:"save",qtip:"保存"},

{id:"help",qtip:"帮助"},

{id:"close",qtip:"关闭",handler:function() {

//myWindow.close();

myWindow.hide();

}

}

]

});

 

myWindow.show();

}

);

 

自定义工具栏图片和提示信息。

Ext.onReady(

function() {

//初始化提示信息

Ext.QuickTips.init();

 

var myWindow  = new Ext.Window({

contentEl:hello,

width:300,

height:300,

title:"window",

closable:false,

//工具栏

tbar:new Ext.Toolbar({

height:30

})

});

myWindow.show();

 

myWindow.getTopToolbar().add(new Ext.Toolbar.Button({icon:"save.jpg",cls:'x-btn-icon',tooltip:"保存"}))

myWindow.getTopToolbar().add(new Ext.Toolbar.Button({icon:"open.jpg",cls:'x-btn-icon',tooltip:"打开"}))

 

}

);

 

自定义菜单栏图片

Ext.onReady(

function() {

 

var myWindow  = new Ext.Window({

contentEl:hello,

width:300,

height:300,

title:"window",

closable:false,

//工具栏

tbar:new Ext.Toolbar({

height:30

})

});

myWindow.show();

 

var mymenu = new Ext.menu.Menu({

items:[

{text:"打开",icon:"open.jpg"},

{text:"保存",icon:"save.jpg"}

]

});

 

myWindow.getTopToolbar().add(new Ext.Toolbar.SplitButton({text:"文件",menu:mymenu}));

}

);

 

 

窗口分组。

窗口是可以分组进行管理的，默认情况下的窗口都在默认的组 Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义，该类包括bringToFront、getActive、 hideAll、sendToBack等方法用来对分组中的窗口进行操作。

var i = 1;

var mygroup;

function newWindow() {

var myWindow  = new Ext.Window({

width:300,

height:300,

title:"window" + i++,

closable:false,

manager:mygroup

});

myWindow.show();

}

 

function toBack() {

mygroup.sendToBack(mygroup.getActive());

}

 

function hideAll() {

mygroup.hideAll();

}

 

Ext.onReady(

function() {

mygroup=new Ext.WindowGroup();

Ext.get("newWin").on("click",newWindow);

Ext.get("toback").on("click",toBack);

Ext.get("hideAll").on("click",hideAll);

}

);

 

 

 

odng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs4-export
12-14
它提供了一套完整的组件模型，包括表格、图表、菜单、窗口等，使开发者能构建功能丰富的交互式界面。然而，对于Excel导出功能，EXTJS4的核心库并没有内置直接的解决方案，这就需要开发者寻找或创建第三方插件或...
ExtJs消息提示框
04-30
`ux`是"User eXtension"的缩写，它是ExtJs社区开发的第三方组件，以增强原生框架的功能。 `Ext.ux.window.Notification`是一个特定的扩展，它提供了灵活的、可自定义的弹出通知窗口，可以在屏幕的各个方向展示。这...
Extjs window窗口在model下背景颜色由半透明更改为全透明
sxj的专栏
02-16 2737
1、默认效果图为： 2、最终效果图为： 3、更改只需要在resources\ext-theme-classic目录下的ext-theme-classic-all-debug.css文件中，找到.x-mask，如下图所示： 4、只需要将Opacity=50改为0，opacity:0.5改为：opacity:0.0，如下图所示：
ExtJs window 使用API以及window常用属性和方法
风起未来
05-11 1385
1.使用API xtype：组件的别名 Hierarchy 层次结构 Inherited mixins 混入的类 Requires 该组件需要使用的类 configs：组件的配置信息 properties：组件的属性 methods：组件的方法 events：组件的事件 2.window组件常用属性和方法讲解: configs: c
ExtJs学习笔记之Window组件
weixin_30635053的博客
05-05 75
Window窗体组件 window是一个指定的打算作为一个应用程序窗口的面板，默认窗口是浮动的，resizable, 并且draggable，默认的，窗体靠document.body呈现。 1、示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...
ExtJs desktop 显示无框窗口
LinBSoft的专栏
02-17 9360
在extjs desktop中,有时需要显示一些没有边框的透明windows 就像开机LOGO,播放器等,可以显得桌面更酷,实现这个需要两步配合,一是在桌面显示一个无框,背景透明的windows,二是在windows里面显示内容的图片背景最好不是规则形状的,把边缘外的部分透明,保存为png图片,这样,浏览看到的就是一个不规则形状的LOGO,或者播放器等等。 以下是代码 这个可以放在deskt
ExtJS Web应用程序开发指南（第2版）.zip
07-15
- ExtJS的核心是其组件系统，包括各种预定义的UI组件，如窗口（Window）、面板（Panel）、菜单（Menu）等。 - 学习如何创建和配置组件，以及如何通过布局（Layouts）管理组件的排列和大小。 5. **数据绑定** - ...
ExtJS 教程
06-04
5. **第五章 - 使用Grid显示数据**: Grid组件是ExtJS中的重要部分，用于展示和操作表格数据。本章将详细解释如何创建Grid，加载数据源，实现分页、排序和过滤功能。 6. **第六章 - Editor Grids（可编辑表格）**: ...
轻松搞定Extjs_原创
06-14
第五章：页面与脚本完全分离 28 一、Extjs是脚本的世界 28 二、Ext.onReady事件 28 三、来自Extjs的问候 29 四、让界面动起来 29 五、Ext.Fx类 30 六、Ext.Element类中的动画函数 34 七、小结 35 第六章：元素操作与...
Extjs使用Window最小化窗口
08-05
自己做的，关于EXTJS 实现最下化功能，点击新建窗口，能创建一个窗口，并在工具条里新建一个那妞与之对应，点击按钮实现最小化，再次点击按钮还原窗口。是我花了三的时间研究出来的，与大家分享！！
window.open使用方法以及参数说明
Qi_jianzhou的资料室
01-11 832
window.open()支持环境：　　　　JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+　　　　二、基本语法：　　　　window.open(pageURL,name,parameters)　　　　其中：　　pageURL 为子窗口路径　　name 为子窗口句柄　　parameters 为窗口参数(各参数用逗号分隔)　　　　三、各项参数　　　　其中ye
EXTJS 窗口Ext.Window()学习笔记
王佳楠的专栏
07-31 2034
var win = new Ext.Window({ layout:'fit', //窗口的布局类型，fit表示布局布满整个窗口 width:500, //窗口大小 height:300, closeAction:'hide',//控制用户单击右上角的关闭，默认为close，会在关闭窗口时把窗口对象销毁，就不能使用show()函数显
Extjs弹出window窗口后背景窗口变灰（即不可编辑）
KAIXINLUOYE的博客
02-28 2540
开发备忘： ExtJS在使用Ext.Msg.alter(),Ext.Msg.confirm()弹出窗口后，背景窗口即变灰，不可编辑。但使用Ext.Window时，默认弹出窗口后，背景窗口仍是可以编辑的这时可以在Ext.Window属性中添加“modal:true ”的配置，即可实现弹出window窗口后背景窗口变得不可编辑。 以下为简单的例子代码： new Ext.Window({
Ext弹出窗口
Donny的专栏
12-26 565
Ext.MessageBox.alert() Ext.MessageBox.alert()提供一个OK按钮。对应JavaScript中的alert()。 定义：alert(Stringtitle,Stringmsg,[Function fn], [Object scope]) :Ext.MessageBox 该函数有4个参数： Title:窗口标题 Msg:弹出窗口内容 Fn:回调函...
extjs tabpanel第一次切换不显示 改变浏览器窗口的大小就显示_EXTjs常用的组件方法...
weixin_39932838的博客
11-30 148
看了白鹤extjs视频学习资料后整理一下以后用的时候看看1选择器时1 btn.up()/down().属性 参数是选择器或者组件的xtype2 Ext.getCmp('id').属性 3btn.ownerct.ownerct（父类的父类——爷爷类 子类的子类应该也有 我没查可能是child?）2组件1 ext自带方式items{ xtype:button, text:'123', hand...
Extjs-弹出窗口 Ext.Window
热门推荐
itlwc
08-14 1万+
项目中的窗口 var addWindow = new Ext.Window({ title : '增加用户', width : 400, resizable : false, closeAction:'hide', autoHeight : true, constrainHeader : true, modal : true, plain
ExtJS4——window
u013127751的博客
03-23 550
Ext.onReady(function () { var win = new Ext.Window({ //创建一个新的Window窗体对象 title: '窗口', //窗体的标题 width: 476, //窗口宽度 height
ExtJs 学习笔记 窗口
Robert0102
04-25 923
ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。<br /> 看下面的代码： <br />复制代码 代码如下:<br /> var i=0; <br /> function newWin(){ <br /> var win = new Ext.Window({ <br /> title:"窗口"+i++, <br /> width:400, <br /> height
extJs+2.1学习笔记.pdf
06-15
"extJs+2.1学习笔记.pdf" ...通过这份笔记，读者可以系统地学习ExtJs 2.1的基础知识，理解其工作原理，并掌握构建复杂Web应用的技巧。每个章节都提供了具体的技术细节和实践示例，有助于加深对ExtJs的理解和应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值