diff options
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, 0 insertions, 129 deletions
diff --git a/includes/js/dojox/data/demos/demo_QueryReadStore_grid.html b/includes/js/dojox/data/demos/demo_QueryReadStore_grid.html deleted file mode 100644 index 3f7db7e..0000000 --- a/includes/js/dojox/data/demos/demo_QueryReadStore_grid.html +++ /dev/null @@ -1,129 +0,0 @@ -<!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> |