View Full Version : Is it possible to load a grid from a seperate file into a layout gridpanel?

4 Sep 2007, 2:11 PM

I have a grid in a separate file called grid.html

I can load this into my bordered layout like so

Simple = function() {
var northPanel, southPanel, eastPanel, westPanel, centerPanel;
return {
init : function() {
var mainLayout = new Ext.BorderLayout(document.body, {
north: { split: true, initialSize: 50 },
south: { split: true, initialSize: 50 },
east: { split: true, initialSize: 100 },
west: { split: true, initialSize: 100 },
center: { }
mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false }));
mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false }));
mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false }));
mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false }));
mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe'
northPanel.setContent('This panel will be used for a header');
Ext.get('center-iframe').dom.src = 'grid.html';
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

But this is not shown within a gridPanel. Can anyone explain how to load a grid located in a separate html file into a gridPanel in the current document.

4 Sep 2007, 11:12 PM
What happens when you load grid.html into the browser's main window?

5 Sep 2007, 10:47 AM
Do you mean as a standalone page? It just looks like a normal grid would do.

5 Sep 2007, 10:55 AM
Well an iframe is a container for totally seperate HTML document, so it should work the same.

You'll have to debug it.

5 Sep 2007, 10:57 AM
No its does work fine, my issue is that i'm not using a gridpanel at all, so the grid does not fill the center panel fully. Does that make sense?

5 Sep 2007, 11:07 AM
Are you rendering the Grid to document.body?

5 Sep 2007, 1:06 PM
I think I may have confused you :) The grid in grid.html is not in a gridpanel at the moment, What I want to do is load the grid from grid.html into my index.html center panel using a gridpanel

6 Sep 2007, 12:18 AM
You are loading the page into an iframe? It is a seperate document from the one containing the Layout. It won't have any information about the Layout, it's panels etc. It's a completely seperate web page which should just do it's own thing in its own document.

6 Sep 2007, 7:46 AM
Yes i'm using an iframe at the moment. Is there anyway to do it without an iframe? As the drawback of an iframe is that I need to load all the extjs javascript stuff again...

6 Sep 2007, 10:35 AM
Just create the Grid in another div, wrap it with a GridPanel, and add the GridPanel to the "center" Region.

6 Sep 2007, 12:47 PM
That is where my first question started :)

I'm fine doing it when the grid exists on the same page as my bordered layout, but i'm unsure of how to do that when loading a grid from a separate file.