How to make the extjs accordion layout example dynamic?

Question

I've pulled out the accordion layout .html and .js files from the extjs examples (below).

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.

Does anyone know of tutorials which go beyond this shell and show how to make it dynamic, ie integrate it in a working application?

<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. Say your server provides the following JSON, by calling /links.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实例页面。

How to make the extjs accordion layout example dynamic?

Question

2 answers

solution1
1 2011-09-29 22:16:02

solution2
0 2010-11-12 12:09:29

How to make the extjs accordion layout example dynamic?

Question

2 answers

solution1 1 2011-09-29 22:16:02

solution2 0 2010-11-12 12:09:29

solution1
1 2011-09-29 22:16:02

solution2
0 2010-11-12 12:09:29