git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/data/demos/demo_QueryReadStore_grid.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4         <title>Dojox QueryReadStore+grid Demo</title>
   5         <style type="text/css">
   6                 @import "../../../dijit/themes/tundra/tundra.css";
   7                 @import "../../../dojo/resources/dojo.css";
   8                 @import "../../../dijit/tests/css/dijitTests.css";
   9                 /* 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) */
  10                 @import "../../../dojox/grid/_grid/tundraGrid.css";
  11         </style>
  12
  13         <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
  14 </head>
  15 <body class="tundra">
  16
  17         <h1 class="testTitle">Dojox QueryReadStore + Grid demo - paging, sortable and filterable all server-side</h1>
  18
  19         <h2>The grid is in HTML, store, model, etc. are JS, sorting is added by extending the model class</h2>
  20         <b>Capabilities:</b> load data from server, show data, paging (30 rows at a time), sort, filter<br />
  21         You can see that data are loaded upon demand by scrolling down in the grid below line #30,
  22         open FireBug and you see a server request being issued, to retreive another 30 rows/items.<br />
  23         <br /><br />
  24         <input type="text" onkeyup="doSearch(this)" />
  25         <div id="grid1" dojoType="dojox.Grid" style="height:300px; width:800px;"></div>
  26
  27         <h2>The store and grid are "generated" and connected in HTML, filtering is done via JS</h2>
  28         This store is by default sorted descending by name (not as the one above, which is ascending).
  29         <div dojoType="dojox.data.QueryReadStore"
  30                 jsId="store2"
  31                 url="../tests/stores/QueryReadStore.php"
  32                 requestMethod="post"></div>
  33         <div dojoType="dojox.grid.data.DojoData"
  34                 jsId="model2"
  35                 store="store2"
  36                 sortFields="[{attribute: 'capital', descending: true}]"
  37                 rowsPerPage="30"></div>
  38         <div dojoType="dojox.Grid" id="grid2"
  39                 model="model2"
  40                 structure="gridLayout"
  41                 style="height:300px; width:800px;"></div>
  42
  43         <script type="text/javascript">
  44                 dojo.require("dojo.parser"); // scan page for widgets and instantiate them
  45                 dojo.require("dojox.grid.Grid");
  46                 dojo.require("dojox.grid._data.model"); // dojox.grid.data.DojoData is in there
  47                 dojo.require("dojox.data.QueryReadStore");
  48                 var gridLayout = [
  49                         {
  50                                 cells: [[
  51                                         {
  52                                                 name: "row #",
  53                                                 width:5,
  54                                                 styles: "text-align:right;",
  55                                                 get:function(inRowIndex) { return inRowIndex+1;} // this auto generates a row num
  56                                         }
  57                                         ,{
  58                                                 name: "id",
  59                                                 field: "id",
  60                                                 styles: "text-align:right;",
  61                                                 width:5
  62                                         }
  63                                         ,{
  64                                                 name: "Name",
  65                                                 field: "name",
  66                                                 width:20
  67                                                 //formatter: rs.chunk.adminUser.grid.formatUser
  68                                         }
  69                                         ,{
  70                                                 name: "Capital",
  71                                                 field: "capital",
  72                                                 width:20
  73                                                 //formatter: rs.chunk.adminUser.grid.formatUser
  74                                         }
  75                                         ,{
  76                                                 name: "Label",
  77                                                 width:20,
  78                                                 //styles: "text-align:right;",
  79                                                 field: "label"
  80                                                 //formatter: phpr.grid.formatDate
  81                                         }
  82                                         ,{
  83                                                 name: "Abbrev.",
  84                                                 width:5,
  85                                                 //styles: "text-align:right;",
  86                                                 field: "abbreviation"
  87                                                 //formatter: phpr.grid.formatDate
  88                                         }
  89                                 ]]
  90                         }
  91                 ];
  92                 // Connect the model and store AFTER the page is loaded, since we can only access
  93                 // the widget then, since it will be created just before dojo.addOnLoad() is called.
  94                 var grid = null;
  95                 dojo.addOnLoad(function() {
  96                         // Instanciate the store, pass it to the model, connect them to the grid and add the layout ... just some hand work :-)
  97                         //var store = new dojox.data.QueryReadStore({url:"../tests/stores/QueryReadStore.php", requestMethod:"post", doClientPaging:false});
  98                         var store = new dojox.data.QueryReadStore({
  99                                 url:"../tests/stores/QueryReadStore.php",
 100                                 requestMethod:"post"
 101                         });
 102                         var model = new dojox.grid.data.DojoData(null, null, {
 103                                 store:store,
 104                                 rowsPerPage:30,
 105                                 sortFields:[{attribute: 'name', descending: false}]
 106                         });
 107                         grid = dijit.byId("grid1");
 108                         grid.setModel(model);
 109                         grid.setStructure(gridLayout);
 110                         grid2 = dijit.byId("grid2");
 111                 });
 112
 113                 var lastSearchValue = "";
 114                 function doSearch(el) {
 115                         if (el.value!=lastSearchValue) {
 116                                 grid.model.query = {name:el.value};
 117                                 lastSearchValue = el.value;
 118                                 grid.model.requestRows();
 119
 120                                 // Filter the grid2 too.
 121                                 grid2.model.query = {name:el.value};
 122                                 grid2.model.requestRows();
 123                         }
 124                 }
 125         </script>
 126
 127
 128 </body>
 129 </html>