Skip to main content

Advanced Server Integration with Ext.Direct

Advanced Server Integration with Data and Direct

Many Ext JS developers have yet to take advantage of Ext Direct to directly call server methods from the browser. How to leverage Ext.Direct's existing functionality to make accessing your server data easier while eliminating common boiler-plate code.

Ext JS – An Introduction Ext JS is a cross-browser JavaScript library for building rich internet applications. A Mature Framework. 3 Years Old. Current Version is 3.0RC1. Supports all major browsers. Is highly extensible. Includes lots of off-the-shelf components and widgets. Ext JS - Direct

Introducing Ext.Direct Ext.Direct is a new package in Ext JS 3.0 Ext.Direct is JSONRPC on steroids. It aims to: Bridge the gap between the client and the server. Solve a lot of headaches involved in creating RIA’s such as: Validation. Code Structure – Separation of Logic Trees. Streamline RIA development by: Enabling developers to write less code. Simplifying the Client to Server communication. Ext JS - Direct

Direct Providers Ext.Direct uses providers to handle communication between client and server. Providers facilitate in providing a seamless bridge between client and server. Ext JS - Direct

Direct Providers - JSON Provides a basis for JSON requests to the Direct Server. Good for extending. Can create other providers from this one. Ext JS - Direct

Direct Providers - Remoting It is an RPC bridge for method calling. Execute server side methods seamlessly with client-side stubs Ext JS - Direct

Direct Providers - Polling Bridges to a specific address on the server. Calls the address periodically. Timing is controlled with the interval configuration setting. Ext JS - Direct

Direct Server Specification - Router Must accept two different types of requests. JSON-Encoded Raw HTTP Post. Form Post. Must handle file uploads when using form posts. JSON-Encoded Raw HTTP Posts must be decoded. Must accept batched requests. Must dispatch batch responses. Responses must be JSON encoded. Ext JS - Direct

Direct Server Specification - Router - Response Types Event A JSON response containing two additional keys used to fire an event through the client. These keys are: name – The name of the event to fire. data – Data to be sent back with the response. This is available as one of the event handler’s arguments. This data is not decoded when it reaches the client. Do it manually if the data is JSON. Ext JS - Direct

Direct Server Specification - Router - Response Types RPC A JSON response containing an additional ‘result’ key. Ext JS - Direct

Direct Server Specification - Router - Response Types Exception A JSON response containing two additional keys. message – The error message. where – Details regarding where the error occurred. Exceptions should only be thrown if the server is in debug mode. Exceptions should be suppressed if the server is NOT in debug mode. Output should also be destroyed before the exception handler ends, resulting in an empty response. This can only enhance security. Ext JS - Direct

Direct Server Specification - Router – Other Response keys tid The transaction ID of the request that has just been processed. action The class/module of the request that has just been processed. method The method of the request that has just been processed. Ext JS - Direct

Direct Server Specification - Configuration - Metadata Some languages require less information because they are able to dynamically introspect methods and classes at runtime. Ext JS - Direct


References:
http://www.ibm.com/developerworks/library/wa-aj-streamline/
http://www.ibm.com/developerworks/library/wa-reverseajax2/

Slideshare:
http://www.slideboom.com/presentations/72194/Ext-JS---Direct
http://www.slideshare.net/senchainc/advanced-server-integration-with-data-and-direct
http://www.slideshare.net/stonegao/active-direct-talk-directly-with-activerecord-using-extdirect-and-rack-middleware-2328908
http://www.youtube.com/playlist?list=PL6F9Ss2VSSeJHggI0h57seqVec8xuWCA4

Popular posts from this blog

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &
Post a Comment
Read more

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to
8 comments
Read more

EXTJS - Way to get a reference to the viewport from any controller

An easy way to get a reference to the viewport from any controller Here's an easy way to get a reference to your viewport from any controller: Ext.application({ launch: function(){ this.viewport = Ext.ComponentQuery.query('viewport')[0]; this.centerRegion = this.viewport.down('[region=center]'); } }); then, inside say, a controller, you can call this: this.application.viewport to get a reference to the viewport.
4 comments
Read more