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

【问题标题】：Is it possible to use loop in items property in Viewport?是否可以在视口的项目属性中使用循环？
【发布时间】：2013-09-29 07:53:30
【问题描述】：

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

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 属性中。但我不能在那里使用循环。有没有办法通过该数组进行循环并将值放入项目中？提前致谢。

【问题讨论】：

标签： javascript extjs sencha-touch sencha-touch-2

【解决方案1】：

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

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.. 中，您将完全相同的对象以完全相同的格式粘贴到列表中，以使其可用作配置对象数组。

在 viewport.add( ... config object ) 函数中...您实际上是在创建一个面板并将该面板添加到要显示的视口的项目列表中。所以你也可以拿面板..并在面板添加后添加项目。查看 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。

【讨论】：

@user1600124-- 我在创建视口之前添加了这段代码。 var thumbImage = new Array();但我收到错误“未捕获的错误：[ERROR][Ext.Container#factoryItem] 无效配置，必须是有效的配置对象” for (var i = 0; i
面板创建后添加项目的方式是什么？
缩略图到底是什么样的？它是一个配置对象数组吗？类似于 { xtype: 'pane', someSettingName: 'someSetting, ... } ?
顺便说一句... thumbImage += thumbnail[i] 看起来不对.. 尝试 thumbImage.push(thumbnail[i]) 将项目推送到数组中
thumbnail 是一个只有一些 url 的数组，而不是配置对象。