IE6 Problem: form.el.mask("testing...", "x-mask-loading");

[vtswingkid]

form.el.mask gives unexpected results in IE6

try this script.

nothing is masked.


Test = function(){
var dialog, form;
return{
Init:function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

form = new Ext.Form({
//labelAlign: 'right',
labelWidth: 0,
buttonAlign: 'left',
url:'test.php' (http://extjs.com/forum/'test.php'),
baseParams:{module:'checks_and_radios'}
});
form.fieldset(
{legend: "Checks"},
new Ext.form.Checkbox({
boxLabel: "check 1",
name: 'checks[]',
inputValue: '1',
dataIndex: 'c1'
}),
new Ext.form.Checkbox({
boxLabel: "check 2",
name: 'checks[]',
inputValue: '2',
dataIndex: 'c2'
}),
new Ext.form.Checkbox({
boxLabel: "check 3",
name: 'checks[]',
inputValue: '3',
dataIndex: 'c3'
}),
new Ext.form.Checkbox({
boxLabel: "check 4",
name: 'checks[]',
inputValue: '4',
dataIndex: 'c4'
})
);
form.fieldset(
{legend: "Radios"},
new Ext.form.Radio({
boxLabel: "radio 1",
name: 'radios[]',
inputValue: '1',
checked: true,
dataIndex: 'r1'
}),
new Ext.form.Radio({
boxLabel: "radio 2",
name: 'radios[]',
inputValue: '2',
dataIndex: 'r2'
}),
new Ext.form.Radio({
boxLabel: "radio 3",
name: 'radios[]',
inputValue: '3',
dataIndex: 'r3'
})
);
var f=form.fieldset(
{legend: "Grid"}
);
form.end();
var ds = new Ext.data.Store({
reader: new Ext.data.JsonReader({root: 'test'},[
{name: 'test1', mapping: 'test1'},
{name: 'test2', mapping: 'test2'}
])
});
var cm = new Ext.grid.ColumnModel([
{header: "Test 1", dataIndex: 'test1', width: 200, sortable: true},
{header: "Test 2", dataIndex: 'test2', width: 200, sortable: true}
]);
cm.defaultSortable = true;
form.addButton('Reset', function(){
//form.load({params:{action:'get'}, waitMsg:'Loading...'});
form.load({
params:{action:'get'},
waitMsg:'Loading...',
success:function(a,b){
var r=ds.reader.read(b.response);
ds.loadRecords(r,{},true);
},
scope:this
});
}, form);
form.addButton('Save', function(){
var r=ds.getRange();
debugger;
form.submit({params:{action:'put'}, waitMsg:'Saving...'});
}, form);
form.render('formId');
var g = new Ext.grid.Grid(f.getEl().child('div'), {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel(),
enableColLock:true
});
g.render();

form.el.mask("testing...", "x-mask-loading");
}
}
}();

[jack.slocum]

You will need to set your form to display:block or mask a different element.

[vtswingkid]

I tacked this in front of the mask

form.el.applyStyles({display:"block"});

I am still getting the same results.

BasicForm.beforeAction uses this mask code. And I find that it does not work in IE6.
Was just trying to narrow the problem down. In IE the mask appears to sit behind all of the form elements.

[vtswingkid]

Here is a simple example that uses the built in masking from the form.


Test = function(){
var dialog, form;
return{
Init:function(){
form = new Ext.Form({
labelWidth: 0,
buttonAlign: 'left',
url:'none.php' (http://extjs.com/forum/'none.php'),
waitMsgTarget:true
});
form.fieldset({legend: "Checks"},
new Ext.form.Checkbox({
boxLabel: "check 1",
name: 'checks[]',
inputValue: '1',
dataIndex: 'c1'
})
);
form.fieldset({legend: "Radios"},
new Ext.form.Radio({
boxLabel: "radio 1",
name: 'radios[]',
inputValue: '1',
checked: true,
dataIndex: 'r1'
}),
new Ext.form.Radio({
boxLabel: "radio 2",
name: 'radios[]',
inputValue: '2',
dataIndex: 'r2'
})
);
form.end();
form.addButton('Reset', function(){form.load({waitMsg:'Loading...'});}, form);
form.addButton('Save', function(){form.submit({waitMsg:'Saving...'});}, form);
form.render('formId');
}
}
}();
Ext.onReady(Test.Init, Test, true);


In FF everything is masked, and the message pops displays as expected.
In IE6 the message displays but the mask pops up below the form.

EDIT: this requires the latest SVN

[mystix]

don't have SVN access, but is the mask <div class='ext-el-mask'> being appended before or after the <form> in the DOM?

[vtswingkid]

Appended to the end of the inside of the form

FireBug Inspector

-<form id="ext-gen317" class="x-form" method="post" style="position: relative;">
+<div id="ext-gen316" class="x-form-ct">
+<div class="x-form-btns-ct">
<div id="ext-gen529" class="ext-el-mask" style="display: none;"/>
+<div id="ext-gen530" class="ext-el-mask-msg x-mask-loading" style="left: 515px; top: 101px; display: none;">
</form>

[mystix]

eh? might have to check it in IE itself using the IE webdeveloper plugin... i'm thinking IE might have appended the mask <div> just after the opening <form> tag

[vtswingkid]

Ext Debug Console & Inspector reports the same thing in IE6

[mystix]

ok, i'm out of ideas... have to refer this to the founder. ;)

btw, have you tried masking a different element?

[malkishua]

Hi just wanted to say im having the same issue, on IE7 though,
im trying to mask the <div> that surrounds the form, and it looks like the mask is under all the form elements on IE7, further testing showed that in the ext examples, the xml form example also has the same problem under ie7.

is that example working ok for the rest of you?

Thanks,
Rob.

[jack.slocum]

It's very possible that a form doesn't have dimensions in IE because it isn't a visual element. I wouldn't be shocked. Can you try wrapping the form in a div and seeing if you have a different outcome?

[malkishua]

its is warpped in a div, the whole form:

<div id="maindiv" style="width:300px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" id="box-bd">
<h3 style="margin-bottom:5px;">Enter your username and password</h3>
<div id="form-ct"></div></div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

im trying t use the mask on the maindiv, still the mask seems like its behind the whole form as per the example in /ext/examples/form/xml-form.html

Thanks,
Rob.

[vtswingkid]

Well be default the form is in a div and the mask divs are siblings.
I wrapped that div in another div and moved the mask out a level.
Exact same results.

Oh, I tried it in IE7
The mask displays perfectly. But once it is unmasked the buttons and fieldsets and labels dissappear with it.

Can't we just make everyone use FF in this world?

EDIT: I can host this example if you want but I'll will have to put your latest svn up also (making it available to any interested parties). Is that ok?

[malkishua]

Oh, I tried it in IE7
The mask displays perfectly. But once it is unmasked the buttons and fieldsets and labels dissappear with it.


Well i would be interested to see how you got it to wor on IE7, because it doesnt for me even if i warp it in another div.
on a side note, this should fix your dissappearing problems:

var box = Ext.get('maindiv');
box.applyStyles({display:"block"});

Rob.

[vtswingkid]

The 2nd example posted above seems to mask fine in IE7. I have done nothing special to it. I am still trying to get the items to reappear though. Maybe it is an indexing problem. I suppose I better start using the EXT debugger.

EDIT: Walking through the EXT inspector seems to make the objects reappear. Wierd. Oh I am using the -debug file. Let me try it with out.

EDIT: No difference when using the ext-all.js Wouldn't figure. In IE7 the objects start reappearing as I click the checkbox and radio boxes. Buttons sometimes show.

[timb]

I am also experiencing this problem using IE7. It works as expected in FF. I have tried again after updating to 1.0.1, but the problem still exists.

Once I set waitMsgTarget = true to get it to use the loadMask, the problem occurs. If I don't set this (or set it to false) to get it to use the progress dialog, it works as expected.

[TopKatz]

Im having a simaler problem in ie7 with mask()

var theForm = Ext.get('userInfoForm');
form.el.mask("Loading...", "x-mask-loading");

If I use this on my form all of the fields are gone, if I rem out my mask stuff the form displays correctly.

BTW - I do not see the mask at all, it just wipes out the fields, it also never seams to unmask, even though I call it, and it works in ff.

EDIT: useing waitMsgTarget= true, instead of a manual mask works in ff, but does nothing at all in ie. waitMsgTarget does not blank out the fields in ie, so Ill use that until a fix is in place.

[jack.slocum]

Are you including core.css (or ext-all.css)?

For the IE problems, try setting zoom:1 on the element.

[TopKatz]

Im using ext-all.css

[timb]

I am still experiencing this problem. I have gotten the latest from SVN. I am using ext-all.css. I have tried setting zoom:1 on the form field, but it didn't help (or were you talking about a different element?).

To clarify, when waitMsgTarget is set to true and the form is loading, I see the form fields and the loading indicator. However, in IE the fields disappear once the loading indicator disappears. In FF, it works as expected. If I set waitMsgTarget to false, it works as expected.

Has anyone been able to resolve this problem? Can anyone think of something else I can try or give advice on how to debug this issue?

[jack.slocum]

What are you trying to mask - the form element or a wrapper element?

[timb]

I'm trying to use the built in mask when calling form.load({waitMsg:'Loading...'}); when waitMsgTarget is set to true. You should be able to reproduce this with the following code (modified from the 4th post in this thread to minimize code):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="../lib/Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../lib/Ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../lib/Ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../lib/Ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var form = new Ext.Form({
url:'none.php',
waitMsgTarget:true
});
form.fieldset(
{legend: "Checks"},
new Ext.form.Checkbox({
fieldLabel: "check 1"
})
);
form.end();
form.addButton('Reset', function(){form.load({waitMsg:'Loading...'});}, form);
form.render('form-ct');
});
</script>

