EXTJs从动态数组向面板添加项目

时间:2011-08-29 10:13:30

标签: javascript extjs

我有一个手风琴布局,里面有3个面板部分。

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

的数组中
months["May", "June, "July", "August"]

根据此数组中的值,我希望这些值在accordion面板中显示为链接。我不知道如何将这些项目动态添加到手风琴部分。链接将用于将网格加载到整个边框布局的Container中。

这是我的手风琴设置:

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                     
                    }]           
            },

1 个答案:

答案 0 :(得分:2)

您确定要将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);
}