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

 

评论

1 楼 duchengning 2010-07-29  

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