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();
}

 

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

如果有兴趣请致电：10001@hoouf.com。
这个电话号码很奇怪。

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

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

人家没有说是电话

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

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

注册太多必填项了...

我就是 注册太复杂了