View Full Version : Grid header is getting rendered before grid body

9 Apr 2012, 11:04 PM
Hi all,

I am using below code to generate a grid. Since the columns are generated dynamically, I am getting the details of column by making a call and passing on this information to the grid. After that I load the store which gets the data. The problem is the header section is getting rendered before grid body gets rendered. Is there any way to fix this.33811

url: '/mdx/results',
method: 'POST',
//Send the query as the message body
jsonData: jsonStr,
params: {
connName: 'conn'

success: function (responseData) {
//decode the response
var wholeResult = Ext.decode(responseData.responseText);
var resultFields = wholeResult.fields;
var resultColumns = wholeResult.columns;
var resultData = wholeResult.data;

Ext.define('Ext.ux.data.proxy.Ajax', {
requires: ['Ext.util.MixedCollection', 'Ext.Ajax'],
extend: 'Ext.data.proxy.Ajax',
doRequest: function (operation, callback, scope) {
var writer = this.getWriter();
request = this.buildRequest(operation, callback, scope);

if (operation.allowWrite()) {
request = writer.write(request);

Ext.apply(request, {
jsonData: jsonStr,
headers: this.headers,
timeout: this.timeout,
scope: this,
callback: this.createRequestCallback(request, operation, callback, scope),
method: this.getMethod(request),
disableCaching: false // explicitly set it to false, ServerProxy handles caching

return request;


var store = new Ext.create('Ext.data.ArrayStore', {
id: 'store',
autoLoad: false,
buffered: true,
pageSize: 200,
fields: resultFields,
remoteSort: true,
proxy: Ext.create(Ext.ux.data.proxy.Ajax, {
type: 'ajax',
url: '/mdx/results',
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
extraParams: {
connName: 'conn'
reader: {
root: 'data',
type: 'array',
totalProperty: 'totalCount'
}) //End of proxy

store.guaranteeRange(0, 150);

//create the group feature to group the headers
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {name} ({rows.length})',
startCollapsed: true

//Prepare the grid
var grid = Ext.create('Ext.grid.Panel', {
id: 'resultgrid',
store: store,
enableColumnHide: false,
enableColumnMove: false,
columnLines: true,
columns: resultColumns,
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
viewConfig: {
stripeRows: true,
trackOver: false
features: [groupingFeature]

}, //success
failure: function (response, opts) {
var msg = 'server-side failure with status code: ' + response.status + ' message: ' + response.statusText;
Ext.Msg.alert('Error Message', msg);

10 Apr 2012, 7:06 AM
Are your properties set at the time you are creating your grid? Your multiple ajax calls are pending and your code is still on the run. If you set a breakpoint at the time you create, what is available?

I would also set all of your store defines up top and simply call load() when you need them.


11 Apr 2012, 7:17 PM
Hi Scott,

Thank you for the reply. Since the columns are generated dynamically, I am making an AJAX call to get that info which is later been passed to the grid. I understand why there is a delay but I wanted to find out is there any way to prevent this from happening. May be by overriding the grid and telling it not to load headers until body is loaded with data.

Let me know if something of that sort is possible.

Thank you.