1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Nuenen, The netherlands
    Posts
    5
    Vote Rating
    0
    WebRTB is on a distinguished road

      0  

    Question Unanswered: TransformGrid html table

    Unanswered: TransformGrid html table


    Hi,

    I tranformed an HTML table to the extJS grid with TransformGrid. But i'm missing the borders on the right, i have searched for over a week know on the internet but i can't find what causes the problem.Maby you guys know?

    Here's some more info:



    Code:
    Ext.onReady(function(){     var grid = Ext.create('Ext.ux.grid.TransformGrid', "productenTabel", { width: productWidth, dock: 'top', forceFit: true, autoFill: true, stripeRows: true    });         var panel1 = Ext.create('Ext.panel.Panel', {         title: 'Uw producten:',         width: productWidth,         dockedItems: [ grid ],         renderTo: "panel1",         border: 10     }); });
    HTML Code:
    <h1>Producten:</h1> <div id="panel1"></div> <table cellspacing="0" id="productenTabel"> <thead>     <tr>         <th>Categorie</th>
                    <th>Termijn</th>         <th>omschrijving</th>         <th>btw</th>     </tr> </thead> <tbody>         <tr><td>Domeinnamen</td><td>Jaarlijks</td><td>Domeinnaam .nl</td><td>19</td></tr>
            <tr><td>Webhosting</td><td>Jaarlijks</td><td>Webhosting 500mb</td><td>19</td></tr> </tbody> </table>
    Thanks.
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Check the DOM to see if the width is just a little to wide.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Nuenen, The netherlands
    Posts
    5
    Vote Rating
    0
    WebRTB is on a distinguished road

      0  

    Post already did that

    already did that


    I already dit that and yes it's to wide.But if i program a width of 300px i'm having the same problem.
    Then i thougt it might be a padding issue so i went for a padding of 10px but that made the problem even bigger.

    It's just always standard 10/11 px to wide for the width you set.

    Thanks for your reply.

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    6
    Romick is on a distinguished road

      0  

    Default Make as answered thread

    Make as answered thread


    Make as answered thread Please!

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Location
    Nuenen, The netherlands
    Posts
    5
    Vote Rating
    0
    WebRTB is on a distinguished road

      0  

    Default


    my question is not anserwed yet, i'm still having the same problem.

    So no, i will not:
    Make as answered thread

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    6
    Romick is on a distinguished road

      0  

    Question Width

    Width


    Ok Then just width:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <
    html>
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <
    title>From Markup Grid Example</title>
        <
    link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <
    link rel="stylesheet" type="text/css" href="../shared/example.css" />

        <
    script type="text/javascript" src="../../bootstrap.js"></script>
        <script type="text/javascript">
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath('Ext.ux', '../ux');

    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.ux.grid.TransformGrid'
    ]);

    Ext.onReady(function(){
        var btn = Ext.get("create-grid");
        btn.on("click", function(){
            btn.dom.disabled = true;

            var productWidth='100';
            
            var grid = Ext.create('Ext.ux.grid.TransformGrid', "productenTabel", {
                width: productWidth, 
                dock: 'top', 
                forceFit: true, 
                autoFill: true, 
                stripeRows: true    
            });         
            var panel1 = Ext.create('Ext.panel.Panel', {        
                title: 'Uw producten:',         
                width: productWidth,         
                dockedItems: [ grid ],
                //items: grid,      
                renderTo: 'panel1',         
                border: 10    
            }); 
        });
    });   
        </script>
    </head>
    <body>
        <h1>From Markup Grid Example</h1>
        
        <button id="create-grid" type="button">Create grid</button>
        <br />
        <br />
        
    <h1>Producten:</h1> <div id="panel1"></div> 
    <table cellspacing="0" id="productenTabel"> 
    <thead><tr>         
    <th>Categorie</th><th>Termijn</th><th>omschrijving</th><th>btw</th>
    </tr></thead> 
    <tbody><tr><td>Domeinnamen</td><td>Jaarlijks</td><td>Domeinnaam .nl</td><td>19</td>
    </tr><tr>
    <td>Webhosting</td><td>Jaarlijks</td><td>Webhosting 500mb</td><td>19</td>
    </tr></tbody> 
    </table>

    </body>
    </html> 
    This code works like a charm in Ext 4.0.7. Try it and please explain clearly where is your problem.

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Location
    Nuenen, The netherlands
    Posts
    5
    Vote Rating
    0
    WebRTB is on a distinguished road

      0  

    Exclamation


    First of all the width variable should be without quotes sinds it's an Integer.
    Second i tried your example at 100px wide, not making any difference to my issue:

    It's really a weard problem, i must be missing something really simple.

    screenshot2.jpg

    Thanks for your help so far, you guys are great!

    EDIT: the problem has something todo with the css: overflow: hidden property on the panel. If i remove this property to the panel i can see the border to the grid. The panel howeEver is still to wide.

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    6
    Romick is on a distinguished road

      0  

    Default


    Yes it weird problem. But before to fix it i cant reproduce it. It's work on my machine . What version of Ext do you use? And your browser?
    And why you are using dockedItems? I can't understand that.

  9. #9
    Sencha User
    Join Date
    Feb 2012
    Location
    Nuenen, The netherlands
    Posts
    5
    Vote Rating
    0
    WebRTB is on a distinguished road

      0  

    Post


    Ok let's try and reproduce it at your browser to see if we can find some things.

    I mainly use the latest firefox version currently 10.0.1
    I'm also runnig the latest stable Ext JS 4 version.
    My php 5.3 server runs my own OOP php framework using Mysql and a Smarty engine to produce output.

    I will paste my source code from firefox here, you may have to change some variables like paths:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="robots" content="noindex,nofollow" />
        <link rel="shortcut icon" href="" />
        <link rel="stylesheet" href="{path to resources}/css/jquery-ui-1.8.17.custom.css" media="all" />
        <link rel="stylesheet" href="{path to resources}/css/ext-all.css" media="all" />
        <link rel="stylesheet" href="{path to resources}/css/style.css" media="all" />
        <link rel="stylesheet" href="{path to resources}/css/klant.css" media="all" />
        <style type="text/css" media="all"></style>
        <script type="text/javascript" src="{path to resources}/js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="{path to resources}/js/jquery-ui-1.8.17.custom.min.js"></script>
        <script type="text/javascript" src="{path to resources}/js/ext-all.js"></script>
        <script type="text/javascript" src="{path to resources}/js/config.js"></script>
        <script type="text/javascript"></script>
    </head>
    <body>
    </head>
    <body>
    <div id="container">
      <div class="clear"></div>
      <div id="top">
    
        <div id="logo"><img src="{path to resources}/images/logo.jpg" alt="WebRTB" /></div>
        <div id="socials">
        </div>
      </div>
      <div class="clear"></div>
      <div id="header">
        <div id="image" class="slider"><img src="{path to resources}/images/img-header.jpg" alt="header" /></div>
        <div id="discription" class="slider">
          <h2>Klant controle paneel</h2>
    
          <p>Hier kunt u alles vinden. </p>
        </div>
      </div>
      <div class="clear"></div>
      <div id="nav">
        <ul>
          <li><a href="index.php?module=klant&pagina=home">Home</a></li>
          <li><a href="index.php?module=klant&pagina=gegevens">Klant gegevens</a></li>
    
          <li><a href="index.php?module=klant&pagina=producten">Producten</a></li>
          <li><a href="#">Facturen</a></li>
          <li><a href="#">Helpdesk</a></li>
          <li><a href="index.php?module=login&task=logout">Uitloggen</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    
        <div id="content">
        <div id="left" class="column">
            <h1>Producten:</h1>
            <button id="create-grid" type="button">Create grid</button>
            <div id="panel1"></div>
            <table cellspacing="0" id="productenTabel">
                <thead>
                    <tr>
    
                        <th>Categorie</th>
                        <th>Termijn</th>
                        <th>omschrijving</th>
                        <th>btw</th>
                    </tr>
                </thead>
                <tbody>
    
                                            <tr><td>Domeinnamen</td><td>Jaarlijks</td><td>Domeinnaam .nl</td><td>19</td></tr>
                                                        <tr><td>Webhosting</td><td>Jaarlijks</td><td>Webhosting 500mb</td><td>19</td></tr>
                                        </tbody>
            </table>
            <div class="clear"></div>
    
        </div>
        <div id="right" class="column">
      <div id="nieuws">
        <h3>Storingen & Mededelingen</h3>
        <div class="item">
          <div class="title"><a href="#">Onderhoud e-mailserver Onsnet</a></div>
          <div class="image"><img src="{path to resources}/images/nieuws-img.jpg" alt="nieuws" /></div>
    
          <div class="date-time">14 juni 2011 10:19 AM</div>
        </div>
      </div>
    </div>
        <div class="clear"></div>
      </div>
    </div>
    <div id="klantDialog" title="Dialog Title"></div>
    </body>
    </html>
    Notice that the config.js file configure's the grids. The content of this is in my first post.

  10. #10
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    6
    Romick is on a distinguished road

      0  

    Question Still working :)

    Still working :)


    It stil working on my machine!
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <
    meta name="robots" content="noindex,nofollow" />
        
    <!--    <
    link rel="shortcut icon" href="" />-->
    <!--    <
    link rel="stylesheet" href="{path to resources}/css/jquery-ui-1.8.17.custom.css" media="all" />-->
    <!--    <
    link rel="stylesheet" href="{path to resources}/css/style.css" media="all" />-->
    <!--    <
    link rel="stylesheet" href="{path to resources}/css/klant.css" media="all" />-->
    <!--    <
    style type="text/css" media="all"></style>-->
    <!--    <
    script type="text/javascript" src="{path to resources}/js/jquery-1.7.1.min.js"></script>-->
    <!--    <script type="text/javascript" src="{path to resources}/js/jquery-ui-1.8.17.custom.min.js"></script>-->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" media="all" />
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath('Ext.ux', '../ux');

    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.ux.grid.TransformGrid'
    ]);
    Ext.onReady(function(){
        var productWidth = 500;

        var grid = Ext.create('Ext.ux.grid.TransformGrid', "productenTabel", {
             width: productWidth, 
             dock: 'top', 
             forceFit: true, 
             autoFill: true, 
             stripeRows: true    
        }); 
        var panel1 = Ext.create('Ext.panel.Panel', {         
             title: 'Uw producten:',         
             width: productWidth,         
             dockedItems: [ grid ],         
             renderTo: "panel1",         
             border: 10     
         }); 
    }); 
        </script>
    </head>
    <body>
    </head>
    <body>
    <div id="container">
      <div class="clear"></div>
      <div id="top">

        <div id="logo"><img src="{path to resources}/images/logo.jpg" alt="WebRTB" /></div>
        <div id="socials">
        </div>
      </div>
      <div class="clear"></div>
      <div id="header">
        <div id="image" class="slider"><img src="{path to resources}/images/img-header.jpg" alt="header" /></div>
        <div id="discription" class="slider">
          <h2>Klant controle paneel</h2>

          <p>Hier kunt u alles vinden. </p>
        </div>
      </div>
      <div class="clear"></div>
      <div id="nav">
        <ul>
          <li><a href="index.php?module=klant&pagina=home">Home</a></li>
          <li><a href="index.php?module=klant&pagina=gegevens">Klant gegevens</a></li>

          <li><a href="index.php?module=klant&pagina=producten">Producten</a></li>
          <li><a href="#">Facturen</a></li>
          <li><a href="#">Helpdesk</a></li>
          <li><a href="index.php?module=login&task=logout">Uitloggen</a></li>
        </ul>
      </div>
      <div class="clear"></div>

        <div id="content">
        <div id="left" class="column">
            <h1>Producten:</h1>
            <button id="create-grid" type="button">Create grid</button>
            <div id="panel1"></div>
            <table cellspacing="0" id="productenTabel">
                <thead>
                    <tr>

                        <th>Categorie</th>
                        <th>Termijn</th>
                        <th>omschrijving</th>
                        <th>btw</th>
                    </tr>
                </thead>
                <tbody>

                                            <tr><td>Domeinnamen</td><td>Jaarlijks</td><td>Domeinnaam .nl</td><td>19</td></tr>
                                                        <tr><td>Webhosting</td><td>Jaarlijks</td><td>Webhosting 500mb</td><td>19</td></tr>
                                        </tbody>
            </table>
            <div class="clear"></div>

        </div>
        <div id="right" class="column">
      <div id="nieuws">
        <h3>Storingen & Mededelingen</h3>
        <div class="item">
          <div class="title"><a href="#">Onderhoud e-mailserver Onsnet</a></div>
          <div class="image"><img src="{path to resources}/images/nieuws-img.jpg" alt="nieuws" /></div>

          <div class="date-time">14 juni 2011 10:19 AM</div>
        </div>
      </div>
    </div>
        <div class="clear"></div>
      </div>
    </div>
    <div id="klantDialog" title="Dialog Title"></div>
    </body>
    </html> 
    screen-FF.pngscreen-IE.jpg

Thread Participants: 2

Tags for this Thread