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

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <style type="text/css">
   6                 @import "../../../dojo/resources/dojo.css";
   7                 @import "../../../dijit/themes/tundra/tundra.css";
   8                 @import "../../../dijit/themes/tundra/tundra_rtl.css";
   9         </style>
  10
  11         <title>Query read store</title>
  12
  13         <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
  14         <script type="text/javascript" src="../../../dojo/data/util/simpleFetch.js"></script>
  15         <script type="text/javascript" src="../../../dojox/data/QueryReadStore.js"></script>
  16         <script type="text/javascript">
  17                 dojo.require("dijit.form.ComboBox");
  18                 dojo.require("dijit.form.FilteringSelect");
  19                 dojo.require("dojox.data.QueryReadStore");
  20
  21                 dojo.provide("ComboBoxReadStore");
  22                 dojo.declare("ComboBoxReadStore", dojox.data.QueryReadStore, {
  23                         fetch:function(request) {
  24                                 // Copy the GET/POST parameters (request.query) we need into
  25                                 // request.serverQuery. We actually want to have
  26                                 // the query added to the URL like so:  /url.php?q=<searchString>
  27                                 // The data in "queryOptions" are useless for our backend,
  28                                 // we ignore them, they are not sent to the server.
  29                                 // The combobox puts this into the request-parameter:
  30                                 //      {
  31                                 //          query: {name:<searchString>},
  32                                 //          queryOptions: {ignoreCase:true, deep:true},
  33                                 //          ...
  34                                 //      }
  35                                 // We generate request.serverQuery to be this, since those values will
  36                                 // be sent to the server.
  37                                 //      {
  38                                 //          q:<searchString>}
  39                                 //      }
  40                                 // This results in a xhr request to the following URL (in case of GET):
  41                                 //      /url.php?q=<searchString>
  42                                 //
  43
  44                                 request.serverQuery = {q:request.query.name};
  45                                 // If we wanted to send the queryOptions too, we could simply do:
  46                                 //  request.serverQuery = {
  47                                 //          q:request.query.name,
  48                                 //          ignoreCase:request.queryOptions.ignoreCase,
  49                                 //          deep:request.queryOptions.deep
  50                                 //      };
  51                                 // This would then result in this URL, for ignoreCase and deep
  52                                 // assumed to be true:
  53                                 //      /url.php?q=<searchString>&ignoreCase=true&deep=true
  54                                 return this.inherited("fetch", arguments);
  55                         }
  56                 });
  57
  58                 dojo.provide("ServerPagingReadStore");
  59                 dojo.declare("ServerPagingReadStore", dojox.data.QueryReadStore, {
  60                         fetch:function(request) {
  61                                 request.serverQuery = {q:request.query.name, start:request.start, count:request.count};
  62                                 return this.inherited("fetch", arguments);
  63                         }
  64                 });
  65
  66                 var testStore = new dojox.data.QueryReadStore({url:'stores/QueryReadStore.php'});;
  67                 function doSearch() {
  68                         var queryOptions = {};
  69                         if (dojo.byId("ignoreCaseEnabled").checked) {
  70                                 queryOptions.ignoreCase = dojo.query("#fetchForm")[0].ignoreCase[0].checked;
  71                         }
  72                         if (dojo.byId("deepEnabled").checked) {
  73                                 queryOptions.deep = dojo.query("#fetchForm")[0].deep[0].checked;
  74                         }
  75
  76                         var query = {};
  77                         query.q = dojo.byId("searchText").value;
  78                         var request = {query:query, queryOptions:queryOptions};
  79                         request.start = parseInt(dojo.query("#fetchForm")[0].pagingStart.value);
  80                         request.count = parseInt(dojo.query("#fetchForm")[0].pagingCount.value);
  81
  82                         var requestMethod = "get";
  83                         var radioButtons = dojo.query("#fetchForm")[0].requestMethod;
  84                         for (var i=0; i<radioButtons.length; i++){
  85                                 if (radioButtons[i].checked) {
  86                                         requestMethod = radioButtons[i].value;
  87                                 }
  88                         }
  89
  90                         testStore.requestMethod = requestMethod;
  91                         testStore.doClientPaging = dojo.query("#fetchForm")[0].doClientPaging.checked;
  92
  93                         if (!testStore.doClientPaging) {
  94                                 // We have to fill the serverQuery, since we also want to send the
  95                                 // paging data "start" and "count" along with what is in query.
  96                                 request.serverQuery = {q:request.query.q, start:request.start, count:request.count};
  97                         }
  98
  99                         request.onComplete = function (items) {
 100                                 var s = "number of items: "+items.length+"<br /><br />";
 101                                 for (var i=0; i<items.length; i++) {
 102                                         s += i+": name: '"+testStore.getValue(items[i], "name")+"'<br />";
 103                                 }
 104                                 //s += "<pre>"+dojo.toJson(items)+"</pre>";
 105                                 dojo.byId("fetchOutput").innerHTML = s;
 106                         };
 107
 108                         console.log(dojo.toJson(request));
 109                         testStore.fetch(request);
 110                 }
 111         </script>
 112 </head>
 113 <body class="tundra" style="margin:20px;">
 114         <div dojoType="ComboBoxReadStore" jsId="store" url="stores/QueryReadStore.php" requestMethod="get"></div>
 115         This is a ComboBox: <input id="cb" dojoType="dijit.form.ComboBox" store="store" pageSize="5" />
 116         <br /><br /><hr />
 117
 118         This is a FilteringSelect: <input id="fs" dojoType="dijit.form.FilteringSelect" store="store" pageSize="5" />
 119         <br />
 120         <form id="filteringSelectForm">
 121                 <input id="selectById" value="0" size="3" />
 122                 <input type="button" value="set by id" onclick="dijit.byId('fs').setValue(dojo.byId('selectById').value)" />
 123         </form>
 124
 125         <br /><br /><hr />
 126
 127         This ComboBox uses a customized QueryReadStore, it prepares the query-string for the URL that
 128         way that the paging parameters "start" and "count" are also send.<br />
 129         <div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get"></div>
 130         <input dojoType="dijit.form.ComboBox" store="serverPagingStore" pageSize="5" />
 131         <br />
 132         <a href="javascript://" onclick="var d = dojo.byId('pagingCode'); d.style.display= d.style.display=='none'?'block':'none';">Click here to  see the code!</a>
 133 <div id="pagingCode" style="display:none;">
 134         The HTML might look like this.
 135         <pre>
 136 &lt;div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get"&gt;&lt;/div&gt;
 137 &lt;input dojoType="dijit.form.ComboBox" store="serverPagingStore" pageSize="10" /&gt;
 138         </pre>
 139         <pre>
 140                 dojo.require("dojox.data.QueryReadStore");
 141                 dojo.provide("ServerPagingReadStore");
 142                 dojo.declare("ServerPagingReadStore", dojox.data.QueryReadStore, {
 143                         fetch:function(request) {
 144                                 request.serverQuery = {q:request.query.name, start:request.start, count:request.count};
 145                                 return this.inherited("fetch", arguments);
 146                         }
 147                 });
 148         </pre>
 149 </div>
 150         <br /><br />
 151
 152         <hr />
 153
 154         <style>
 155              fieldset {
 156                  border:1px solid black;
 157                  display:inline;
 158                  padding:10px;
 159              }
 160              div.disabled {
 161                  opacity:0.1;
 162              }
 163         </style>
 164         <form id="fetchForm">
 165                 <fieldset title="requestMethod">
 166                     <legend>requestMethod</legend>
 167                         get <input type="radio" value="get" checked="checked" name="requestMethod" />
 168                         post <input type="radio" value="post" name="requestMethod" />
 169                 </fieldset>
 170
 171                 <fieldset title="queryOptions">
 172                         <legend>queryOptions</legend>
 173
 174                         <fieldset id="ignoreCaseFieldset">
 175                                 <legend><input type="checkbox" id="ignoreCaseEnabled" /> ignoreCase</legend>
 176                                 <div class="disabled">
 177                                         true <input type="radio" value="0" checked="checked" name="ignoreCase" />
 178                                         false <input type="radio" value="1" name="ignoreCase" />
 179                                 </div>
 180                         </fieldset>
 181                         <fieldset id="deepFieldset">
 182                                 <legend><input type="checkbox" id="deepEnabled" /> deep</legend>
 183                                 <div class="disabled">
 184                                         true <input type="radio" value="0" name="deep" />
 185                                         false <input type="radio" value="1" name="deep" checked="checked" />
 186                                 </div>
 187                         </fieldset>
 188                 </fieldset>
 189                 <fieldset title="paging">
 190                         <legend>paging</legend>
 191                         start: <input id="pagingStart" value="0" size="3" />
 192                         count: <input id="pagingCount" value="10" size="3"  />
 193                         <br /><br />
 194                         do client paging: <input id="doClientPaging" type="checkbox" checked="checked" />
 195                 </fieldset>
 196                 <script>
 197                     var fieldsets = ["ignoreCaseFieldset", "deepFieldset"];
 198                     for (var i=0; i<fieldsets.length; i++) {
 199                         dojo.connect(dojo.byId(fieldsets[i]), "onchange", toggleFieldset);
 200                     }
 201                     function toggleFieldset(el) {
 202                         var divs = dojo.query("div", el.target.parentNode.parentNode);
 203                         if (divs.length) {
 204                                         var div = divs[0];
 205                                         if (el.target.checked) {
 206                                                 dojo.removeClass(div, "disabled");
 207                                         } else {
 208                                                 dojo.addClass(div, "disabled");
 209                                         }
 210                                 }
 211                     }
 212                 </script>
 213
 214                 <br /><br />
 215                 <input id="searchText" type="text" value="a">
 216                 <input id="searchButton" type="button" value="store.fetch()" onclick="doSearch()" />
 217         </form>
 218         <div id="fetchOutput" style="background-color:#FFDDDD; margin-top:1em; float:left;"></div>
 219 </body>
 220 </html>