new-ext-js-for-ext4all-free-download-and-demo

Demo Here :  new-ext-js-for-ext4all-free-download

Code Here :  new-ext-js-for-ext4all-free-download

Original tutorial Here :  new-ext-js-for-ext4all-free-download


<title>Ext JS Website CMS</title>
    <meta name="keywords" content="ext, ext js, ext js 4, extjs 4, extjs examples, extjs samples, extjs tutorial, extjs docs, extjs grid, extjs form, extjs panel, extjs store, extjs ajax, web development, for developers, for web developers, software, web software, cms, javascript cms, ajax cms, extjs cms, site, web site, website" />
    <meta name="description" content="Site about Ext JS - JavaScript framework for building rich internet applications." />
    <link href="http://ext4all.com/Scripts/ext/ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="http://ext4all.com/Scripts/ext/ext-4.0.7-gpl/ext-all.js"></script>
  <script>
    Ext.onReady(function () {
 Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [
   {
    region: 'north',
    title: 'Page Title',
    html: 'Information goes here',
    bodyPadding: 10,
    height: 100,
    margins: '5 5 5 5'
   },
   {
    // could use a TreePanel or AccordionLayout for navigational items
    region: 'west',
    collapsible: true,
    title: 'Navigation1',
    width: 150,
    margins: '0 5 0 5'
   },
   {
    region: 'south',
    title: 'South Panel',
    collapsible: true,
    html: 'Information goes here',
    bodyPadding: 10,
    split: true,
    height: 100,
    minHeight: 100,
    margins: '0 5 5 5'
   },
   {
    region: 'east',
    title: 'East Panel',
    collapsible: true,
    split: true,
    width: 200,
    margins: '0 5 0 0'
   },
   {
    region: 'center',
    xtype: 'tabpanel', // TabPanel itself has no title
    activeTab: 0,  // First tab active by default
    items: {
     title: 'Default Tab',
     html: 'The first tab\'s content. Others may be added dynamically',
     bodyPadding: 10
    }
   }
  ]
 });
});
    </script>