extjs accordion布局第一项怎么合住

问答首页 → Web前端技术

0 0

extjs accordion布局第一项怎么合住5

使用extjs accordion布局的时候，默认第一项是打开的，请问怎么让它默认闭合呢？

JavaScript EXT

2008年6月20日 09:56

zhangkewei
0
0 0 0

2个答案按时间排序按投票排序

0 0

哈哈
我也是找了好久呢

2008年7月01日 12:44

genius
34
0 0 0

添加评论

0 0

兄弟，我知道怎么解决了，你把他的items每一项加一个： collapsed:true,
下面的代码是我ext2.0自带例子里面的一个，我加了这个属性：
<html>
<head>
    <title>Accordion Layout</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    
    
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    

    <script type="text/javascript" src="../../ext-all.js"></script>

    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
        .empty .x-panel-body {
            padding-top:20px;
            text-align:center;
            font-style:italic;
            color: gray;
            font-size:11px;
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {

            var item1 = new Ext.Panel({
                title: 'Accordion Item 1',
                collapsed:true,
                html: '<empty panel>',
                cls:'empty'
            });

            var item2 = new Ext.Panel({
                title: 'Accordion Item 2',
                html: '<empty panel>',
                collapsed:true,
                cls:'empty'
            });

            var item3 = new Ext.Panel({
                title: 'Accordion Item 3',
                html: '<empty panel>',
                collapsed:true,
                cls:'empty'
            });

            var item4 = new Ext.Panel({
                title: 'Accordion Item 4',
                html: '<empty panel>',
                collapsed:true,
                cls:'empty'
            });

            var item5 = new Ext.Panel({
                title: 'Accordion Item 5',
                html: '<empty panel>',
                collapsed:true,
                cls:'empty'
            });

            var accordion = new Ext.Panel({
                region:'west',
                collapsible :true,

rootVisible:false,
        lines:false,
        autoScroll:true,
        animCollapse:false,
        animate: false,
        collapseMode:'mini',
                margins:'5 0 5 5',
                split:true,
                width: 210,
                layout:'accordion',
                layoutConfig: {
        // layout特定的配置
        titleCollapse: false,
        animate: false
    },
                items: [item1, item2, item3, item4, item5]
            });

            var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    accordion, {
                    region:'center',
                    margins:'5 5 5 0',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'<br/><br/><empty center panel>'
                }]
            });
        });
    </script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
</body>
</html>