ExtJS学习--------通过WindowGroup(也叫ZIndexManager)来操作window等组件

具体实现代码:(注意:在进行测试的时候最好分别进行测试,测试一个功能的时候将其他功能注释掉,否则会影响效果....)WindowGroup对象的方法可以在其参考文档中进行查看,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 
下载查看

Ext.onReady(function(){//WindowGroup的使用
	var wingroup=new Ext.ZIndexManager();//两个都可以
//	var wingroup=new Ext.WindowGroup();//两个都可以
	for(var i=1;i<=5;i++)//创建5个窗口,
	{
		var win=Ext.create('Ext.Window',{//也可以是Ext.window.Window
			title:'第'+i+'个窗口',
			id:'win_'+i,//窗口的ID,尽量不要直接用数字表示
			width:300,
			height:300,
			renderTo:Ext.getBody()
		});
		win.show();//显示窗口
		wingroup.register(win);//可参考API
		/* register( Ext.Component comp )
		 * 通过ZIndexManager登记一个浮动Ext.Component。
		 * 在正常情况下,这个应该不需要被调用。
		 * 浮动组件(如理Windows,BoundLists和Menus)在渲染的同时在zIndexManager中自动注册。
		 * */
	}
	//下面添加一些按钮来对WindowGroup(也叫ZIndexManager)的主要方法进行介绍
	//隐藏所有组件
	var btn1=Ext.create('Ext.Button',{
		text:'全部隐藏',
		renderTo:Ext.getBody(),
		handler:function()//按钮点击的处理函数
		{
			wingroup.hideAll();//隐藏所有被管理的组件
		}
	});
	//显示所有组件
	var btn2=Ext.create('Ext.Button',{
		text:'全部显示',
		renderTo:Ext.getBody(),
		handler:function()//按钮点击的处理函数
		{
			wingroup.each(function(cmp){//显示所有被隐藏的组件
				cmp.show();
			});
		}
	});
	//添加新的组件
	var winn=Ext.create('Ext.Window',{//也可以是Ext.window.Window
			title:'这是新窗口',
			width:300,
			height:300,
			renderTo:Ext.getBody()
		});
	winn.show();//显示窗口
	var btn3=Ext.create('Ext.Button',{
		text:'添加新窗口',
		renderTo:Ext.getBody(),
		handler:function()//按钮点击的处理函数
		{
			wingroup.addMembers(winn);
		}
	});
	//将指定组件放到任何其他活动组件的前面在这个ZIndexManager
	var btn4=Ext.create('Ext.Button',{
		text:'将第1个组件移动到最前面',
		renderTo:Ext.getBody(),
		handler:function()//按钮点击的处理函数
		{
			wingroup.bringToFront('win_1');
		}
	});
	//将组件放到最后面
	var btn4=Ext.create('Ext.Button',{
		text:'将第5个组件移动到最后面',
		renderTo:Ext.getBody(),
		handler:function()//按钮点击的处理函数
		{
			wingroup.bringToFront('win_5');
		}
	});
	//将组件放到最后面
	var btn5=Ext.create('Ext.Button',{
		text:'将组件从windowgroup中移出',
		renderTo:Ext.getBody(),
		handler:function()//按钮点击的处理函数
		{
			wingroup.unregister(winn);//解除绑定之后该组件不会被销毁
		}
	});

});

运行结果:

(1)初始运行结果:添加了5个window窗口

(2)点击全部隐藏按钮

(3)点击全部显示按钮

(4)添加新窗口(默认会放在最后面)

(5)将第一个组件移到最前端

(6)将第五个组件移到最后端(跟(5)效果差不多)

(7)将组件移出(将新添加的组件移出但不删除),再点击全部隐藏后的结果

ExtJS学习--------通过WindowGroup(也叫ZIndexManager)来操作window等组件

时间: 2024-10-06 20:25:39

ExtJS学习--------通过WindowGroup(也叫ZIndexManager)来操作window等组件的相关文章

ExtJs学习之Window

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>EXtjs学习之Window</title> <link rel="stylesheet" type="text/css" href="extjs-

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站: http://ww

[ExtJS学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第八节 Extjs的Ext.toolbar.Toolbar工具条组件及其应用

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- Ext JS API: http://docs.sencha.

ExtJS学习第一天 MessageBox

此文用来记录学习笔记: •学习任何技术,首先都要从Helloworld开始,那么我们首要任务就是写一个简单的HelloWorld程序,带领同学们走进ExtJS的世界. •Ext.onReady:这个方法是Ext的准备函数,也就是Ext相关的代码都会在这个函数里书写,它比较类似于window的onload方法,但是注意其执行时机是在页面的DOM对象加载完毕之后立即执行. •Ext.window.MessageBox:这个类提供了ExtJS的弹出提示框.确认框等简单的小组件.我们首先根据它写出我们的

ExtJs学习-搭建开发环境

Extjs是一个非常棒的ajax框架,可以用来开发十分绚丽外观的客户端框架,能使B/S框架更加具有活力.它是一个用javascript编写的框架,与后台技术无关的ajax框架.因此,可以把ExtJs使用在asp.net.java.php等语言开发的应用程序中. 本人学习使用的是3.4版本,在3.4版本上进行学习和实验. 首先是获取Extjs框架,下载之后,解压文件到当前文件夹,目录如下所示: 编写第一个ExtJS程序 在eclipse工具中新建一个项目,引入ExtJs类库,代码在Eclipse中

ExtJs学习笔记(1)---ExtJs安装及其使用

从官网下载了ExtJs的3.2版本的SDK,包含了代码依赖的详细说明.文档.范例和其他文件.其中,adapter和resources文件是Ext正常运行所必须的,其他的仅在开发过程中使用到. Adapter:支持把Ext和其他代码库一同使用的文件 build:用于自定义构建ext-all.js的文件 docs:文档中心(仅当运行在服务器上时能够正常访问) examples:大量令人印象深刻富有洞察力的范例 resources:Ext依赖的文件,例如CSS和图片 source:ext的所有代码 在

Android学习--------实现增删改查数据库操作以及实现类似微信好友对话管理操作

最近的一个实验用到东西挺多,特地总结一下. 要求功能: 1.第一个页面添加歌曲名和歌手,跳到第二个页面列表显示所有记录,使用sqlite数据库 2.对于第二个页面显示的信息可以进行删除和修改操作,并自动刷新 最后我做的效果: 长按列表项弹出单个管理的菜单,像微信好友对话管理一样. 删除时可以直接删除这一条并在列表中直接显示,更新时弹出对话框更新内容提交后在列表中重新显示. 做此例遇到的困难: 1.菜单获取上下文 2.获取对话框中的内容 3.对话框按钮添加监听事件-----注意包不要导错:impo