PDA

View Full Version : Grid Panel data is not displaying properly



Gowri Mogulluru
26 Jan 2014, 9:08 PM
Hi,
I am new to extjs 4.2. I am displaying the data in the grid panel. But headings are not align properly.

here is the code:



var win = Ext.create('Ext.Viewport', {
id: 'grid',
layout: 'border',
items: [


Ext.create('Ext.grid.Panel', {
height:900,
store: homeGridStore,
stripeRows: true,
columnLines:true,
autoScroll:true,
columns: [
{
text: 'Description',
dataIndex: 'unitname'


}, {
text: 'Last Report (dd:mm)',
dataIndex: 'reporttime'
}, {
text: 'Last Check (dd:mm)',
dataIndex: 'lastreporttime'
}, {
text: 'Status',
dataIndex: 'status'
}, {
text: 'Speed',
dataIndex: 'speed'
}, {
text: 'Odo (inKm)',
dataIndex: 'currentodo'
}, {
text: 'No Movement Since',
dataIndex: 'timehours'
}, {
text: 'Location',
dataIndex: 'locationname'
}],
width: 1200,
height: 100
})


]
});



win.render('combo');




});


output:

47709

can any one help me how to do this.

Thanks in Advance.

mdnaveed42
26 Jan 2014, 10:38 PM
Hi Gowri,


Ext.create('Ext.grid.Panel', {
height: 900,
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: ['unitname', 'reporttime', 'lastreporttime', 'status', 'speed', 'currentodo', 'timehours', 'locationname'],
data: [{
'unitname': 'Dhruva Qualis 7737',
'reporttime': '1-27 10:13:49',
'lastreporttime': '1-27 10:13:49',
'status': 'Sign Off',
'speed': '0',
'currentodo': '2872.3',
'timehours': '2m 23s',
'locationname': 'At samartha house, blossom, chord road, bangalore'
}]
}),
stripeRows: true,
columnLines: true,
autoScroll: true,
columns: [{
text: 'Description',
dataIndex: 'unitname'
}, {
text: 'Last Report (dd:mm)',
dataIndex: 'reporttime'
}, {
text: 'Last Check (dd:mm)',
dataIndex: 'lastreporttime'
}, {
text: 'Status',
dataIndex: 'status'
}, {
text: 'Speed',
dataIndex: 'speed'
}, {
text: 'Odo (inKm)',
dataIndex: 'currentodo'
}, {
text: 'No Movement Since',
dataIndex: 'timehours'
}, {
text: 'Location',
dataIndex: 'locationname'
}]
});


Hope this will be working :)

Thanks,
Md Naveed

mohaskuar
26 Jan 2014, 11:54 PM
for each column type add flex:
like this

{header: 'ggg, dataIndex: 'gggg', flex: 1},
{header: 'GG', dataIndex: 'gg', flex: 1},
{header: 'UU', dataIndex: 'UU', flex: 1},
{header: 'DF, dataIndex: 'DD', flex: 1},

hope it works for you..

riku351
27 Jan 2014, 10:17 AM
var win = Ext.create('Ext.Viewport', { id: 'grid', layout: 'border', items: [ Ext.create('Ext.grid.Panel', { height:900, store: homeGridStore, stripeRows: true, columnLines:true, autoScroll:true, columns: { items:[ { text: 'Description', dataIndex: 'unitname' }, { text: 'Last Report (dd:mm)', dataIndex: 'reporttime' }, { text: 'Last Check (dd:mm)', dataIndex: 'lastreporttime' }, { text: 'Status', dataIndex: 'status' }, { text: 'Speed', dataIndex: 'speed' }, { text: 'Odo (inKm)', dataIndex: 'currentodo' }, { text: 'No Movement Since', dataIndex: 'timehours' }, { text: 'Location', dataIndex: 'locationname' }], width: 1200, height: 100 } }) ] }); win.render('combo'); });

columns either takes grid header container config or an array of column configs.
So here is the modified columns config for your requirement.
although I haven't tested, just got around your code and figured out this part.