什么样的Element可以mask?

最新推荐文章于 2024-09-27 17:44:33 发布

最新推荐文章于 2024-09-27 17:44:33 发布 · 685 阅读

文章标签：

#EXT #IE #CSS #UI #.net

ext 专栏收录该内容

11 篇文章

订阅专栏

本文详细探讨了ExtJS中mask()方法的使用及其限制条件，包括哪些UI组件支持mask效果，以及如何正确应用mask使UI组件变为不可操作状态。

mask的效果就是指在现有的UI组件上蒙上一层（一般是半透明的）“蒙版”，使其下面的UI都不可操作。
比如模式window，Ext.msg.alert时的背景。

关于基本的介绍，这儿有一篇：
[url=http://yahaitt.iteye.com/blog/209624]丫梨的笔记本：ExtJs中关于mask()的应用说明[/url]
但是文中说“【[color=green]其实蒙版效果也可完全作用于任何一个组件。通过调用Element的mask()方法即可[/color]】”是不对的。

Ext 2.0 API中 Ext.Element:
mask( [String msg], [String msgCls] ) : Element
Puts a mask over this element to disable user interaction. Requires core.css. This method can only be applied to elem...
Puts a mask over this element to disable user interaction. Requires core.css. This method can only be applied to elements which accept child nodes.
最后一句是：此方法只能用在可以接受节点的元素上。

我一直没有明白“接受节点的元素”是什么意思。难度是dhtml定义的？
但是目前的实验情况表明：
1、body window panel是可以“接受节点的元素”
2、所有的form中的field的el不是“接受节点的元素”，调用mask(),IE会出错：该操作的目标原件无效，ff没有反应。
3、TriggerField的子类，combo，datefield等getEl().parent().mask有效（IE，ff）。
textfield的getEl().parent().mask在IE下报错，ff下有效，但是text的位置会向右偏移很多。
4、IE下，field不停的parent(),发现：第一个包含所有field的element的mask是有效的。其到整个container之间的层次的div都是有效的。

即一个element是可以mask的，则包含他的其他的element都是可以mask的。

后头看看IE报的错，打开js调试器（.net 2005/2008），看到出错代码在ext-all-debug.js的228行。
Ext.DomHelper中的（Ext v2.1）

 insertHtml : function(where, el, html){
...
el.insertAdjacentHTML('BeforeEnd', html);...

看了下el，tag：input，就是textfield的文本框了。
baidu下insertAdjacentHTML，发现table input tbody iframe等不支持。明天找找dhtml手册，看看还有什么东西不支持。
还是没弄清楚为什么有的element不支持mask？目前的猜想是不能做为container的都不支持。
就是说<tag></tag>中间不能有内容的都不支持mask。

但是，什么样的支持mask呢？