1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.Direct"></div>/**
* @class Ext.Direct
* @extends Ext.util.Observable
* <p><b><u>Overview</u></b></p>
*
* <p>Ext.Direct aims to streamline communication between the client and server
* by providing a single interface that reduces the amount of common code
* typically required to validate data and handle returned data packets
* (reading data, error conditions, etc).</p>
*
* <p>The Ext.direct namespace includes several classes for a closer integration
* with the server-side. The Ext.data namespace also includes classes for working
* with Ext.data.Stores which are backed by data from an Ext.Direct method.</p>
*
* <p><b><u>Specification</u></b></p>
*
* <p>For additional information consult the
* <a href="http://extjs.com/products/extjs/direct.php">Ext.Direct Specification</a>.</p>
*
* <p><b><u>Providers</u></b></p>
*
* <p>Ext.Direct uses a provider architecture, where one or more providers are
* used to transport data to and from the server. There are several providers
* that exist in the core at the moment:</p><div class="mdetail-params"><ul>
*
* <li>{@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations</li>
* <li>{@link Ext.direct.PollingProvider PollingProvider} for repeated requests</li>
* <li>{@link Ext.direct.RemotingProvider RemotingProvider} exposes server side
* on the client.</li>
* </ul></div>
*
* <p>A provider does not need to be invoked directly, providers are added via
* {@link Ext.Direct}.{@link Ext.Direct#add add}.</p>
*
* <p><b><u>Router</u></b></p>
*
* <p>Ext.Direct utilizes a "router" on the server to direct requests from the client
* to the appropriate server-side method. Because the Ext.Direct API is completely
* platform-agnostic, you could completely swap out a Java based server solution
* and replace it with one that uses C# without changing the client side JavaScript
* at all.</p>
*
* <p><b><u>Server side events</u></b></p>
*
* <p>Custom events from the server may be handled by the client by adding
* listeners, for example:</p>
* <pre><code>
{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
// add a handler for a 'message' event sent by the server
Ext.Direct.on('message', function(e){
out.append(String.format('<p><i>{0}</i></p>', e.data));
out.el.scrollTo('t', 100000, true);
});
* </code></pre>
* @singleton
*/
Ext.Direct = Ext.extend(Ext.util.Observable, {
<div id="prop-Ext.Direct-eventTypes"></div>/**
* Each event type implements a getData() method. The default event types are:
* <div class="mdetail-params"><ul>
* <li><b><tt>event</tt></b> : Ext.Direct.Event</li>
* <li><b><tt>exception</tt></b> : Ext.Direct.ExceptionEvent</li>
* <li><b><tt>rpc</tt></b> : Ext.Direct.RemotingEvent</li>
* </ul></div>
* @property eventTypes
* @type Object
*/
<div id="prop-Ext.Direct-exceptions"></div>/**
* Four types of possible exceptions which can occur:
* <div class="mdetail-params"><ul>
* <li><b><tt>Ext.Direct.exceptions.TRANSPORT</tt></b> : 'xhr'</li>
* <li><b><tt>Ext.Direct.exceptions.PARSE</tt></b> : 'parse'</li>
* <li><b><tt>Ext.Direct.exceptions.LOGIN</tt></b> : 'login'</li>
* <li><b><tt>Ext.Direct.exceptions.SERVER</tt></b> : 'exception'</li>
* </ul></div>
* @property exceptions
* @type Object
*/
exceptions: {
TRANSPORT: 'xhr',
PARSE: 'parse',
LOGIN: 'login',
SERVER: 'exception'
},
// private
constructor: function(){
this.addEvents(
<div id="event-Ext.Direct-event"></div>/**
* @event event
* Fires after an event.
* @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
* @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
*/
'event',
<div id="event-Ext.Direct-exception"></div>/**
* @event exception
* Fires after an event exception.
* @param {event} e The {@link Ext.Direct#eventTypes Ext.Direct.Event type} that occurred.
*/
'exception'
);
this.transactions = {};
this.providers = {};
},
<div id="method-Ext.Direct-addProvider"></div>/**
* Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods.
* If the provider is not already connected, it will auto-connect.
* <pre><code>
var pollProv = new Ext.direct.PollingProvider({
url: 'php/poll2.php'
});
Ext.Direct.addProvider(
{
"type":"remoting", // create a {@link Ext.direct.RemotingProvider}
"url":"php\/router.php", // url to connect to the Ext.Direct server-side router.
"actions":{ // each property within the actions object represents a Class
"TestAction":[ // array of methods within each server side Class
{
"name":"doEcho", // name of method
"len":1
},{
"name":"multiply",
"len":1
},{
"name":"doForm",
"formHandler":true, // handle form on server with Ext.Direct.Transaction
"len":1
}]
},
"namespace":"myApplication",// namespace to create the Remoting Provider in
},{
type: 'polling', // create a {@link Ext.direct.PollingProvider}
url: 'php/poll.php'
},
pollProv // reference to previously created instance
);
* </code></pre>
* @param {Object/Array} provider Accepts either an Array of Provider descriptions (an instance
* or config object for a Provider) or any number of Provider descriptions as arguments. Each
* Provider description instructs Ext.Direct how to create client-side stub methods.
*/
addProvider : function(provider){
var a = arguments;
if(a.length > 1){
for(var i = 0, len = a.length; i < len; i++){
this.addProvider(a[i]);
}
return;
}
// if provider has not already been instantiated
if(!provider.events){
provider = new Ext.Direct.PROVIDERS[provider.type](provider);
}
provider.id = provider.id || Ext.id();
this.providers[provider.id] = provider;
provider.on('data', this.onProviderData, this);
provider.on('exception', this.onProviderException, this);
if(!provider.isConnected()){
provider.connect();
}
return provider;
},
<div id="method-Ext.Direct-getProvider"></div>/**
* Retrieve a {@link Ext.direct.Provider provider} by the
* <b><tt>{@link Ext.direct.Provider#id id}</tt></b> specified when the provider is
* {@link #addProvider added}.
* @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider}
*/
getProvider : function(id){
return this.providers[id];
},
removeProvider : function(id){
var provider = id.id ? id : this.providers[id];
provider.un('data', this.onProviderData, this);
provider.un('exception', this.onProviderException, this);
delete this.providers[provider.id];
return provider;
},
addTransaction: function(t){
this.transactions[t.tid] = t;
return t;
},
removeTransaction: function(t){
delete this.transactions[t.tid || t];
return t;
},
getTransaction: function(tid){
return this.transactions[tid.tid || tid];
},
onProviderData : function(provider, e){
if(Ext.isArray(e)){
for(var i = 0, len = e.length; i < len; i++){
this.onProviderData(provider, e[i]);
}
return;
}
if(e.name && e.name != 'event' && e.name != 'exception'){
this.fireEvent(e.name, e);
}else if(e.type == 'exception'){
this.fireEvent('exception', e);
}
this.fireEvent('event', e, provider);
},
createEvent : function(response, extraProps){
return new Ext.Direct.eventTypes[response.type](Ext.apply(response, extraProps));
}
});
// overwrite impl. with static instance
Ext.Direct = new Ext.Direct();
Ext.Direct.TID = 1;
Ext.Direct.PROVIDERS = {};</pre>
</body>
</html>
|
