Skip to content

Instantly share code, notes, and snippets.

@slackorama

slackorama/test.html

Created May 8, 2009 20:59
Show Gist options
  • Save slackorama/109006 to your computer and use it in GitHub Desktop.
Save slackorama/109006 to your computer and use it in GitHub Desktop.
Download ZIP
create a grid inside of tab using the onShow event of the tab
Raw
test.html
<!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" xml:lang="en" lang="en">
<script src="/js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.0/dojo/resources/dojo.cs" type="text/css"
media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.0/dijit/themes/tundra/tundra.css"
type="text/css" media="screen" />
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.0/dojox/grid/resources/Grid.css"
type="text/css" media="screen" />
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.0/dojox/grid/resources/tundraGrid.css";
type="text/css" media="screen" />
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body class="tundra">
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" persist="true" tabStrip="true" style="width: 100%; height: 20em;">
<div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1">
Hi from Tab 1
Create grid as normal here....
</div>
<div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2">
<p>Hi from Tab 2</p>
<div id="grid2"></div>
</div>
<div id="tab3" dojoType="dijit.layout.ContentPane" title="Tab 3">
<p>Hi from Tab 3</p>
<div id="grid3"></div>
</div>
</div>
<script>
dojo.require('dijit.layout.TabContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dojo.data.ItemFileReadStore');
dojo.require("dojox.grid.DataGrid");
var jsonData ={ identifier: 'abbr',
label: 'name',
items: [
{ abbr:'ec', name:'Ecuador', capital:'Quito' },
{ abbr:'eg', name:'Egypt', capital:'Cairo' },
{ abbr:'sv', name:'El Salvador', capital:'San Salvador' },
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
{ abbr:'er', name:'Eritrea', capital:'Asmara' },
{ abbr:'ee', name:'Estonia', capital:'Tallinn' },
{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa' }
]};
var grids = {}; // to keep track of created grids.
// create a grid based on parameters passed to it..
function createGrid( id ) {
if (! grids[id] ) {
var layout = [[
new dojox.grid.cells.RowIndex({ width: 5 }),
{name: 'Country', field: 'name'},
{name: 'Capital', field: 'capital'}
]];
// or you can use a url back by a url....
var store = new dojo.data.ItemFileReadStore( { data: jsonData } );
console.log( "O hai!")
var grid = new dojox.grid.DataGrid( { store: store,
rowsPerPage: 200,
style: "height:500px; width:750px;",
structure: layout
}, dojo.byId("grid" + id ));
grid.startup();
grids[id] = grid;
console.log( grid );
}
}
dojo.addOnLoad( function() {
// use dojo.partial so we can re-use function and pass distinct values with onShow
dojo.connect( dijit.byId("tab2"),"onShow", dojo.partial( createGrid, "2") );
dojo.connect( dijit.byId("tab3"),"onShow", dojo.partial( createGrid, "3") );
});
</script>
</body>
</html>
@questor00
Copy link

Excellent, simple, clear, verifiable and effective, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment