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

我已经从extjs示例（如下）中拉出手风琴布局.html和.js文件。如何使extjs手风琴布局示例动态？

什么是下一步使这个动态例如链接的语法如何显示，以便填充左侧面板下的部分的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>

来源

2010-11-12 Edward Tanguay

你试过我的回答吗？ – 2011-09-30 17:26:47

这里有一个很好的信息来源，可能会帮助你前进： Saki's Ext Examples Page。

来源

2010-11-12 12:09:29 Tommi

有十亿种方法可以做到这一点。这个问题很含糊......但这是一个非常简单的问题。只需要一个调用服务器并动态添加面板的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); 
      } 
     });    
    });

但没有什么是我编写这里，你还不知道，是那里？

来源

2011-09-29 22:16:02

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

回答

相关问题