incorrect gridpanel height

[igo]

Hi,
I have a problem with GridPanel which is inside BorderLayout which is inside other BorderLayout. Problem is that paging of grid is not displayed. Paging toolbar apperars only after resizing window.



var layout = new Ext.BorderLayout(document.body, {
center: {
titlebar: false,
autoScroll: true,
tabPosition: 'top',
closeOnTab: true
}
});

var innerLayout = new Ext.BorderLayout('projectsLayout', {
west: {
split:true,
initialSize: 200,
minSize: 160,
maxSize: 400,
titlebar: true,
collapsible: true,
fitToFrame: true,
animate: true
},
center: {
titlebar: true,
}
});


var myGrid = new AQA.project.ListGrid('projectListGrid', {
autoSizeColumns: true
});
myGrid.render();
var paging = new Ext.PagingToolbar(myGrid.getView().getFooterPanel(true), myGrid.getDataSource(), {
pageSize: 3,
displayInfo: true,
displayMsg: 'Displaying projects {0} - {1} of {2}',
emptyMsg: "No projects to display"
});
myGrid.getDataSource().load({params:{start:0, limit:3}});

innerLayout.add('center', new Ext.GridPanel(myGrid, {title: 'Projects'}));

layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('projectsPanel', {title: 'Projekdyyy'}));
layout.add('center', new Ext.ContentPanel('testCasesTab', {title: 'Test Cases'}));
layout.getRegion('center').showPanel('projectsPanel');
layout.endUpdate();
<div id="projectsPanel">
<div id="projectsLayout">
<div id="projectListGrid"></div>
</div>
</div>This is probably due to incorrect height of gridpanel becuose when using header toolbar instead of footer toolbar then scrollbar is not positioned properly. Know somebody some hack for this?

[fay]

Try:


// ...
layout.endUpdate();

myGrid.render();
myGrid.getDataSource().load({params:{start:0, limit:3}});

(Of course, removing your previous calls to render and load.)

[igo]

still don't work

[fay]

Post your modified code and I'll take a look at it here.

BTW, I'm using 1.0.1a

[fay]

What's an AQA.project.ListGrid?

[igo]

.....
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('projectsPanel', {title: 'Projekdyyy'}));
layout.add('center', new Ext.ContentPanel('testCasesTab', {title: 'Test Cases'}));
layout.getRegion('center').showPanel('projectsPanel');
layout.endUpdate();

myGrid.getDataSource().load({params:{start:0, limit:3}});
myGrid.render();
var paging = new Ext.PagingToolbar(myGrid.getView().getFooterPanel(true), myGrid.getDataSource(), {
pageSize: 3,
displayInfo: true,
displayMsg: 'Displaying projects {0} - {1} of {2}',
emptyMsg: "No projects to display"
});AQA.project.ListGrid is my grid which encapsulate datahandling, record def., etc.:


AQA.project.ListGrid = function(container, config) {
// create projects list record definition
var recordDef = Ext.data.Record.create([
{name: 'id'},
{name: 'name'},
{name: 'created', type: 'date'},
{name: 'tags'}
]);

// create projects list Data Store
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'projects.xml'
}),
reader: new Ext.data.XmlReader({
totalRecords: 'results',
record: 'row',
id: 'id'
}, recordDef),
remoteSort: !true
});


var columnModel = new Ext.grid.ColumnModel([{
id: 'name',
header: 'Name',
dataIndex: 'name',
sortable: true,
renderer: this.renderName
}, {
id: 'created',
header: 'Created',
dataIndex: 'created',
sortable: true,
renderer: this.renderCreatedPlain
}]);

Ext.applyIf(config, {
ds: store,
cm: columnModel,
enableColLock:false,
loadMask: true
});

AQA.project.ListGrid.superclass.constructor.call(this, container, config);

};


Ext.extend(AQA.project.ListGrid, Ext.grid.Grid, {

addPaging: function() {
var paging = new Ext.PagingToolbar(this.getView().getFooterPanel(true), this.getDataSource(), {
pageSize: 3,
displayInfo: true,
displayMsg: 'Displaying projects {0} - {1} of {2}',
emptyMsg: "No projects to display"
});
},

renderName: function(value, metadata, record) {
return String.format('<b><i>{0}</i></b><br/>{1}', value, record.data['tags']);
},

renderNamePlain: function(value, metadata, record) {
return String.format('{0}', value);
},

renderCreatedPlain: function(value) {
return value.dateFormat('M j, Y, g:i a');
},

setShowDetails: function(showDetails) {
this.getColumnModel().getColumnById('name').renderer = (showDetails ? this.renderName : this.renderNamePlain);
this.getView().refresh();
}

});



Using 1.1

[fay]

I would load the data *after* the grid is rendered, as per the examples\grid\paging example.

[igo]

it doesn't matter. i tried every combination of order.

[christophre]

Any resolution to this problem yet?

[appshare]

thanks for help