PDA

View Full Version : Grid column not is not fit to grid`s width?



saadkhan
28 Feb 2010, 12:33 AM
I have a grid in accordion, I have only one column to be shown in grid with multiple fields to be shown defined by the renderer function. I am unable to get that only column sized to the width of whole grid....I have done everything but a little space remains there. Here is my code:



var routeStore = new Ext.data.Store({
storeId: 'routeStore',
proxy: new Ext.data.MemoryProxy(''),
reader: new Ext.data.XmlReader(
{
record: 'Point'
},
[
{name: 'Location', mapping: '@Location'},
{name: 'Speed', mapping: '@Speed'},
{name: 'DateAndTime', mapping: '@DateAndTime'},
{name: 'Latitude', mapping: '@Latitude'},
{name: 'Longitude', mapping: '@Longitude'}
])
});

var routeGrid = new Ext.grid.GridPanel({
title: 'Route',
store: routeStore,
deferredRender: false,
hideHeaders: true,
columns:
[
{id: 'location', header: "Location", dataIndex: 'Location', renderer: function(value,p,r){ return String.format("<b>{0}</b><br />{1}<br />{2}<br />{3}, {4}", value, r.data['Speed'], r.data['DateAndTime'], r.data['Latitude'], r.data['Longitude']); }}
],
viewConfig: {forceFit: true}
});


I have also tried using autoExpandColumn: 'location'.... It didnt work too! Guide me how to tackle it?

Animal
28 Feb 2010, 5:44 AM
Configure the accordion layout with autoWidth: false

saadkhan
28 Feb 2010, 6:40 AM
Configure the accordion layout with autoWidth: false

It didnt work....I did what you said but its not working. What is wrong with it I cant understand?
(see attachment)

Animal
28 Feb 2010, 12:10 PM
No idea, because we can't see your code. You could be overnesting.

saadkhan
28 Feb 2010, 12:36 PM
No idea, because we can't see your code. You could be overnesting.





var routeStore = new Ext.data.Store({
storeId: 'routeStore',
proxy: new Ext.data.MemoryProxy(''),
reader: new Ext.data.XmlReader(
{
record: 'Point'
},
[
{name: 'Location', mapping: '@Location'},
{name: 'Speed', mapping: '@Speed'},
{name: 'DateAndTime', mapping: '@DateAndTime'},
{name: 'Latitude', mapping: '@Latitude'},
{name: 'Longitude', mapping: '@Longitude'}
])
});

var routeGrid = new Ext.grid.GridPanel({
title: 'Route',
store: routeStore,
hideHeaders: true,
trackMouseOver: false,
columns:
[
{id: '_location', header: "Location", dataIndex: 'Location', renderer: function(value,p,r){ return String.format("<b>{0}</b><br />{1}<br />{2}<br />{3}, {4}", value, r.data['Speed'], r.data['DateAndTime'], r.data['Latitude'], r.data['Longitude']); }}
],
viewConfig: {trackMouseOver: false},
autoExpandColumn: '_location'
});


Now let me know if you can my code :)

Animal
28 Feb 2010, 2:22 PM
?

saadkhan
28 Feb 2010, 8:15 PM
? mean what? Help me!!!!! Guide me what is wrong in it or something I am missing over here.
Thanks

Animal
28 Feb 2010, 10:24 PM
Help me

Seeing how you create your grid is not helpful. Where the grid is inserted into a Container, and the layout of that Container are significant.

saadkhan
1 Mar 2010, 12:56 AM
Help me

Seeing how you create your grid is not helpful. Where the grid is inserted into a Container, and the layout of that Container are significant.

My grid (code given in previous post) is inserted into this container (Accordion). And this accordion is inserted into a Viewport....code of both are given. Please have a look at it. Thanks



// Grid > Accordion
var accordion = new Ext.Panel({
region: 'west',
margins: '0 0 0 0',
split: true,
width: 250,
autoWidth: false,
minWidth: 250,
maxWidth: 500,
fill: true,
renderHidden: true,
layout: 'accordion',
bodyStyle: 'background:#eee;',
border: false,
activeItem: 0,
collapsible: true,
layoutConfig:
{
fill: true, animate: true
},
items: [routeGrid, statusGrid, detailListViewPanel],
tools:
[
{
id: 'gear',
handler: function() {
customCommandWindow.show();
}
}
]
});




// Accordion > Viewport
var viewport = new Ext.Viewport({
id: 'viewport',
layout: 'border',
border: false,
items: [
accordion
]
});

Animal
1 Mar 2010, 1:27 AM
Where's the autoWidth: false?

saadkhan
1 Mar 2010, 2:53 AM
Where's the autoWidth: false?

It is there!!! Should I put autoWidth: false in layoutconfig of accordion?

Animal
1 Mar 2010, 3:42 AM
What do you think, having read the docs?

http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.AccordionLayout

saadkhan
1 Mar 2010, 9:57 AM
What do you think, having read the docs?

Well, I already have read and have tried everything I could do....tht is why I am asking you guys to help me out.

Thanks

Animal
1 Mar 2010, 10:28 AM
The answer is in that link. Are you prepared to read?

saadkhan
1 Mar 2010, 10:46 AM
If I would had find it earlier then why will I waste my time over here asking for help to you guys....!!!
Are you prepared to help out somebody instead playing with the situation :)?