GridPanel inside of a TabPanel

[thejdog]

Ok, I've been having issues with getting this working for days. And I know I'm doing something wrong. I have searched many times on here for GridPanel and haven't found something that can really demonstrate what I'm needing.

I have this code that is doing a AJAX call and getting JSON data:



function buildSponsorTabs () {
sponsorTabPanel = new Ext.TabPanel('center-tabs');
Ext.Ajax.request({
url: 'urlurlurl',
success: function ( r, o) {
var sponsorList = Ext.util.JSON.decode( r.responseText );
for( var i = 0; i < sponsorList.length; ++i ) {
var sponsorId = sponsorList[i].Id
sponsorTabs[sponsorId] = sponsorTabPanel.addTab( sponsorId+'-stats', sponsorList[i].Name+' Stats');
sponsorTabs[sponsorId].on('activate', statsGrid );
}
sponsorTabPanel.activate( sponsorList[0].Id+'-stats' );
},
failure: function () {
Ext.Msg.alert('Error', 'Please try again in a few moments.');
}
})
}


Then I have it making making the data sources, columnModel, grid & grid panel:



function statsGrid( tabPanel, tab ) {
var sponsorId = tab.id.split("-");
var sponsorId = sponsorId[0];

statsData = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'urlurlurlurl' }),
reader: new Ext.data.JsonReader({
root: 'results',
id: 'site',
totalProperty: 'total',
aggregate:['none','total', 'sum', 'sum']
}, [
DATA SOURCE INFO WENT HERE
])
});
statsData.load({
params:{
s: sponsorId,
o: 'getStats'
}
});

statsColumnModel = new Ext.grid.ColumnModel([
COLUMN MODEL WAS HERE
]);
// alert( Ext.id() );
var statsGridPanelId = Ext.DomHelper.append(tab.id, {tag:'div', id:Ext.id()}, true);
var statsGridId = Ext.DomHelper.append(statsGridPanelId.id, {tag:'div', id:Ext.id()}, true);

var statsGrid = new Ext.grid.Grid( statsGridId.id, {
ds: statsData,
cm: statsColumnModel,
selModel: new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: {msg: "Loading Stats Data List..."},
monitorWindowResize: false,
maxHeight: 500,
autoHeight: true
});

var gridLayout = new Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(statsGrid)]
}
}, tab.id);

statsGrid.render();
}


I'm setting the Element for the Ext.BorderLayout.create to be the tab's body id and then I'm making a new div/id for the grid itself inside of the tab.id div (from what I believe).

Now the issue I'm having is that the gird is showing up, but it seems that because the tabs are taking up the space up top, I'm losing that much of the grid on the bottom.

What would be the proper way to do this do you think?

[Animal]

Just create a GridPanel, and add it to a Layout Region. It will become a Tab.

[thejdog]

Just create a GridPanel, and add it to a Layout Region. It will become a Tab.

How would I create a Layout Region? I can't seem to find much documentation on creating one?

Thanks!

[Animal]

It's a config option on BorderLayout, north, south, east, west or center. They are Regions.

[thejdog]

Yea I got that, I'm here is what I'm doing now:



function buildStatsLayout () {
statsLayout = new Ext.BorderLayout( document.body, {
west: { split: true, initialSize: 175, collapsible: false, titlebar: true, animate: true },
center: { collapsible: false, animate: true, titlebar: true }
});

statsLayout.beginUpdate();
statsLayout.add('west', optionPanel = new Ext.ContentPanel('west-div', { title: "Stats Panel" }));
statsLayout.add('center', mainPanel = new Ext.ContentPanel('center-div', { fitToFrame: true, closeable: true, resizeEl: 'center-tabs', autoscroll: false, title: '' }));
statsLayout.endUpdate();

statsRegion = statsLayout.getRegion('center');
}


And then when it's building the separate grids I'm doing this:



var statsGrid = new Ext.grid.Grid( 'center-grid', {
ds: statsData,
cm: statsColumnModel,
selModel: new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: {msg: "Loading Stats Data List..."}
});
gridPanelLayout = new Ext.GridPanel(statsGrid, {title: 'test'+sponsorId});
statsRegion.add( gridPanelLayout );


The first tab always comes up blank before it ever gets to this part, and then it says Test1 for the next tab. But it creates Test1 it crashes and firebug spits out:



