Gnanasuriyan

JavaScript static variables and methods are associated with the class, rather than with any object(similar to Java). Every instance of the same class has access to static members and rights to modify the values and method behavior at run-time. Let's see an example. var Person = function(fName, lName) { this.firstName = fName; this.lastName = lName; Person.objectCounts++; }; //Static variable. Person.objectCounts = 0; //Static method. Person.getObjectInformation = function() { return Person.objectCounts; }; Here the variable objectCounts is a static variable and getObjectInformation is a static method. If we create any object for Person class, the static variable "objectCounts" value is incremented by one. The method getObjectInformation is used for getting "objectCounts" value. var person1 = new Person('Suriya', 'A'); var person2 = new Person('John', 'H'); Here there are two objects created for Person class. Let...

What is JavaScript? JavaScript is a prototype based scripting language with dynamic typing and has first-class functions. Previously it is mostly used in web and mobile browser application development. These days it is used for performing server side operation. The best example is Node JS. What is static and dynamic languages? In static languages, the process of verifying & enforcing constraints of type and identifying the behaviour of the code can happens at compile time itself. Some of the static languages are Java, C#, etc., In dynamic languages the above process is can happens only at run time. This feature will helps to include new code, modifying type systems, and extending objects at run time. What is first-class functions? In many languages like Java and C# have some options for defining class. For an example, this is my Person class in Java. class Person { String firstName; String lastName; } In JavaScript we don't have any keyword like...

Grails - Introduction Grails is a modern web development framework that mixes the features of some important frameworks like Spring (IoC, MVC, AOP) and Hibernate. The Grails uses a Groovy as a programming language that runs on JVM and seamlessly integrates with Java language. The goal of Grails is simplifying Java enterprise web application development. The important feature of Grails is convention over configuration (Rails developers knows very well), means that your application auto-wires itself based on some common-sense naming schemes, instead of using XML configuration files.  The scaffolding is an another important feature of Grails, that will automatically creates a basic CURD interface for your domain class. Grails - Architecture Installing and configuring Grails 1. Here you can download the binary distribution of the Grails. After downloading just unzip it. 2. Create the GRAILS_HOME environment variable. 3. Add $GRAILS_HOME/bin to the pat...

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...