3

Below is the code I am using to create a modal- 

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: [
     {
     }
   ]
 });

I have an array with data. I need to loop through that array and put value in the items property on the above example. But I couldn't use loop in there. Is there any way to give a loop through that array and put values in the items? Thanks in advance.

4

1 回答 1

1

Well... One way is to loop the data in advance:

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

Then in your code

instead of:

items: [
    {
    }
]

change it to:

items : itemlist

Edit: Again.. I haven't touched extjs for a while now. But what you normally put in items would be something like

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

which abide to the specification of the extjs.

So in itemlist.. you stick exactly the same objects in exactly the same format into the list to make it usable as an array of configuration objects.

In the viewport.add( ... config object ) function... You are essentially creating a panel and adding the panel into the item list of the viewport to be displayed. So you can also take the panel.. and add items to it after the panel is added. Check out extjs's documentation on how to get the panel object and add items to it.

Edit 2:

Ok.. just to display images.. then you don't really have to use item list. I think panels support html code use. Something like:

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

So... you can run a loop to generate html code first.. and set the html to equal to your pre generated html code. Say:

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

and set the html setting to tmpl.

于 2013-09-29T08:01:01.427 回答