View Full Version : grid not showing

2 Nov 2011, 7:29 AM
I have a grid within my component hierarchy that I am using to show a variety of feedback messages. I can see the data in firebug, so i know the store is loaded and the grid is getting the data. When the page loads there are no records.

When I peek in firebug there is an outer div that is displaying, but an inner table does not. I don't see anything in the calculated styles that indicates why this would be. Ideas?

What I see in firebug, the div shows, the table doesn't based on the highlights in HTML mode:

<div id="gridview-1019" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex="-1" style="-moz-user-select: none;">

<table class="x-grid-table x-grid-table-resizer" cellspacing="0" cellpadding="0" border="0" style="width: 0px;">

My code:

Ext.create('Ext.grid.Panel', {

store: Ext.data.StoreManager.lookup('_feedback_ds'),

hideHeaders: true,

width: 980,

viewConfig: {

getRowClass : function(record, rowIndex, p, store){

var level = record.get('level');


return 'error';

else if(level=='300')

return 'warning';

else if(level=='200')

return 'info';


return 'success';



hidden: Ext.data.StoreManager.lookup('_feedback_ds').getCount() == 0,

id: '_feedback_panel',

columns: [{text:'Message',sortable:false,dataIndex:'message',width:'100%'}],

margin: '5 0 5 0',

bodyStyle: 'border-width: 2px;border-style:solid;'


2 Nov 2011, 8:02 AM
Try changing the column width to flex: 1.

2 Nov 2011, 8:30 AM
Close. Turned out that it was because I set the width on my column to 100%. Once given a pixel value, it worked. Personally, I think percentages should work in columns, but c'est la vie.

Thanks for the reply.

2 Nov 2011, 8:49 AM
You can set a column to 100% width using flex: 1. Columns are laid out using an HBox so you can either specify widths in pixels or use flex to specify relative values. If you like those values can be out of 100, so setting a flex: 100 would also work.