ExtJs的Window加入Pin和Unpin WebOSEXT电信UbuntuGoogle
程序员文章站
2024-03-12 10:26:20
...
通过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(); }