source: Dev/trunk/src/client/dojox/data/tests/QueryReadStore.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

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