How to dynamically add items based on bound data

Question

I have ViewModel, and one of its fields contains array of objects. How can I create items: [] dynamically based on data of that field? Actually I need something like grid, but a bit more complex and with different layout. I guess I have to listen something like 'onChange' event for ViewModel, and do :

this.add(Ext.create('MyItem', {data: ElementOfArrayFromVMField}))

Is this right way?

like `viewModel.bind('{arr}', this.createItems)` – CD.. Oct 09 '15 at 14:11 — CD.., Oct 09 '15 at 14:11

score 0 · Accepted Answer · answered Oct 14 '15 at 11:09

Finally, I found the way, which CD pointed, is the best. I extended Panel as Periods, and created method setPeriods. Then binding works perfectly. Most important thing - is the prefix 'set' in the metod, that named like bound field.

...
xtype: 'Periods',
bind: {
    periods: '{veiwmodel.periods}'
}
...

and inside Periods:

Ext.define('Myapp.view.Periods', {
extend: 'Ext.panel.Panel',
...
setPeriods: function(items) {
    this.removeAll(true);
    this.add({...});
}

How to dynamically add items based on bound data

1 Answers1