欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ExtJs的Window加入Pin和Unpin WebOSEXT电信UbuntuGoogle 

程序员文章站 2024-03-12 10:26:20
...

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

      先看看效果图:

      ExtJs的Window加入Pin和Unpin
            
    
    
        WebOSEXT电信UbuntuGoogle 

      下面分享一下我的经验:

      里面最关键的就是控制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的Window加入Pin和Unpin
            
    
    
        WebOSEXT电信UbuntuGoogle 
  • 大小: 8.8 KB