view release on metacpan or  search on metacpan

share/examples/layout-browser/layouts/basic.js  view on Meta::CPAN

// as panel objects.  You could just as easily do this instead:
//
// var absolute = new Ext.Panel({ ... });
//
// However, by passing configs into the main container instead of objects, we can defer
// layout AND object instantiation until absolutely needed.  Since most of these panels
// won't be shown by default until requested, this will save us some processing
// time up front when initially rendering the page.
//
// Since all of these configs are being added into a layout container, they are
// automatically assumed to be panel configs, and so the xtype of 'panel' is
// implicit.  To define a config of some other type of component to be added into
// the layout, simply provide the appropriate xtype config explicitly.
//
/*
 * ================  Start page config  =======================
 */
// The default start page, also a simple example of a FitLayout.
var start = {
    id: 'start-panel',
    title: 'Start Page',
    layout: 'fit',
    bodyStyle: 'padding:25px',
    contentEl: 'start-div'  // pull existing content from the page
};

/*
 * ================  AbsoluteLayout config  =======================
 */
var absolute = {
    id: 'absolute-panel',
    title: 'Absolute Layout',
    layout: 'absolute',
    defaults: {
        bodyStyle: 'padding:15px;',
        width: 200,
        height: 100,
        frame: true
    },
    items:[{
        title: 'Panel 1',
        x: 50,
        y: 50,
        html: 'Positioned at x:50, y:50'
    },{
        title: 'Panel 2',
        x: 125,
        y: 125,
        html: 'Positioned at x:125, y:125'
    }]
};

/*
 * ================  AccordionLayout config  =======================
 */
var accordion = {
    id: 'accordion-panel',
    title: 'Accordion Layout',
    layout: 'accordion',
    bodyBorder: false,  // useful for accordion containers since the inner panels have borders already
    bodyStyle: 'background-color:#DFE8F6',  // if all accordion panels are collapsed, this looks better in this layout
    defaults: {bodyStyle: 'padding:15px'},
    items: [{
        title: 'Introduction',
        tools: [{id:'gear'},{id:'refresh'}],
        html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'
    },{
        title: 'Basic Content',
        html: '<br /><p>More content.  Open the third panel for a customized look and feel example.</p>',
        items: {
            xtype: 'button',
            text: 'Show Next Panel',
            handler: function(){
                Ext.getCmp('acc-custom').expand(true);
            }
        }
    },{
        id: 'acc-custom',
        title: 'Custom Panel Look and Feel',
        cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
        html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
    }]
};

/*
 * ================  AnchorLayout config  =======================
 */
var anchor = {
    id:'anchor-panel',
    title: 'Anchor Layout',
    layout:'anchor',
    defaults: {bodyStyle: 'padding:15px'},
    items: [{
        title: 'Panel 1',
        height: 100,
        anchor: '50%',
        html: '<p>Width = 50% of the container</p>'
    },{
        title: 'Panel 2',
        height: 100,
        anchor: '-100',
        html: '<p>Width = container width - 100 pixels</p>'
    },{
        title: 'Panel 3',
        anchor: '-10, -262',
        html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'
    }]
};

/*
 * ================  BorderLayout config  =======================
 */
var border = {
    id:'border-panel',
    title: 'Border Layout',
    layout: 'border',
    bodyBorder: false,
    defaults: {
        collapsible: true,
        split: true,
        animFloat: false,