PDA

View Full Version : [INFOREQ][3.1] breaks GridPanel's inside Tabs in FireFox



mrjoltcola
21 Dec 2009, 1:17 PM
The GOOD news is 3.1 fixed a rendering problem I've had with HtmlEditor scrollbar. I was thrilled about that.The bad news is ..

GridPanels and EditorGridPanels inside TabPanels no longer render. Just white space. No FireBug errors.

IE working fine. This is not a cache issue, I did clear my cache. It only affects my grids under tabs. Other grids are ok.

I tried the latest SVN build today, still broken. Thanks,

-mjc

evant
21 Dec 2009, 1:40 PM
As always, please post a test case.

Ran this from SVN:



Ext.onReady(function(){
var tabs = new Ext.TabPanel({
width: 400,
height: 400,
renderTo: document.body,
activeTab: 0,
items: {
xtype: 'grid',
title: 'Working',
store: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
columns: [{
dataIndex: 'field1',
header: 'col'
}]
}
});
});

mrjoltcola
21 Dec 2009, 7:22 PM
As soon as I can isolate a test case I will. This is inside the Desktop framework. The GridPanel is inside a TabPanel inside a FormPanel inside a Window.




win = desktop.createWindow({

title: this.title,
border: false,
width:900, height:680,
iconCls: this.iconCls,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: formPanel
});

win.show();


Something about the Desktop.createWindow() from the Desktop sample does it. I can manually create a new Window with the same components outside of the Desktop / Module framework and it displays fine. Also, if I move the GridPanel from the TabPanel into the outer formPanel, the grid also renders fine. All this in FireFox, not IE.

-mjc

evant
21 Dec 2009, 7:29 PM
Ok, couldn't isolate that either:



Ext.onReady(function(){
var tabs = new Ext.TabPanel({
anchor: '100% 100%',
activeTab: 0,
items: {
xtype: 'grid',
title: 'Working',
store: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
columns: [{
dataIndex: 'field1',
header: 'col'
}]
}
});
var w = new Ext.Window({
title: 'Foo',
width: 600,
height: 500,
layout: 'fit',
items: {
xtype: 'form',
items: tabs
}
});
w.show();
});


Awaiting your test case.

mrjoltcola
22 Dec 2009, 10:31 AM
Took me a few hours but I was able to extract a test case. See attached.

-mjc




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="stylesheet" type="text/css" href="/webapp/ext-3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/webapp/ext-3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/webapp/ext-3.1/ext-all-debug.js"></script>

<script type="text/javascript" src="/webapp/ext-3.1/examples/desktop/js/StartMenu.js"></script>
<script type="text/javascript" src="/webapp/ext-3.1/examples/desktop/js/TaskBar.js"></script>
<script type="text/javascript" src="/webapp/ext-3.1/examples/desktop/js/Desktop.js"></script>
<script type="text/javascript" src="/webapp/ext-3.1/examples/desktop/js/App.js"></script>
<script type="text/javascript" src="/webapp/ext-3.1/examples/desktop/js/Module.js"></script>

<script type="text/JavaScript">

MyApp = new Ext.app.App();

</script>


<script type="text/JavaScript">
//Array data for the grid
var data = [
['1', 'Nexium'],
['2', 'Ibuprofen']
];


MyApp.MyGridPanel = function() {

MyApp.MyGridPanel.superclass.constructor.call(this, {
title: 'Tab Panel',

initComponent : function() {
alert("MyGridPanel.initComponent");

this.store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'drugDesc'}
]),
data: data
});

this.columns = [
{header: "ID", dataIndex: 'id' },
{header: "Drug", dataIndex: 'drugDesc' }
];

MyApp.MyGridPanel.superclass.initComponent.call(this);
}

});

};

Ext.extend(MyApp.MyGridPanel, Ext.grid.EditorGridPanel);



MyApp.MyEditWindow = Ext.extend(Ext.app.Module, {
id:'edit-win',
title: 'Edit',

createWindow : function(){
var gridPanelInside = new MyApp.MyGridPanel();
var gridPanelOutside = new MyApp.MyGridPanel();

var tabPanel = new Ext.TabPanel({
plain:true,
activeTab: 0,
height:200,
items:[
gridPanelInside // doesn't render
]
});

var formPanel = new Ext.FormPanel({
listeners: {
actioncomplete: function(p) {
if(!gridPanelInside.dataLoaded) {
gridPanelInside.store.load();
gridPanelInside.dataLoaded = true;
}
}
},

frame: true,
items: [
tabPanel, // this contains a gridPanel but doesn't render it
gridPanelOutside // renders fine outside of tab
]
});

this.win = MyApp.desktop.createWindow({
//id: this.id, // assign new id instead of reusing - if we reuse this.id, windows share the same DOM element and we have data interference
title: this.title,
border: false,
width:600,
height:400,
iconCls: this.iconCls,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: formPanel
});
this.win.show();
return this.win;
}
});



Ext.onReady(function(){

return new MyApp.MyEditWindow().createWindow();

});
</script>
</head>

<body>

<div id="x-desktop">
</div>

<div id="ux-taskbar">
<div id="ux-taskbar-start"></div>
<div id="ux-taskbuttons-panel"></div>
<div class="x-clear"></div>
</div>

</body>
</html>

Condor
22 Dec 2009, 11:30 PM
The FormPanel in your example is missing a layout.

mrjoltcola
23 Dec 2009, 8:09 AM
@mystix: Regarding html tags, I tried that and after viewing with preview, it appeared that the formatting was not retained. If the forum does not want attachments, then the attachment feature should be removed, otherwise I'll continue to use it, thank you. I also use Expert's Exchange quite often, and don't have a similar problem posting formatted code, so I don't think it is just me. :)

EDIT: After I submitted I realized how snippy I sounded. Sorry. My point is, the forum has some rough edges regarding code / html snippets. Not your fault for doing thread cleanup.

@Condor: Thanks, you are right. I had opened a ticket yesterday and was told that was the issue. I would like it noted that ExtJS 3.0's default behaviour allows that code to work without the layout, which is a bit more intuitive. I expect a GUI framework to render a child component with some reasonable default, if none is specified. Just makes it friendlier all around. From 3.0 to 3.1 default behaviour changed.

Thanks for the help.