是否可以在视口中的项目属性中使用循环

Is it possible to use loop in items property in Viewport?

本文关键字：属性 循环 项目 视口 是否      更新时间：2023-09-26

下面是我用来创建模态的代码- 

Ext.Viewport.add({
  xtype: 'panel',
  centered: true,
  style: {
      'background-color': 'transparent;'
     },
  cls: 'my-panel',
  float: true,
  modal: {
    style: {
       'opacity': '0.5'
      }
    },
  width: '100%',
  height: '86%',
  styleHtmlContent: true,
  items: [
     {
     }
   ]
 });

我有一个包含数据的数组。我需要遍历该数组并将值放在上面示例中的 items 属性中。但我不能在那里使用循环。有没有办法循环通过该数组并将值放入项目中？提前谢谢。

嗯...一种方法是提前循环数据：

var itemlist = [];
for(var i..... )
{
    itemlist += ... defined the object that you need to put into the items list...;
}

然后在您的代码中

而不是：

items: [
    {
    }
]

将其更改为：

items : itemlist

编辑：再。。我已经有一段时间没有碰extjs了。但是你通常放在物品中的东西会是这样的

items:[
{
    type: 'panel',
    someSetting: 'your setting value',
    ...
}
]

遵守 extJS 的规范。

因此，在itemlist中，您将完全相同的格式完全相同的对象粘贴到列表中，以使其可用作配置对象的数组。

在视口中.add( ...配置对象 ( 函数...实质上是创建一个面板，并将该面板添加到要显示的视口的项目列表中。所以你也可以拿面板..并在添加面板后向其添加项目。查看 extjs 的文档，了解如何获取面板对象并向其中添加项。

编辑 2：

好的..只是为了显示图像..那么你真的不必使用项目列表。我认为面板支持 html 代码使用。像这样：

viewport.add({
    xtype: 'panel',
    somesettings...,
    html: "html code here",
    rest of settings...
});

所以......你可以先运行一个循环来生成html代码，并将html设置为等于你预先生成的html代码。说：

var tmpl;
for(var i ... loops your thumbnail)
{
    tmpl += '<img src="' + thumbnail[i] + '" />';
}

并将 HTML 设置设置为 TMPL。

相关文章：