The grid is not displaying properly for me the column headers float above the rest of the grid. If I change the window size after the grid has rendered it fixes itself. See screenShot
Code:
Ext.regModel('User', {
fields: [{
name: 'name',
type: 'string'
},
{
name: 'title',
type: 'string'
},
{
name: 'date',
type: 'date',
dateFormat: 'n/j h:ia'
},
{
name: 'bio',
type: 'string'
}]
});
var store = new Ext.data.Store({
storeId: 'staff',
model: 'User',
remoteSort: true,
proxy: {
type: 'ajax',
url: './php/jsonStaff.php',
reader: {
type: 'json',
model: 'User',
root: 'staffDatabase',
totalProperty: 'totalRecords'
}
}
});
store.load({
params: {
start: 0,
limit: 35
}
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columnLines: true,
headers: [{
text: 'Name',
flex: 1,
sortable: false,
dataIndex: 'name'
},
{
text: 'Title',
width: 120,
sortable: true,
dataIndex: 'title'
},
{
text: 'Last Updated',
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'date'
}],
height: 310,
split: true,
region: 'north',
// title: 'Array Grid',
viewConfig: {
stripeRows: true,
forceFit: true
}
});
