如何使extjs手风琴布局示例动态化？

Question

I've pulled out the accordion layout .html and .js files from the extjs examples (below). 我从extjs示例中抽出了手风琴布局.html和.js文件（如下）。

What is the next step to make this dynamic eg how the syntax of a link looks so that the HTML that fills a section under a panel on the left has links which fill the content on the right. 使其动态化的下一步是什么，例如，链接的外观如何，以便使填充左侧面板下方部分的HTML具有填充右侧内容的链接。

Does anyone know of tutorials which go beyond this shell and show how to make it dynamic, ie integrate it in a working application? 是否有人知道超出该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

There's a billion ways to do it. 有十亿种方法可以做到。 The question is vague... but here's a very simplistic one. 这个问题含糊不清...但这是一个非常简单的问题。 Just have an Ajax function that calls the server and adds the panels dynamically. 只需具有一个Ajax函数即可调用服务器并动态添加面板。 Say your server provides the following JSON, by calling /links.json 假设您的服务器通过调用/links.json提供以下JSON

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

You would do the following 您将执行以下操作

    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);
            }
        });            
    });

But there's nothing that I coded here that you didn't already know, is there? 但是我在这里没有编码的东西你还不知道，在吗？

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