Gnanasuriyan

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  available in Ext JS.          1. Session s

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&#