javascript - EXTJs 将项目从动态数组添加到面板

Question

我有一个 Accordion 布局，其中有 3 个面板部分。

我想使用其中一个部分来显示过去 90 天的月份。这可能在 3-5 个月之间。我有一个函数可以计算这些月份并将它们存储在类似于以下的数组中:

months["May", "June, "July", "August"]

基于此数组中的值，我希望它们在 Accordion 面板中显示为链接。我不知道如何将这些作为项目动态添加到 Accordion 部分。这些链接将用于将网格加载到整体边框布局的容器中。

这是我的 Accordion 设置:

title        : 'Navigation',
              region       : 'west',
              collapsible  : false,           
              margins: '100 0 0 0',
              cmargins: '5 5 0 0',
               width: 175,
               minSize: 100,
               maxSize: 150,
               layout: {
                   type: 'accordion',
                   animate: true
               },
               items:[{ 
                        id:'main' 
                        ,title:'Summary'                        
                        ,collapsed:false
                        ,frame:true 
                        //captures the expand function to call the getgrids functionality
                        //don't want it to expand as it only displays 1 thing
                        ,expand : function(){                           
                            getGrids();
                        }
                    },
                    { 
                        id:'month' 
                        ,title:'Month View'                     
                        ,collapsed:false
                        ,frame:true
                        ,items:[{

                        }]
                    },{ 
                        id:'search' 
                        ,title:'Search' 
                        ,html: 'Search'
                        ,collapsed:true
                        ,frame:true                     
                    }]           
            },

Answer 1

您确定要将 add 链接作为 items 吗？没有内置链接小部件(至少我没听说过)。但是 add 方法和 items 配置是针对小部件的。因此，如果您想定义自己的链接小部件，您可以使用以下代码添加它:

var monthsWidget = Ext.getCmp('month');
for (var i = 0; i < months.length; i++)
  monthsWidget.add(new YourLinkWidget(/*config*/));

但是创建新的小部件？ ...链接？ ...对我来说没有意义。为什么不将 DOM 元素附加到 Ext.getCmp('month').body:

var monthsWidget = Ext.getCmp('month');
for (var i = 0; i < months.length; i++) {
  var link = Ext.createDom({
    tag: 'a',
    href: 'http://example.com'
  });

  Ext.fly(link).on('click', function(e) {
    // click handling here

    return false;
  });

  monthsWidget.body.appendChild(link);
}