ExtJS - Border Layout

  • Border layout allows you you to create a layout based on the regions.
  • Layout needs to be allocated as regions
  • Typical ExtJS application has border layout has initial layout

    Following are the  regions defined in border layout
    • East
    • West  
    • Center - Main Content
    • North  - Header
    • South  - Footer
     
              {  id:'border-panel',
                title: 'Border Layout',
                layout: 'border',
                bodyBorder: false,
                defaults: {
                    collapsible: true,
                    split: true,
                    animFloat: false,
                    autoHide: false,
                    useSplitTips: true,
                    bodyStyle: 'padding:15px'
                },
                items: [{
                    title: 'Footer',
                    region: 'south',
                    height: 150,
                    minSize: 75,
                    maxSize: 250,
                    cmargins: '5 0 0 0',
                    html: '<p>Footer content</p>'
                },{
                    title: 'Navigation',
                    region:'west',
                    floatable: false,
                    margins: '5 0 0 0',
                    cmargins: '5 5 0 0',
                    width: 175,
                    minSize: 100,
                    maxSize: 250,
                    html: '<p>Secondary content like navigation links could go here</p>'
                },{
                    title: 'Main Content',
                    collapsible: false,
                    region: 'center',
                    margins: '5 0 0 0',
                    html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
                }]
            },

     

No comments

Powered by Blogger.