diff options
author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
---|---|---|
committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/data/demos/demo_QueryReadStore_grid.html | |
parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/data/demos/demo_QueryReadStore_grid.html')
-rw-r--r-- | includes/js/dojox/data/demos/demo_QueryReadStore_grid.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/includes/js/dojox/data/demos/demo_QueryReadStore_grid.html b/includes/js/dojox/data/demos/demo_QueryReadStore_grid.html new file mode 100644 index 0000000..3f7db7e --- /dev/null +++ b/includes/js/dojox/data/demos/demo_QueryReadStore_grid.html @@ -0,0 +1,129 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox QueryReadStore+grid Demo</title> + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + /* BE SURE TO NEVER FORGET IMPORTING THE GRID's CSS, or you will wonder why the hell the grid looks so strange (or even think that it doesnt work) */ + @import "../../../dojox/grid/_grid/tundraGrid.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> +</head> +<body class="tundra"> + + <h1 class="testTitle">Dojox QueryReadStore + Grid demo - paging, sortable and filterable all server-side</h1> + + <h2>The grid is in HTML, store, model, etc. are JS, sorting is added by extending the model class</h2> + <b>Capabilities:</b> load data from server, show data, paging (30 rows at a time), sort, filter<br /> + You can see that data are loaded upon demand by scrolling down in the grid below line #30, + open FireBug and you see a server request being issued, to retreive another 30 rows/items.<br /> + <br /><br /> + <input type="text" onkeyup="doSearch(this)" /> + <div id="grid1" dojoType="dojox.Grid" style="height:300px; width:800px;"></div> + + <h2>The store and grid are "generated" and connected in HTML, filtering is done via JS</h2> + This store is by default sorted descending by name (not as the one above, which is ascending). + <div dojoType="dojox.data.QueryReadStore" + jsId="store2" + url="../tests/stores/QueryReadStore.php" + requestMethod="post"></div> + <div dojoType="dojox.grid.data.DojoData" + jsId="model2" + store="store2" + sortFields="[{attribute: 'capital', descending: true}]" + rowsPerPage="30"></div> + <div dojoType="dojox.Grid" id="grid2" + model="model2" + structure="gridLayout" + style="height:300px; width:800px;"></div> + + <script type="text/javascript"> + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("dojox.grid.Grid"); + dojo.require("dojox.grid._data.model"); // dojox.grid.data.DojoData is in there + dojo.require("dojox.data.QueryReadStore"); + var gridLayout = [ + { + cells: [[ + { + name: "row #", + width:5, + styles: "text-align:right;", + get:function(inRowIndex) { return inRowIndex+1;} // this auto generates a row num + } + ,{ + name: "id", + field: "id", + styles: "text-align:right;", + width:5 + } + ,{ + name: "Name", + field: "name", + width:20 + //formatter: rs.chunk.adminUser.grid.formatUser + } + ,{ + name: "Capital", + field: "capital", + width:20 + //formatter: rs.chunk.adminUser.grid.formatUser + } + ,{ + name: "Label", + width:20, + //styles: "text-align:right;", + field: "label" + //formatter: phpr.grid.formatDate + } + ,{ + name: "Abbrev.", + width:5, + //styles: "text-align:right;", + field: "abbreviation" + //formatter: phpr.grid.formatDate + } + ]] + } + ]; + // Connect the model and store AFTER the page is loaded, since we can only access + // the widget then, since it will be created just before dojo.addOnLoad() is called. + var grid = null; + dojo.addOnLoad(function() { + // Instanciate the store, pass it to the model, connect them to the grid and add the layout ... just some hand work :-) + //var store = new dojox.data.QueryReadStore({url:"../tests/stores/QueryReadStore.php", requestMethod:"post", doClientPaging:false}); + var store = new dojox.data.QueryReadStore({ + url:"../tests/stores/QueryReadStore.php", + requestMethod:"post" + }); + var model = new dojox.grid.data.DojoData(null, null, { + store:store, + rowsPerPage:30, + sortFields:[{attribute: 'name', descending: false}] + }); + grid = dijit.byId("grid1"); + grid.setModel(model); + grid.setStructure(gridLayout); + grid2 = dijit.byId("grid2"); + }); + + var lastSearchValue = ""; + function doSearch(el) { + if (el.value!=lastSearchValue) { + grid.model.query = {name:el.value}; + lastSearchValue = el.value; + grid.model.requestRows(); + + // Filter the grid2 too. + grid2.model.query = {name:el.value}; + grid2.model.requestRows(); + } + } + </script> + + +</body> +</html> |