TransformGrid html table

**WebRTB** · 10 Feb 2012 7:04 AM

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>

The sencha example: http://dev.sencha.com/deploy/ext-4.0...sform-dom.html

Thanks.

**mitchellsimoens** · 10 Feb 2012 7:23 AM

Check the DOM to see if the width is just a little to wide.

**WebRTB** · 10 Feb 2012 7:32 AM

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.

**Romick** · 13 Feb 2012 5:11 AM

Make as answered thread Please!

**WebRTB** · 13 Feb 2012 6:56 AM

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

So no, i will not:

Make as answered thread

**Romick** · 13 Feb 2012 7:44 AM

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.

**WebRTB** · 13 Feb 2012 8:17 AM

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.

**Romick** · 13 Feb 2012 8:29 AM

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.

**WebRTB** · 13 Feb 2012 9:00 AM

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.

**Romick** · 14 Feb 2012 2:48 AM

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.png screen-IE.jpg

TransformGrid html table

Thread Tools

Search Thread

Display

Unanswered: TransformGrid html table

Unanswered: TransformGrid html table

already did that

already did that

Make as answered thread

Make as answered thread

Width

Width

Still working :)

Still working :)

Tags for this Thread