PDA

View Full Version : [CLOSED] Element mask not positioned correctly for gridpanel in a tab



rhamflett
9 Feb 2012, 2:49 AM
REQUIRED INFORMATION


Ext version tested:


Ext 4.0.7



Browser versions tested against:


Internet Explorer 9.0.8.16421
Firefox 9.0.1 (Firebug 1.9.0)
Chrome 16.0.912.75m
Safari 5.1.2 (7534.52.7)
Opera 11.60(build 1185)



DOCTYPE tested against:


<!DOCTYPE html>



Description:


The mask text is not positioned properly on a grid tab panel when using this.getEl().mask().



Steps to reproduce the problem:


Create a tab panel
Add a grid panel.
Add a mask to the grid panel by calling
this.getEl().mask('Hello');



The result that was expected:


The text appears in the middle of the panel



The result that occurs instead:


THe text appears at the top of the panel and is partially obstructed



Test Case:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Element mask bug report</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-debug.js"></script>
<script type="text/javascript">
Ext.application({
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'queenStore',
fields: ['name', 'role'],
data:{'items':[
{ 'name': 'Freddie', 'role': "singer" },
{ 'name': 'Brian', 'role': "guitarist" },
{ 'name': 'John', 'role': "bassist" },
{ 'name': 'Roger', 'role': "drummer" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'tabpanel',
activeTab: 0,
tbar: [{
xtype: 'button',
text: 'Add tab',
handler: function () {
var tp = Ext.ComponentQuery.query('tabpanel')[0];
tp.add({
xtype: 'panel',
title: 'A tab',
closable: true,
padding: 10,
html: '<p>Here is<p><p>some content<p><p>for the tab.<p>',
listeners: {
afterrender: function () {
this.getEl().mask('This is a mask');
}
}
});
}
}, {
xtype: 'button',
text: 'Add grid tab',
handler: function () {
var tp = Ext.ComponentQuery.query('tabpanel')[0];
tp.add({
xtype: 'gridpanel',
title: 'A grid tab',
closable: true,
store: Ext.data.StoreManager.lookup('queenStore'),
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Role',
dataIndex: 'role'
}],
listeners: {
afterrender: function () {
this.getEl().mask('This is a mask');
}
}
});
}
}]
}]
});
}
});
</script>
</head>
<body></body>
</html>




HELPFUL INFORMATION


Screenshot or Video:


panel-ok.png (attached) shows expected behaviour with a normal panel
grid-bad.png (attached) shows incorrect behaviour with a grid panel



Debugging already done:


none



Possible fix:


not provided



Additional CSS used:


only default ext-all.css



Operating System:
Windows 7 x64 Professional

evant
9 Feb 2012, 11:45 AM
There's a few problems with your test case.

1) It's better to wait til afterlayout, as opposed to afterrender to make sure the component has had a chance to layout correctly.

2) You're masking the underlying element, as opposed to the component, so it can't react correctly to various component events.

You'd be better off doing something like this (tested with B2):



Ext.application({
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'queenStore',
fields: ['name', 'role'],
data: {
'items': [{
'name': 'Freddie',
'role': "singer"
}, {
'name': 'Brian',
'role': "guitarist"
}, {
'name': 'John',
'role': "bassist"
}, {
'name': 'Roger',
'role': "drummer"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'tabpanel',
activeTab: 0,
tbar: [{
xtype: 'button',
text: 'Add tab',
handler: function() {
var tp = Ext.ComponentQuery.query('tabpanel')[0];
tp.add({
xtype: 'panel',
title: 'A tab',
closable: true,
padding: 10,
html: '<p>Here is<p><p>some content<p><p>for the tab.<p>',
listeners: {
single: true,
afterlayout: function() {
this.setLoading('This is a mask');
}
}
});
}
}, {
xtype: 'button',
text: 'Add grid tab',
handler: function() {
var tp = Ext.ComponentQuery.query('tabpanel')[0];
tp.add({
xtype: 'gridpanel',
title: 'A grid tab',
closable: true,
store: Ext.data.StoreManager.lookup('queenStore'),
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Role',
dataIndex: 'role'
}],
listeners: {
single: true,
afterlayout: function() {
this.setLoading('This is a mask');
}
}
});
}
}]
}]
});
}
});

rhamflett
10 Feb 2012, 3:30 AM
I'd been having some trouble with masking generally and getEl().mask() seemed to be better behaved. You're proposal still gave me some issues under 4.0.7, but I've just tried it against B2 and it seems much better. I'll look at converting over to the beta, given that that version reportedly fixes a bunch of issues with masking visibility.

Thanks,
Rob