<div id="form-ct"></div>
</body>
</html>

When you click reset, you will notice that some form elements disappear in IE but not FF. If you click where the button used to be it will become visible again. If you click on the checkbox, the legend and border will become visible again.

Bah, I just commented out the first line (doctype) and it resolved the problem. I tried it in my app, and this problem appears to be resolved, but now I have others (I'm using the menubar created by Animal, which doesn't appear to work well without this).

Where do we go from here? Is there anything else I can do to help resolve this issue?

[jack.slocum]

waitMsgTarget:true doesn't appear to be supported by IE in anything but quirks mode. You will need to apply it to a different element. I will have to refactor that code and take away the ability to apply it to the form.

[timb]

Thanks Jack. I'll try masking a different element.

[timb]

Hi Jack,

I was able to workaround this issue by applying the mask to a container rather than to the form itself.

I have already extended the form, so I put my code in the override of the render. Here's my code that just creates a box first:render: function(container) {
this.container = Ext.get(container);
var formContainer = Ext.id();
var boxId = Ext.id();

var t = new Ext.Template(this.defaultTemplate);
t.disableFormats = true;
t.compile();
t.append(container, {
'boxId': boxId,
'contentContainerId': formContainer,
'title': this.title,
'width': this.width
});

this.waitMsgTarget = (this.waitMsgTarget === true) ? boxId : this.waitMsgTarget;

Ext.form.FormView.superclass.render.call(this, formContainer);

Here's the template I'm using:'<div id="{boxId}" style="width: {width}px;">',
'<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">',
'<h3>{title}</h3>',
'<div id="{contentContainerId}"></div>',
'</div></div></div>',
'<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
'</div>'

If you wrap the form with one more div, maybe you won't have to remove this functionality from the form?

Edit: I found that the loadMask took up the width of the screen and not the form. I resolved this by adding an id for the outer container (the box) and applying the mask to that.

[lgerndt]

After looking at the Ext code (1.0.1a) which applies the mask, I happened upon a simple solution. In your form defintion, make the following change:


Was: waitMsgTarget: 'box-bd',
Is: waitMsgTarget: (Ext.isIE ? true : 'box-bd'),
This results in the mask being applied to a slightly smaller area (it leaves out the title portion of the form, but the rest gets masked). My labels no longer disappear. Of course, in FF, they never did.