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
    36,789
    Answers
    3465
    Vote Rating
    833
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi