从动态数组中添加项目到面板

EXTJs Add items to panel from dynamic array

本文关键字:项目 添加 动态 数组      更新时间:2023-09-26

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

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

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

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

这是我的手风琴设置:

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

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