PDA

View Full Version : Error with header columns (fit layout)



semialcruz
24 Oct 2011, 11:12 AM
I have a form panel with a grid inside, but the header of the columns are not fitted into it. I've tried this on Chrome, IE9 and FF and getting the same error.

28846

This is the code of my grid panel:



var gridPanel = Ext.create('Ext.grid.Panel', {
flex: 0.60,
store: store,
id: 'store-form',
title: 'Datos de Cotizaciones',
layout: 'fit',
columns: [{
text: 'Codigo',
flex: 0.10,
sortable: true,
dataIndex: 'code',
align: 'left'
}, {
text: 'Tienda',
flex: 0.45,
sortable: true,
dataIndex: 'stores',
align: 'left',
id: 'stores'
}, {
text: 'Abiertas',
flex: 0.15,
sortable: true,
dataIndex: 'opened',
align: 'right',
renderer: function (val) {
return '<span style="color:#ff0000;">' + val + '</span>';
}
}, {
text: 'Cerradas',
flex: 0.15,
sortable: true,
dataIndex: 'closed',
align: 'right',
renderer: function (val) {
return '<span style="color:#318021;">' + val + '</span>';
}
}, {
text: 'Total Cotizaciones',
flex: 0.15,
sortable: true,
dataIndex: 'quotes',
align: 'right'
}],
listeners: {
selectionchange: function (model, records) {
var json, name, i, l, items, series, fields;
if (records[0]) {
rec = records[0];
form = form || this.up('form').getForm();
fields = form.getFields();
fields.each(function (field) {
field.suspendEvents();
});
form.loadRecord(rec);
updateRecord(rec);
fields.each(function (field) {
field.resumeEvents();
});
}
}
}
});


Thanks in advance for any help!

P.D. Sorry for my bad english

stevil
24 Oct 2011, 11:46 AM
I think there's either a problem with one of the column configs, or perhaps flex isn't liking decimal numbers (I use numbers like "flex: 1, flex: 4, flex: 10", etc., but that may not be your problem).

Try this:

1) Leave the column "Total Cotizaciones" in the grid.
2) Remove all of the others except for if and "Cerradas".
3) Run the application again.
4) If you got a second column, great, start adding the others one at a time until you find the one that causes your grid to fail.

If this doesn't work, one other thing I noticed is that you have an id property on the column "Tienda". Try removing that. If that doesn't work, try using integer flex values instead of floating point.

Hope this helps!

stevil

semialcruz
24 Oct 2011, 12:07 PM
Now try the three ways that you have suggested me, but unfortunately none worked for me :(. In the process I realized that the scroll bar does not appear, although it does scroll with the mouse :-?. Then I tried zooming in the browser, which displayed itself so good ...

This is my grid zoomed out:

28847

I do not know what else to try, nothing seems to work. :((

skirtle
24 Oct 2011, 1:50 PM
Try removing the layout: fit. A grid should not have a layout specified.

semialcruz
24 Oct 2011, 2:34 PM
Still nothing. :((

I try to simplify my code and now looks like this:



var gridPanel = Ext.create('Ext.grid.Panel', {
flex: 0.60,
store: store,
id: 'store-form',
title: 'Datos de Cotizaciones',
columns: [{
text: 'Codigo',
flex: 1,
sortable: true,
dataIndex: 'code'
}, {
text: 'Tienda',
flex: 4,
sortable: true,
dataIndex: 'stores'
}, {
text: 'Abiertas',
flex: 2,
sortable: true,
dataIndex: 'opened'
}, {
text: 'Cerradas',
flex: 2,
sortable: true,
dataIndex: 'closed'
}, {
text: 'Total Cotizaciones',
flex: 2,
sortable: true,
dataIndex: 'quotes'
}


]
});

skirtle
24 Oct 2011, 2:37 PM
Exactly which ExtJS version are you using?

semialcruz
24 Oct 2011, 2:47 PM
ExtJs ver. 4.0.2a

skirtle
24 Oct 2011, 3:20 PM
It goes without saying that you'd be better off using 4.0.7 but that said I've tried the last code example you posted against 4.0.2 and it works fine. There must be something else going on elsewhere in your code that's breaking it. How are you injecting this grid into the rest of your app?

semialcruz
24 Oct 2011, 3:56 PM
It seems that it was error for the 4.0.2a version because update to version 4.0.7 and everything works perfect.

Thank you so much for the help @skirtle

...and you too @stevil