extjs4 多个panel 列格局-JavaSript-爱易网页

extjs4 多个panel 列格局

日期：2014-05-16　浏览次数：20294 次

extjs4 多个panel 列布局

单纯的设置layout：column 好像不行，感觉extjs4跟以前不太一样

找了一个panel 横向布局的例子

<html>
<head>
    <title>Column Layout</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    .x-panel-body p {
        margin:5px;
    }
    .x-column-layout-ct .x-panel {
        margin-bottom:5px;
    }
    .x-column-layout-ct .x-panel-dd-spacer {
        margin-bottom:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png) !important;
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png) !important;
    }
    </style>
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<script type="text/javascript">
Ext.require(['*']);

    Ext.onReady(function(){

       // NOTE: This is an example showing simple state management. During development,
       // it is generally best to disable state management as dynamically-generated ids
       // can change across page loads, leading to unpredictable results.  The developer
       // should ensure that stable state ids are set for stateful components in real apps.
       Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

       var viewport = Ext.create('Ext.Viewport', {
            layout:'border',
            items:[{
                region:'west',
                id:'west-panel',
                title:'West',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'35 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [{
                    html: Ext.example.shortBogusMarkup,
                    title:'Navigation',
                    autoScroll:true,
                    border:false,
                    iconCls:'nav'
                },{
                    title:'Settings',
                    html: Ext.example.shortBogusMarkup,
                    border:false,
                    autoScroll:true,
                    iconCls:'settings'
                }]
            },{
                region:'center',
                margins:'35 5 5 0',
                layout:'column',
                autoScroll:true,
                defaults: {
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    }
                },
                items: [{
                    columnWidth: 1/3,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px',
                    items:[{
                        title: 'A Panel',
                        html: Ext.example.shortBogusMarkup
                    }]
                },{
                    columnWidth: 1/3,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0 5px 5px',
                    items:[{
                        title: 'A Panel',
                        html: Ext.example.shortBogusMarkup
                    }]
                },{
                    columnWidth: 1/3,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px',
                    items:[{
                        title: 'A Panel',
                        html: Ext.example.shortBogusMarkup
                    },{
                        title: 'Another Panel',
                        html: Ext.example.shortBogusMarkup
                    }]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

extjs4 多个panel 列格局

相关资料更多>

推荐阅读更多>