PDA

View Full Version : convert html table to a nice looking grid



koolfreak
12 Mar 2012, 10:49 PM
Hi,

How to convert a existing table to Ext 4 grid?

cheers.
thanks a lot.

chramer
12 Mar 2012, 10:59 PM
http://docs.sencha.com/ext-js/4-0/#!/example/grid/transform-dom.html

koolfreak
13 Mar 2012, 12:19 AM
chramer,

thanks...but i can't get this to work...any im missing with?




<!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>Border Layout Example</title>
<link rel="stylesheet" type="text/css" href="border-layoutextjs_files/ext-all.css">
<style type="text/css">
#the-table {
border:1px solid #bbb;
border-collapse:collapse;
}
#the-table td,#the-table th {
border:1px solid #ccc;
border-collapse:collapse;
padding:5px;
}
</style>
<script type="text/javascript" src="border-layoutextjs_files/bootstrap.js"></script>
<script type="text/javascript" src="border-layoutextjs_files/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() {
alert('here')
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true;

// create the grid
var grid = Ext.create('Ext.ux.grid.TransformGrid', "the-table", {
stripeRows: true,
height: 130
});
grid.render();
});

});
</script>
</head>
<body >
<button id="create-grid" type="button">Create grid</button>
<table cellspacing="0" id="the-table">
<thead>
<tr style="background:#eeeeee;">
<th>Name</th>
<th style="width: 40px;">Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Barney Rubble</td>
<td>32</td>
<td>Male</td>
</tr>
<tr>
<td>Fred Flintstone</td>
<td>33</td>
<td>Male</td>
</tr>
<tr>
<td>Betty Rubble</td>
<td>32</td>
<td>Female</td>
</tr>
<tr>
<td>Pebbles</td>
<td>1</td>
<td>Female</td>
</tr>
<tr>
<td>Bamm Bamm</td>
<td>2</td>
<td>Male</td>
</tr>
</tbody>
</table>


</body></html>

chramer
13 Mar 2012, 12:36 AM
change this (ext407 - extjs folder):

<!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>Border Layout Example</title>
<link rel="stylesheet" type="text/css" href="ext407/resources/css/ext-all.css">
<style type="text/css">
#the-table {
border:1px solid #bbb;
border-collapse:collapse;
}
#the-table td,#the-table th {
border:1px solid #ccc;
border-collapse:collapse;
padding:5px;
}
</style>
<script type="text/javascript" src="ext407/bootstrap.js"></script>
<script type="text/javascript" src="ext407/ext-all.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext407/examples/ux');
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.ux.grid.TransformGrid'
]);
Ext.onReady(function() {
alert('here')
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true;

// create the grid
var grid = Ext.create('Ext.ux.grid.TransformGrid', "the-table", {
stripeRows: true,
height: 130
});
grid.render();
});

});
</script>
</head>
<body >
<button id="create-grid" type="button">Create grid</button>
<table cellspacing="0" id="the-table">
<thead>
<tr style="background:#eeeeee;">
<th>Name</th>
<th style="width: 40px;">Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Barney Rubble</td>
<td>32</td>
<td>Male</td>
</tr>
<tr>
<td>Fred Flintstone</td>
<td>33</td>
<td>Male</td>
</tr>
<tr>
<td>Betty Rubble</td>
<td>32</td>
<td>Female</td>
</tr>
<tr>
<td>Pebbles</td>
<td>1</td>
<td>Female</td>
</tr>
<tr>
<td>Bamm Bamm</td>
<td>2</td>
<td>Male</td>
</tr>
</tbody>
</table>


</body></html>

koolfreak
13 Mar 2012, 12:55 AM
chramer,

Thanks.

anyway, pleas help if could find solution to this problem: http://www.sencha.com/forum/showthread.php?186949-Resize-dockitems

cheers.

koolfreak
13 Mar 2012, 12:59 AM
And, how can get the selected row id?

thanks again.
cheers.

chramer
13 Mar 2012, 1:03 AM
grid.getSelectionModel().getSelection()[0].getId()

koolfreak
13 Mar 2012, 1:21 AM
thanks...how can i set an ID for that example of table?

koolfreak
13 Mar 2012, 1:44 AM
grid.getSelectionModel().getSelection()[0].getId()

i got "undefined" when i try to get the Id. any idea how i can achieve this?

cheers :)

chramer
13 Mar 2012, 2:10 AM
if you didn't set an 'idProperty' for the model it won't work...
you can also get it like this :
grid.getSelectionModel().getSelection()[0].get('fieldname')

koolfreak
13 Mar 2012, 6:38 PM
if you didn't set an 'idProperty' for the model it won't work...
you can also get it like this :
grid.getSelectionModel().getSelection()[0].get('fieldname')



reader: {
record: 'tbody tr',
type: 'xml',
idProperty: 'tcol-0'
}



grid.getSelectionModel().getSelection()[0].get('tcol-0')

works fine...just to hide the ID though in the table :)

pidugusundeep
26 Feb 2018, 4:15 AM
how do i get the reverse of it like grid to a html table ?