PDA

View Full Version : 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:

http://www.sencha.com/forum/attachment.php?attachmentid=31598&stc=1&d=1328886367



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 }); });



<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.0/examples/grid/transform-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:

<!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.

31670

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:


<!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!


<!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>

3168931690