是否可以在Viewport中的items属性中使用loop?

时间:2013-09-29 07:53:30

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

以下是我用来创建模态

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

1 个答案:

答案 0 :(得分: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的规范。

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

在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。