Gnanasuriyan

Ajax proxy in Ext JS is most widely used one for reading and writing information from/to web server. The configuration of ajax proxy is applied either in store or model class and it is based on the following criteria.   1. We need to define our proxy configuration in model class whenever we need to reuse the same model in various stores with same proxy configuration.   2. We need to define our proxy configuration in store class whenever we need to reuse the same model class in various stores with various proxy configuration. Let's see an example for Ajax proxy. Here I am getting JSON data from web server and displaying those data by using grid component. User.js - Model Ext.define('MyApp.model.User',{ extend : 'Ext.data.Model', fields : [{ name : 'id', type : 'int' }, { name : 'userName', type : 'String' }, { name : 'email', type : 'String' }] }); User.js - Store Ext.define(...

The form panel ( Ext.form.Panel ) class in Ext JS is used for creating form. The default layout of the form panel is anchor. It has lot options for customization, in that one of the feature is menu bar. The following properties are used for including menu into form panel.    1. tbar - Top Bar   2. bbar - Bottom Bar   3. lbar - Left Bar   4. rbar - Right Bar Let's see an example for creating form panel with menu bar. Ext.define('MyApp.view.PanelWithMenuBar', { extend : 'Ext.form.Panel', alias : 'widget.panelwithtoolbar', layout : 'anchor', height : 400, width : 400, title : 'Form Panel with Menubar', url : '/saveform', tbar : [{ text : 'Top-Left Menu', menu : [{ text : 'User', menuKey : 'top-left-create-user' }, { text : 'Document', menuKey : 'top-left-create-document' }, { text : 'Profile', menuKey : 'top-left-create-profile' ...

The web storage concepts in HTML5 are really cool and used for store/read data to/from browser memory. There are two types of web storage concepts available in HTML5.     1. Session storage - The data only availble for particular session.     2. Local storage - Long term storage and data is shared by various browser and tabs The Ext JS gives lot of flexibility for using web storage concepts and it do lot of operations internally and reduced the developer works. The most well known issues is, the HTML5 web storage concepts only allow to store a value like string, int, float and boolean and it don't allow to store a complex objects like JSON. But Ext JS directly allows to store/read JSON data to/from web storage. Internally it performs serialize and deserialize operation for store/read JSON data to/from web storage. The proxies in Ext JS are used for performing above operation. There are three kind of client side proxies  availa...

The Ext.container.Viewport is used for creating general web page and region property is used for splitting web page into different parts. Ext.container.Viewport is a specialized container represents the viewable area of the application (the browser area). It render itself to the document body, there is no need for providing renderTo property and it automatically sizes itself to size of the browser viewport. The viewport also re-size the child elements based on view area(based on browser width and height). The default layout of the viewport is border layout and we can customize this property according to our requirements. The viewport does not provide any scrolling. If necessary, the child elements(generally panels) within viewport needs to provide a scroll feature by using autoScroll property. See the below example for better understanding. This is Home.js file placed into app/view folder. Ext.define('MyApp.view.Home', { extend : 'Ext.container.Viewport...

 In Sencha Touch, we can include our application start up logic into following places, this is depending on our application situation.  1. Application default launch function. This launch function is triggered when all the dependencies are loaded successfully.  2. Controller init function.  3. Controller launch function.  4. Profile launch function.  Now I am going to include some code into all the places. Let's see what will happen.  I have created simple controller called "TestController" as shown in figure and I simply printed different message in both init and launch function.  I have created the simple profile called "TestProfile" and I simply printed message in launch function. By default this profile is active.  Now I am going to include my controller and profile into app.js and I am going to simply print different message in application launch function. This is my app.js code.  Ok let's create an in...

 I hope you have visited my part1 of my tutorial . Let’s see the steps for integrating hibernate framework into Spring MVC. Here I have used MySQL database. I have created one database called “ springmvc ” and created one table called “ user ” with userid, username, password fields.  I have inserted some records into table like this. Step 1: Creating User POJO class.  We need to create a User POJO class for mapping user table. Ok let’s create it. Step 2: Creating hibernate mapping xml file for user class.  In hibernate we need to create hibernate mapping xml file for all domain class for mapping into corresponding database table. Instead of creating xml file you can use annotation for mapping domain class into database table. This is my mapping xml document created for mapping our user domain class into user database table. Step 3: Creating authenticate service class.  The method “verifyUserNameAndPassword” pres...

 I hope developers working in web application development might hear about MVC architecture. Almost all technologies provide support for MVC based web application development, but the success is based on many factors like reusable of the code, maintenance of the code, future adaption of the code, etc..,  The success of the Spring MVC is “ Open for extension and closed for modification ” principle. Using Spring MVC the developers can easily develop MVC based web application. We don’t need any steep learning curve at the same time we need to know the basics of spring framework and MVC architecture. The Spring MVC consists of following important components. 1. Dispatcher servlet 2. Controller 3. View Resolver 4. Model Spring MVC - Overview  The overall architecture of Spring MVC is shown here.  1. When “Dispatcher Servlet” gets any request from client, it finds the corresponding mapped controller for the request and just dispatches the request to the c...