tab has no properties
showPanel(Object wrapper=Object el=Object closable=false loaded=false)ext-all-debug.js (line 24979)
add(Object wrapper=Object el=Object closable=false loaded=false)ext-all-debug.js (line 25016)
statsGrid("2")nsStats.js (line 111)
success(Object tId=0 status=200 statusText=OK, Object url=ajax/ajaxStats.php?o=getSponsorList)nsStats.js (line 174)
apply(function(), undefined, [Object tId=0 status=200 statusText=OK, Object url=ajax/ajaxStats.php?o=getSponsorList], undefined)ext-base.js (line 9)
handleResponse(Object tId=0 status=200 statusText=OK)ext-all-debug.js (line 5045)
getViewWidth(Object conn=XMLHttpRequest tId=0, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 10)
getViewWidth()ext-base.js (line 10)
[Break on this error] if(tab.isHidden())


I figured out how to "find" the region, but I can't figure out how to send config varibles to it.

Thanks!

[steffenk]

you can add the grid to your layout


statsLayout.add('center', new Ext.GridPanel(this.statsGrid ,{title: "statsGrid", fitToFrame:true, closable:false}));

[thejdog]

you can add the grid to your layout


statsLayout.add('center', new Ext.GridPanel(this.statsGrid ,{title: "statsGrid", fitToFrame:true, closable:false}));

That does the same thing :(

What I'm trying to do is take 8 different sponsors and run them through a array though the same function. So that I don't have to duplicate code 8 times.

Well when ever the statsLayout.add() runs a second time it comes up with a error: tab has no properties

I don't know how to specify the config options for the Layout Region. If I comment out the:


statsLayout.add('center', new Ext.ContentPanel('center-div'));

Nothing comes up at all. I can't find any decent documentation on this type of stuff.

[thejdog]

I got it working both ways, both work. The only thing now is that the grid doesn't render correctly. All the data is there, but the actual column's aren't streching across but the headers have the | between the wording. I will get a screen shot later.

[thejdog]

Ok, here is a screen shot:

http://www.thejdog.com/screenshots/grid_header_problem.jpg

As you can tell the headers are way OFF. Now here is the code for creating each grid:



function statsGrid( sponsorId ) {
statsData[sponsorId] = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'xxx/xxxxxx.php' }),
reader: new Ext.data.JsonReader({
root: 'results',
id: 'site',
totalProperty: 'total',
aggregate:['none','total', 'sum', 'sum']
}, [
STATS DATA HERE
])
});

statsColumnModel = new Ext.grid.ColumnModel([
COLUMN MODEL DATA HERE
]);
statsLayout.getRegion('center').bodyEl.createChild({tag: 'div', id:sponsorId+'stats-grid'});

statsGridData[sponsorId] = new Ext.grid.Grid( sponsorId+'stats-grid', {
ds: statsData[sponsorId],
cm: statsColumnModel,
selModel: new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: {msg: "Loading Stats Data..."}
});
gridPanelLayout[sponsorId] = new Ext.GridPanel(statsGridData[sponsorId], {title: 'test'+sponsorId, background: true});
gridPanelLayout[sponsorId].on('activate', function() { sponsorField.setValue( sponsorId ); } );
statsLayout.beginUpdate();
statsLayout.add( 'center', gridPanelLayout[sponsorId] );
statsLayout.endUpdate();
statsGridData[sponsorId].render();
statsData[sponsorId].load({
params:{
s: sponsorId,
o: 'getStats'
}
});
statsData[sponsorId].on('load', function() { statsGridData[sponsorId].Aggregate() });
}


And here is the layout function:



function buildStatsLayout () {
statsLayout = new Ext.BorderLayout( document.body, {
west: { split: true, initialSize: 175, collapsible: false, titlebar: true, animate: true },
center: { collapsible: false, animate: true, titlebar: true }
});

statsLayout.beginUpdate();
statsLayout.add('west', optionPanel = new Ext.ContentPanel('west-div', { title: "Stats Panel" }));
statsLayout.add('center', mainPanel = new Ext.ContentPanel('center-div', { title: '30 Day Stats'}));
statsLayout.endUpdate();

statsRegion = statsLayout.getRegion('center');
}