view release on metacpan or  search on metacpan

share/examples/layout-browser/layout-browser.html  view on Meta::CPAN

            </code></pre>
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">CardLayout API Reference</a></p>
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel" target="_blank">TabPanel API Reference</a></p>
        </div>
        <div id="card-wizard-details">
            <h2>Ext.layout.CardLayout (Wizard)</h2>
            <p>You can use a CardLayout to create your own custom wizard-style screen.  The layout is a standard
            CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function
            that implements the wizard's business logic (see the code in basic.js for details).</p>
            <p><b>Sample Config:</b></p>
            <pre><code>
layout:'card',
activeItem: 0, // index or id
bbar: ['->', {
    id: 'card-prev',
    text: '&amp;laquo; Previous'
},{
    id: 'card-next',
    text: 'Next &amp;raquo;'
}],
items: [{
    id: 'card-0',
    html: 'Step 1'
},{
    id: 'card-1',
    html: 'Step 2'
},{
    id: 'card-2',
    html: 'Step 3'
}]
            </code></pre>
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout" target="_blank">API Reference</a></p>
        </div>
        <div id="column-details">
            <h2>Ext.layout.ColumnLayout</h2>
            <p>This is a useful layout style when you need multiple columns that can have varying content height.
            Any fixed-width column widths are calculated first, then any percentage-width columns specified using
            the <tt>columnWidth</tt> config will be calculated based on remaining container width.  Percentages
            should add up to 1 (100%) in order to fill the container.</p>
            <p><b>Sample Config:</b></p>
            <pre><code>
layout:'column',
items: [{
    title: 'Width = 25%',
    columnWidth: .25,
    html: 'Content'
},{
    title: 'Width = 75%',
    columnWidth: .75,
    html: 'Content'
},{
    title: 'Width = 250px',
    width: 250,
    html: 'Content'
}]
            </code></pre>
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.ColumnLayout" target="_blank">API Reference</a></p>
        </div>
        <div id="fit-details">
            <h2>Ext.layout.FitLayout</h2>
            <p>A very simple layout that simply fills the container with a single panel.  This is usually the best default
            layout choice when you have no other specific layout requirements.</p>
            <p><b>Sample Config:</b></p>
            <pre><code>
layout:'fit',
items: {
    title: 'Fit Panel',
    html: 'Content',
    border: false
}
            </code></pre>
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.FitLayout" target="_blank">API Reference</a></p>
        </div>
        <div id="form-details">
            <h2>Ext.layout.FormLayout</h2>
            <p>FormLayout has specific logic to deal with form fields, labels, etc.  While you can use a FormLayout in
            a standard panel, you will normally want to use a FormPanel directly in order to get form-specific functionality
            like validation, submission, etc.  FormPanels use a FormLayout internally so the layout config is not needed
            (and the layout may not render correctly if overridden).</p>
            <p><b>Sample Config:</b></p>
            <pre><code>
xtype: 'form', // FormPanel
labelWidth: 75,
width: 350,
defaultType: 'textfield',
items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank:false
    },{
        fieldLabel: 'Last Name',
        name: 'last'
    },{
        fieldLabel: 'Company',
        name: 'company'
    },{
        fieldLabel: 'Email',
        name: 'email',
        vtype:'email'
    }
],
buttons: [
    {text: 'Save'},
    {text: 'Cancel'}
]
            </code></pre>
            <p><a href="http://extjs.com/deploy/dev/docs/?class=Ext.layout.FormLayout" target="_blank">API Reference</a></p>
        </div>
        <div id="table-details">
            <h2>Ext.layout.TableLayout</h2>
            <p>Outputs a standard HTML table as the layout container.  This is sometimes useful for complex layouts
            where cell spanning is required, or when you want to allow the contents to flow naturally based on standard
            browser table layout rules.</p>
            <p><b>Sample Config:</b></p>
            <pre><code>
layout:'table',
layoutConfig: {
    columns: 3
},
items: [
    {html:'1,1',rowspan:3},