Ext JS is a JavaScript framework that offers a lot of cross-browser user interface widgets. The core of Ext JS is build-on component design, which can be easily extended to meet our needs.
We can download the latest version of Ext JS framework from www.sencha.com, Ext JS section. Now, we are ready to build a classic Ext JS layout with two columns and one accordion. We can also prepare a simple HTML file ajax/center-content.html to test
the Ajax functionality:
… <body> <p>Center content</p> </body> …
First of all, we will include mandatory files like CSS and Ext JS library files.
<link rel="stylesheet" href="css/ext-all.css" /> <script src="js/ext-base.js"></script> <script src="js/ext-all.js"></script>
We will continue with the
onReadyfunction, which will run our script:<script type="text/javascript"> Ext.onReady(function(){ var viewport = new Ext.Viewport({ layout:'border', items:[{ region:'west', id:'west-panel', title:'West', split:true, width: 200, layout:'accordion', items: [{ html: 'Navigation content', title:'Navigation' },{ title:'Settings', html: 'Settings content' }] },{ region:'center', layout:'column', autoLoad:{ url: 'ajax/center-content.html', method:'GET' } }] }); }); </script>Our layout with an accordion navigation is ready:
Ext JS is built for developers, to make their lives easier. As you can see in the source, we have built a layout with a simple JavaScript object. We have a "Viewport" with two items. One is positioned to the left (region: West) and the second to the right (region: East). We don't have to take care of the CSS in this case. Everything is handled directly by Ext JS through our variables like width, margins, cmargins, and so on. The layout property is really powerful. The inner layout on the West side is an accordion with the items Navigation and Settings. In the center column, we can see content loaded via Ajax, using the autoLoad method.