How to bind child view to parent viewmodel in ExtJs 5?

Question

I need to bind child view to viewmodel of parent view. my structure is -

parentView{
    items : [{
        xtype : 'childview'
    }]
}

parentViewModel{data : NAME}

childview : {
    items : {[
        xtype : 'label',
        bind : {value : '{NAME}'}
    ]}
}

Can you elaborate on what you've done and what the problem really is? Error messages, unexpected behavior, etc. — Saki, Feb 12 '15 at 21:34

score 2 · Answer 1 · answered Dec 04 '15 at 12:03

Actually, you don't need to use the viewModel for the children at all. All the child views in the component chain do have a natural access to the parent viewModel.

Ext.define('APP.view.Main', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    viewModel: {
        data: { 
            title: 'TITLE',
            name: 'NAME'
        }
    },
    bind: { title: '{title}' },
    items: [{ xtype: 'child' }]
});

Ext.define('APP.view.Child', {
    extend: 'Ext.container.Container',
    alias: 'widget.child',
    items: [{
        xtype: 'label',
        bind: { value: '{name}' }
    }]
});

See the ExtJS guide for further explanation. (I sincerely recommend reading all of it :) ).

Hope this helps a little!

that's not an answer.. Person asked different thing – user2434435 Apr 30 '18 at 14:21 — user2434435, Apr 30 '18 at 14:21

score 0 · Answer 2 · answered Feb 16 '15 at 05:23

0

OK, for starters the syntax for your bind is wrong and also you can use the lighter component.html if you don't need 'label' xtype for form.

parentViewModel: {
   data: {
      name: 'Igor'
   }
}

xtype: 'component',
bind: {
   html: '{name}'
}

answered Feb 16 '15 at 05:23

Dreculah

96
1
5

How to bind child view to parent viewmodel in ExtJs 5?

2 Answers2