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's Ext Examples Page

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

2 个答案: