Results 1 to 7 of 7

Thread: setting gridpanel header align

  1. #1
    Sencha User emredagli's Avatar
    Join Date
    Jun 2008
    Posts
    301
    Vote Rating
    2
      0  

    Default setting gridpanel header align

    Hii,
    I want to set columns header align.
    It is defaults to left align. But when I set,
    Code:
    align:'right',
    it changes header align also. But I want header align remains firm.
    I try this:
    Code:
    header: '<span style="text-align: left;">Order Count</span>',
    But it doesn't work.
    I know there must be simple way to do this. But I couldn't find.

    thanks...

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      0  

    Default

    set align:right? Where?

    If you read the docs you can style grid header cells. ColumnModel. id
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #3
    Sencha User emredagli's Avatar
    Join Date
    Jun 2008
    Posts
    301
    Vote Rating
    2
      0  

    Default I change class files

    Dear Animal,
    Thanks for your information,
    I read API documentation and write the class:
    Code:
    .x-grid3-hd.x-grid3-td-OrderAmount{
    text-align: left;
    }
    And in the grid my code is:
    Code:
    ...
            columns:[    ...
                        {    id: 'OrderAmount',
                            header: "Order Amount", 
                            width: 110, 
                            dataIndex: 'OrderTotal', 
                            align: 'right', 
                            sortable: true,
                            renderer: function(data) {
                                var decimalZero=true;
                                return formatNumber(Number(data),decimalZero);
                            }}, 
                        ...
                    ],
    ...
    But header is not left aligned.
    thanks.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      0  

    Default

    Headers are left aligned by default, so you won't see any difference.

    When I test the examples/grid/array-grid.html, and I add the rule

    Code:
    .x-grid3-hd.x-grid3-td-xgc1 {
        text-align:right;
    }
    The "Price" header aligns right.

    This is just a matter of debugging with Firebug to check whether your rule is being parsed properly, whether the elements have the classes you hope, whether the rule is being overridden by soimething else. All checkable by you as a developer using the tools you have. No need to any of us.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  5. #5
    Sencha User emredagli's Avatar
    Join Date
    Jun 2008
    Posts
    301
    Vote Rating
    2
      0  

    Default Solved

    Dear Animal,
    thank you very much.
    I solved the problem like that:
    Firstly, I remove the line:
    Code:
    align: 'right',
    in column model.
    Then I write this CSS classes:
    Code:
    .x-grid3-td-GridOrderAmount{
    text-align: right;
    }
    .x-grid3-hd.x-grid3-td-GridOrderAmount{
    text-align: left;
    }
    Now, My header become left align, and grid elements become right align.

    thanks for your information.
    good works.

  6. #6
    Sencha User frrogoy's Avatar
    Join Date
    Jan 2010
    Location
    Central Indiana
    Posts
    89
    Vote Rating
    0
      0  

    Default

    Thanks, Emredagli, this is still a problem apparently. Your solution was what I needed.
    Frank R.

  7. #7
    Sencha User
    Join Date
    Mar 2017
    Posts
    9
    Vote Rating
    0
      0  

    Default

    do you have a sample screen shot for this one?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •