Error with header columns (fit layout)

[semialcruz]

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.

print.jpg

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]

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]

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:

zoomed_out.jpg

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

[skirtle]

Try removing the layout: fit. A grid should not have a layout specified.

[semialcruz]

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]

Exactly which ExtJS version are you using?

[semialcruz]

ExtJs ver. 4.0.2a

[skirtle]

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]

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