ExtJs的Window加入Pin和Unpin

      通过ExtJs创建一个Window很简单，这里不多说。通过添加Window中的tools属性，加入Pin、Unpin等图标也很简单。但要实现Pin和Unpin的功能，并实现图标的显示和隐藏，在网上找了很久没找到，只能靠自己摸索。

      先看看效果图：

      

      下面分享一下我的经验：

      里面最关键的就是控制Pin和Unpin的显示与隐藏，在ExtJs的API中似乎没找到方法。这里我用了比较原始的方式，即控制css样式来实现。

 

Ext.getDom(winPanel.tools['pin'].id).style.display = "block";

Ext.getDom(winPanel.tools['unpin'].id).style.display = "none";

       下面是部分源码：

 

tools : [{
				id :'pin',
				qtip : '禁用自动收缩',
				hidden : true,
				handler : function(event, el, panel){
					removeWinEvent("accordionWin");
					Ext.getDom(panel.tools['pin'].id).style.display = "none";
					Ext.getDom(panel.tools['unpin'].id).style.display = "block";
				}
			}, {
				id :'unpin',
				qtip : '启动自动收缩',
				hidden : true,
				handler : function(event, el, panel){
					setWinEvent("accordionWin");
					Ext.getDom(panel.tools['pin'].id).style.display = "block";
					Ext.getDom(panel.tools['unpin'].id).style.display = "none";
				}
			}],

listeners : {
				'beforeshow' : function(cmp) {
					setWinEvent("accordionWin");
				}
			}

function setWinEvent(winId) {
	var winPanel = Ext.getCmp(winId);
	Ext.get(winId).on('mouseover', function() {
		if (winPanel.collapsed) {
			winPanel.expand();
			Ext.getDom(winPanel.tools['pin'].id).style.display = "block";
			Ext.getDom(winPanel.tools['unpin'].id).style.display = "none";
		}
	});
	Ext.get(winId).on('mouseleave', function() {
		if (!winPanel.collapsed) {
			winPanel.collapse();
			Ext.getDom(winPanel.tools['pin'].id).style.display = "none";
			Ext.getDom(winPanel.tools['unpin'].id).style.display = "none";
		}
	});
}

/**
 * 删除事件
 */
function removeWinEvent(winId) {
	Ext.get(winId).removeAllListeners();
}

 

评论

21 楼 zhanglongchao 2010-08-10  

小弟刚学Ext，还没有弄明白了，你有完整的实例的话发给我 邮箱[e-mail]

20 楼 renco 2010-08-01  

hooof 意义不大.

19 楼 dayone 2010-07-30  

靠 这都行

18 楼 jammyjaccy 2010-07-30  

好多功能没有实现呢。就是一个最简单的展示。

17 楼 anyasir 2010-07-30  

注册了一个。。没太懂

16 楼 skyblue1984 2010-07-30  

看到注册就懒得看了........

15 楼 duchengning 2010-07-30  

谢谢各位的鼎力支持，在大家的帮助下，我们找到了很多不足的地方需要改动，恳请大家持续关注。

14 楼 chao3344happy 2010-07-29  

好的开端，还需要努力， 还需要更多的智慧、建议暂免注册。加油、祝你成功！

13 楼 跃六感 2010-07-29  

duchengning 写道

fancool 写道

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

注册太多必填项了...

感谢您的关注，我们的注册确实还很不完善，必填项主要是希望用户能够提供多一点可靠个人信息，方便我们日后的管理，我们的目的是保证用户的真实性后就可以最大限度的开通用户权限，以及以后集成其他系统时能够更好的对接，方便用户日后的使用。

现在功能还不完善，建议可以免除注册，让更多的人体验，而且不用操作数据库，也不用关系不真实，等以后功能完善了再开通注册。估计至少还需要两个月才能看到个稍微完善的系统，到时候来帮你顶下人气。现在我全部用1都注册成功了，这样子会降低网站的信誉度

12 楼 跃六感 2010-07-29  

这个网站做的还是很不错，如果想把桌面移动到网络上，至少要解决一个网络硬盘的问题，再者建议针对不同的弹出框有一定的个性化，如果每次弹出一个功能块都看到ExtJS的menu那种样式，会觉得有点单一。右键功能还是要有的，祝你成功哈

11 楼 fancool 2010-07-29  

neal 写道

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

建议拿到SourceForge或者Google Code上开源，更多人关注，更多人提bug，这样WebOS就会更加完善。国外有很多这样的云操作系统，有的是做成Ubuntu风格的，很强大。
现在的WebOS只是一个演示版的，还是把注册去掉吧，很多人一看就没兴趣登录这个系统了。

我就是 注册太复杂了

10 楼 duchengning 2010-07-29  

fancool 写道

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

注册太多必填项了...

感谢您的关注，我们的注册确实还很不完善，必填项主要是希望用户能够提供多一点可靠个人信息，方便我们日后的管理，我们的目的是保证用户的真实性后就可以最大限度的开通用户权限，以及以后集成其他系统时能够更好的对接，方便用户日后的使用。

9 楼 fancool 2010-07-29  

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

注册太多必填项了...

8 楼 skzr.org 2010-07-29  

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

刚刚看了，非常有兴趣ExtJS的桌面
我的blog：http://skzr-org.iteye.com/category/103382

7 楼 neal 2010-07-29  

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

建议拿到SourceForge或者Google Code上开源，更多人关注，更多人提bug，这样WebOS就会更加完善。国外有很多这样的云操作系统，有的是做成Ubuntu风格的，很强大。
现在的WebOS只是一个演示版的，还是把注册去掉吧，很多人一看就没兴趣登录这个系统了。

6 楼 duchengning 2010-07-29  

aixuebo 写道

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

这个网站确实不错。我挺看好的。就是需要调试一下bug。

你好，我们的系统目前功能还很不完善，如果有兴趣共同开发，请发邮件我们联系一下。

5 楼 sfc1234 2010-07-29  

人家没有说是电话

4 楼 aixuebo 2010-07-29  

duchengning 写道

朋友，看来你对ExtJs相当有研究了，有空去看看我的网站hoouf.com，我现在正在寻找几位合作伙伴共同开发一个WebOS。我目前拥有电信顶级机房1G带宽和两个机柜服务器，如果有兴趣请致电：[e-mail]。

这个网站确实不错。我挺看好的。就是需要调试一下bug。

3 楼 duchengning 2010-07-29  

不好意思，是邮件，呵呵。

2 楼 lastForward 2010-07-29  

如果有兴趣请致电：[e-mail]。
这个电话号码很奇怪。