PDA

View Full Version : Two Grids in the same panel in BorderLayout



dodgie
6 Sep 2007, 6:05 AM
Hi,

I have two ContentPanels in the "west" part of a BorderLayout containing a Grid... these both load in data from two seperate Ext.data.Store's whch in turn use HttpProxy and XmlReader to retrieve and display XML data from a web address.

I am getting display bugs when I load this page... once the data has loaded, I find that quite often the second tab is blank... only for the grid to be displayed once I click between the tabs again. Sometimes this doesn't work and I have to resize the pane to have them displayed... it just all appears a bit flaky which makes me think I'm going wrong somewhere.

Does anyone have any example code showing the html and js of two grids within contentpanels in a borderlayout?

Thanks in advance,

Rich

fay
6 Sep 2007, 10:11 AM
Are you using GridPanels? Post some code so we see how you are setting up and rendering the grids.

dodgie
7 Sep 2007, 4:30 AM
OK sorry for not showing my code, here it is:


var sourcesgrid;
var sourcesds;
var alertsgrid;
var alertsds;

Ext.onReady(function() {

// Main Layout code
var mainLayout = new Ext.BorderLayout(document.body,{
north: { split: false, initialSize: 35
},
south: { split: false, initialSize: 41
},
west: { split: true, initialSize: 400, collapsible: true, animate: true, titlebar: true
},
center: {
}
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {fitToFrame: true, closable: false}));
mainLayout.add('west', new Ext.ContentPanel('sources-div', {title: 'Sources', fitToFrame: true, autoscroll: true}));
mainLayout.add('west', new Ext.ContentPanel('alerts-div', {title: 'Alerts', fitToFrame: true, autoscroll: true}));
mainLayout.add('center', new Ext.ContentPanel('center-div', {fitToFrame: true}));
mainLayout.getRegion('west').showPanel('sources-div');
mainLayout.endUpdate();

// Source Grid code
sourcesds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'http://myserver/cgi-bin/alerting/sources'}),
reader: new Ext.data.XmlReader({
record: 'Source'
}, [
{name: 'source', mapping: '@SID'}
])
});

var sourcescm = new Ext.grid.ColumnModel([
{header: "Source ID", dataIndex: 'source', width: 400}
]);
sourcescm.defaultSortable = true;

sourcesgrid = new Ext.grid.Grid('grid-sources', {
ds: sourcesds,
cm: sourcescm,
loadMask: new Ext.LoadMask(Ext.get('grid-sources'), {msg: 'Loading Sources'})
});
sourcesgrid.render();
sourcesds.load();

// Alerts Grid code
alertsds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'http://myserver/cgi-bin/alerting/alerttexts'}),
reader: new Ext.data.XmlReader({
record: 'AlertText'
}, [
{name: 'alerttext', mapping: '@text'}
])
});

var alertscm = new Ext.grid.ColumnModel([
{header: "Text", dataIndex: 'alerttext', width: 400}
]);
alertscm.defaultSortable = true;

alertsgrid = new Ext.grid.Grid('grid-alerts', {
ds: alertsds,
cm: alertscm,
loadMask: new Ext.LoadMask(Ext.get('grid-alerts'), {msg: 'Loading Alerts'})
});
alertsgrid.render();
alertsds.load();
});

And here is my html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Example</title>

<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="ext-1.1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ext-1.1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext-1.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ExtTest.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="ext-1.1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ext-1.1/resources/css/ytheme-vista.css">
<link rel="stylesheet" type="text/css" href="ExtTest.css">
</head>
<body>
<div id="north-div">
<h1>My Test</h1>
</div>
<div id="west-div">
<div id="sources-div" style="overflow: hidden; height: 100%">
<div id="grid-sources" style="overflow: hidden; width: 100%; height: 100%;border:0px solid #999;margin:0px 0px;visibility:hidden;"></div>
</div>
<div id="alerts-div" style="overflow: hidden; height: 100%">
<div id="grid-alerts" style="overflow: hidden; width: 100%; height: 100%;border:0px solid #999;margin:0px 0px;visibility:hidden;"></div>
</div>
</div>
<div id="center-div"></div>
</body>
</html>


Any ideas?

Thanks

Rich

Animal
7 Sep 2007, 4:36 AM
Create GridPanels from the Grids, and add the GridPanels to the Layout Regions.

dodgie
17 Oct 2007, 3:51 AM
Hi,

I've done this and now have tabbed panels... I'm just having a problem with the tabs disappearing off the bottom of the screen.... I've outlined this with example code in this thread http://extjs.com/forum/showthread.php?t=15261. I have the same problem with GridPanels and ContentPanels.

Any ideas?

Rich