1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    16
    Vote Rating
    0
    reignile is on a distinguished road

      0  

    Default The table header doesn't show

    The table header doesn't show


    extjs 2.0.2, when using form-markup.js to render an existing HTML table, the header of the table run away, i don't know why
    The structure of the existing table is like the following:

    Code:
    <table id='..'>
    <thead> 
       <tr>..</tr>
    </thead>
    <tbody>
       <tr>...</tr>
    </tboby>
    </table>
    I even modify ext-all.css and change

    Code:
    .x-grid3-header-offset{padding-left:1px;width:10000px;}
    to

    Code:
    .x-grid3-header-offset{padding-left:1px;width:auto;}
    But it doesn't help

    Updated: the header appears in IE, but very very ugly and in Firefox, it doesn't show up at all

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Have you specified a width or height when creating the TableGrid?

    Are you using th's within your thead?

    Could you post some more code so that we could try to troubleshoot this further?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    16
    Vote Rating
    0
    reignile is on a distinguished road

      0  

    Default


    Actually, the table is created using php dynamically
    Code:
    <?php
    ...
    echo "<TH>Product</TH>;
    ...
    ?>
    The whole structure is like

    Code:
    <TABLE cellspacing='0' id='mytesttable'>
    <thead>
    <TR style='background:#eeeeee;'>
    <TH>Product</TH>
    <TH>Date</TH>
    <TH>Owener</TH>
    </thead>
    <tbody>
    <TR><TD><center><B>Hello1<B></center></TD><TD>2007-01-01</TD><TD><a href='url'>ME</a></TD></TR>
    <TR><TD><center><B>Hello2<B></center></TD><TD>2007-01-02</TD><TD><a href='url'>Y</a></TD></TR>
    </tbody>
    </table>
    In from-markup.js (extjs 2.0.2 version)

    I change

    Code:
      var btn = Ext.get("create-grid");
      btn.on("click", function(){
        btn.dom.disabled = true;
    
        // create the grid
        var grid = new Ext.grid.TableGrid("the-table", {
          stripeRows: true // stripe alternate rows
        });
        grid.render();
      }, false, {single:true}); // run once
    to

    Code:
     
       var grid = new Ext.grid.TableGrid("mytesttable", {
           stripeRows: true // stripe alternate rows
       });
       grid.render();

    In Firefox, the grid header is missing.
    In IE 7, the grid header shows up, but when I chose 'Columns' and unselect 'Date' column, the table became very ugly because the table header will be align left and the tbody is align center, like
    ___________________________
    |Product | Owner | |
    -------------------------------
    &nbsp; | Hello1 | ME | &nbsp;
    &nbsp; -------------- &nbsp;
    &nbsp; | Hello2 | Y | &nbsp;
    -------------------------------
    Thanks~

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Before troubleshooting further can you test out Ext 2.1?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext User
    Join Date
    Mar 2008
    Posts
    16
    Vote Rating
    0
    reignile is on a distinguished road

      0  

    Default


    I tried 2.1 just now and this time Firefox can show the table header normally like IE. But when I unselect some column, the same problem still exists, the table header will be align left while the tbody will be align center. Is there anything wrong with my HTML table? Or do I have to disable the unselect column feature? Thanks~

Thread Participants: 1