什么样的Element可以mask?

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

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

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呢？

评论

2 楼 kimmking 2008-08-02  

已经提交了bug到ext-forum

1 楼 kimmking 2008-08-02  

通过熬夜（555...）分析el.dom.outerHTML，终于初步找到答案。
1、内部不支持appchild的元素，不能mask

2、对于div，比如一个textfield的input所在的div，insertAdjacentHTML是没有问题的，可以看到添加的class为ext-el-mask的一个div在这个div的里面，input标签的后面，但是这个用来mask的div的width竟然是0？？怪不得没有反应。

Ext.get("p").mask()可以

<div id="p" style="WIDTH: 237px">
			sdf
</div>

Ext.get("p").mask()不可以

<div id="p">
			sdf
</div>

or

<div id="p" width="100">
			sdf
</div>

通过一系统的调试，发现一个div（ext中的el，ct多数都是dom为div的element）可以被mask的唯一条件是必须显示的申明style="WIDTH:xxx，然后插入的用来mask的
div有相同的width。”<div width=xx”都不可以。
对于一个TriggerField，其有一个div中包含几个元素组成（一般一个text，一个img），这个div的style="WIDTH:xxx在组件被创建时已经显示的指定了。
对于一个textfield，声明时没有cls:"width:xx"或是width:xx的话，其自己对齐自己容器ct的宽度，因而没有显示的style：width，造成了这个mask的bug。
问题分析差不多了，就是在创建mask-div时的width不正确的问题。
呵呵，有时间我再看能不能加个补丁fix这个问题。