1. #1
    Sencha User semialcruz's Avatar
    Join Date
    May 2010
    Location
    Chapinlandia
    Posts
    12
    Vote Rating
    0
    semialcruz is on a distinguished road

      0  

    Default Answered: Error with header columns (fit layout)

    Answered: Error with header columns (fit layout)


    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:

    Code:
    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

  2. Exactly which ExtJS version are you using?

  3. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    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

  4. #3
    Sencha User semialcruz's Avatar
    Join Date
    May 2010
    Location
    Chapinlandia
    Posts
    12
    Vote Rating
    0
    semialcruz is on a distinguished road

      0  

    Default Not work

    Not work


    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.

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

  6. #5
    Sencha User semialcruz's Avatar
    Join Date
    May 2010
    Location
    Chapinlandia
    Posts
    12
    Vote Rating
    0
    semialcruz is on a distinguished road

      0  

    Default


    Still nothing.

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

    Code:
    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'
        }
    
    
        ]
    });

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Exactly which ExtJS version are you using?

  8. #7
    Sencha User semialcruz's Avatar
    Join Date
    May 2010
    Location
    Chapinlandia
    Posts
    12
    Vote Rating
    0
    semialcruz is on a distinguished road

      0  

    Default


    ExtJs ver. 4.0.2a

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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?

  10. #9
    Sencha User semialcruz's Avatar
    Join Date
    May 2010
    Location
    Chapinlandia
    Posts
    12
    Vote Rating
    0
    semialcruz is on a distinguished road

      0  

    Default


    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

Thread Participants: 2