Grid column width does not match header width

  • Hi there,

    I am trying to build a grid with several columns but as you can see in the screen added below the column width does not match the header width.
    Up to now I was not able to fix that. Other grids I am using work in the way I expect them to do. The red borders are for demonstation only, the gray background color is what I want to do as orders can not be performed in this months.
    Here is some of my code...



    var watchOrderData = [
    [0, '12345', '123456789', 1, 0, 1, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 1000, 5, 5000],
    [1, '12345', '123456789', 1, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1000, 2, 2000],
    [2, '12345', '', 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1000, 0, 0],
    [3, '', '', 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1000, 0, 0],
    [4, '', '', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1000, 0, 0]
    ];

    var watchOrderStore = new Ext.data.SimpleStore({
    fields: [
    {name: 'id'},
    {name: 'proc_no'},
    {name: 'order_no'},
    {name: 'status'},
    {name: 'm01'},
    {name: 'm02'},
    {name: 'm03'},
    {name: 'm04'},
    {name: 'm05'},
    {name: 'm06'},
    {name: 'm07'},
    {name: 'm08'},
    {name: 'm09'},
    {name: 'm10'},
    {name: 'm11'},
    {name: 'm12'},
    {name: 'm13'},
    {name: 'up', type: 'float' },
    {name: 'sumValue'},
    {name: 'sumAmount'}
    ]
    });
    watchOrderStore.loadData(watchOrderData);

    var orderModel = new Ext.grid.ColumnModel([
    {
    header: "Vorgangs-Nr.",
    width: 100,
    menuDisabled: true,
    dataIndex: 'proc_no',
    resizable: false,
    css: 'border: 1px solid red;',
    renderer: function(val) {
    if(val.length == 0)
    return '-';
    else
    return val;
    }
    }, {
    header: "Auftrags-Nr.",
    width: 100,
    css: 'border: 1px solid red;',
    menuDisabled: true,
    dataIndex: 'order_no',
    renderer: function(val) {
    if(val.length == 0)
    return '-';
    else
    return val;
    }
    }, {
    header: "Status",
    width: 80,
    menuDisabled: true,
    dataIndex: 'status',
    renderer: function(val) {
    if(val == 0)
    return 'neu';
    else if(val == 1)
    return 'bestätigt';
    else if(val == 2)
    return 'unbestätigt';
    else
    return 'Warenkorb';
    }
    }, {
    header: "Apr",
    width: 30,
    align: 'center',
    css: 'background-color: #EEEEEE; margin: 0px 1px 0px 1px;',
    menuDisabled: true,
    dataIndex: 'm01'
    }, {
    header: "Mai",
    width: 30,
    align: 'center',
    css: 'background-color: #EEEEEE;',
    menuDisabled: true,
    dataIndex: 'm02'
    }, {
    header: "Feb",
    width: 30,
    align: 'center',
    menuDisabled: true,
    dataIndex: 'm11'
    }, {
    header: "Mär",
    width: 30,
    align: 'center',
    menuDisabled: true,
    dataIndex: 'm12'
    }, {
    header: "≥ Apr",
    width: 40,
    align: 'center',
    css: 'background-color: #E6E6E6;',
    menuDisabled: true,
    dataIndex: 'm13'
    }, {
    header: "Anzahl",
    width: 50,
    align: 'right',
    menuDisabled: true,
    dataIndex: 'sumValue'
    }, {
    header: "EURO",
    id: 'sumAmountCol',
    align: 'right',
    sortable: true,
    menuDisabled: true,
    renderer: eurMoney,
    dataIndex: 'sumAmount'
    }]);

    var orderList = new Ext.grid.GridPanel({
    id: 'watchOrderPanel',
    store: watchOrderStore,
    border: false,
    width: 940,
    autoExpandColumn: 'sumAmountCol',
    enableColumnHide: false,
    disableSelection: true,
    autoScroll: true,
    stripeRows: true,
    cm: orderModel
    });

    win = new Ext.Window({
    layout:'fit',
    title: 'Bestellungen',
    width: 900,
    height: 300,
    plain: false,
    modal: true,
    items: [orderList],
    buttons: [{
    text: 'Speichern'
    }, {
    text: 'Schließen',
    handler: function(){
    win.hide();
    }
    }]
    });

    win.show();



    Thanks a lot for your help!
    nutflakes


  • A much better way:

    resize: function(e){
    var x = 0;
    Ext.each (Ext.DomQuery.select ('#scheduleGrid .x-grid3-hd'), function (el) {
    var extEl = Ext.get (el);
    extEl.setWidth(Ext.get(trueNorth.appPanel.getView( ).getCell(0,x)).getWidth());
    x++;
    });
    });


  • I've figured out a quick (figuratively speaking heh) and dirty fix. I know there has to be a better way to deal with this issue. However I'm in a bit of a rush and can't waste too much time fiddling.

    So here it is, a quick n dirty fix:

    Ext.each (Ext.DomQuery.select ('#borderGrid td'), function (el) {
    var extEl = Ext.get (el);
    console.log(extEl.getWidth());
    extEl.setWidth(extEl.getWidth() - 2);
    console.log(extEl.getWidth());
    });

    Please note that this will need to be done whenever the grid gets resized. Probably not worth it! But I just want things to look pretty at the moment.


  • Well, from the previous poster's example, it's because they're adding borders to certain columns which would throw off the width.


  • No one has ever encountered and/or fixed this issue before?

    Using latest version.


  • I am suffering the same problem... anyone have any suggestions?


  • Ah...

    Is there any way to rectify that?







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Grid column width does not match header width , Please add it free.

    7 January 2009 | cameltoepants.com | edit