如何使extjs手風琴布局示例動態化？

Question

我從extjs示例中抽出了手風琴布局.html和.js文件（如下）。

使其動態化的下一步是什么，例如，鏈接的外觀如何，以便使填充左側面板下方部分的HTML具有填充右側內容的鏈接。

是否有人知道超出該shell范圍的教程，並顯示了如何使其動態化，即將其集成到正在運行的應用程序中？

<html>
<head>
    <title>Accordion Layout</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

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

    <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: 'Start',
                html: '&lt;this is the start content&gt;',
                cls:'empty'
            });

            var item2 = new Ext.Panel({
                title: 'Application',
                html: '&lt;empty panel&gt;',
                cls:'empty'
            });

            var item3 = new Ext.Panel({
                title: 'Module',
                html: '&lt;empty panel&gt;',
                cls:'empty'
            });



            var accordion = new Ext.Panel({
                region:'west',
                margins:'5 0 5 5',
                split:true,
                width: 210,
                layout:'accordion',
                items: [item1, item2, item3]
            });

            var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    accordion, {
                    region:'center',
                    margins:'5 5 5 0',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'This is where the content goes for each selection.'
                }]
            });
        });
    </script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>

Answer 1

有十億種方法可以做到。 這個問題含糊不清...但這是一個非常簡單的問題。 只需具有一個Ajax函數即可調用服務器並動態添加面板。 假設您的服務器通過調用/links.json提供以下JSON

{links: ['http://www.google.com'], ['http://www.yahoo.com']}

您將執行以下操作

    Ext.onReady(function() {
        var accordion = new Ext.Panel({
            region:'west',
            margins:'5 0 5 5',
            split:true,
            width: 210,
            layout:'accordion'
        });

        new Ext.Viewport({
            layout:'border',
            items:[
              accordion, 
              {region:'center', html:'This is where the content goes for each selection.'}]
        });

        Ext.Ajax.request({
            url: '/links.json',
            callback: function(response) {
                var json = Ext.decode(response);
                var cfgs = [];
                for (var i = 0; i < json.links.length; i++) {
                    cfgs.push({
                        html: json.links[i]
                    })
                }
                accordion.add(cfgs);
            }
        });            
    });

但是我在這里沒有編碼的東西你還不知道，在嗎？

Answer 2

這是一個很好的信息來源，可能會幫助您前進： Saki的Ext實例頁面。

如何使extjs手風琴布局示例動態化？

問題描述

2 個解決方案

解決方案1
1 2011-09-29 22:16:02

解決方案2
0 2010-11-12 12:09:29

如何使extjs手風琴布局示例動態化？

問題描述

2 個解決方案

解決方案1 1 2011-09-29 22:16:02

解決方案2 0 2010-11-12 12:09:29

解決方案1
1 2011-09-29 22:16:02

解決方案2
0 2010-11-12 12:09:29