Как сделать пример макета аккордеона extjs динамичным? - PullRequest
Новая
       3

Как сделать пример макета аккордеона extjs динамичным?

0 голосов
/ 12 ноября 2010

Я извлек файлы .html и .js макета аккордеона из примеров extjs (ниже).

Что такое следующий шаг , чтобы сделать это динамическим, например как выглядит синтаксис ссылки, так что HTML-код, который заполняет раздел под панелью слева, имеет ссылки, которые заполняют контент справа.

Кто-нибудь знает учебники, которые выходят за рамки этой оболочки и показывают, как сделать ее динамичной, то есть интегрировать ее в работающее приложение? 

<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>

Ответы [ 2 ]

1 голос
/ 30 сентября 2011

Есть миллиард способов сделать это.Вопрос неопределенный ... но вот очень упрощенный.Просто используйте функцию Ajax, которая вызывает сервер и динамически добавляет панели.Скажем, ваш сервер предоставляет следующий JSON, позвонив /links.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);
            }
        });            
    });

Но я не написал здесь ничего такого, что вы не сделализнаете, есть?

0 голосов
/ 12 ноября 2010

Вот очень хороший источник информации, который, вероятно, поможет вам продвинуться вперед: Страница примеров Саки Ext .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...