论坛首页 Web前端技术论坛

什么样的Element可以mask?

浏览 3824 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-08-02   最后修改:2009-01-08
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呢?
   发表时间: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这个问题。




0 请登录后投票
   发表时间:2008-08-02  
已经提交了bug到ext-forum
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics