JavaScript
Run Code
Open in Fiddle
// http://whatisextjs.com/extjs/implicit-viewmodel-2-way-data-bindings Ext.application({ name : 'Fiddle', launch : function() { Ext.widget('viewport', { layout: 'anchor', items: [{ xtype: 'panel', bodyPadding: 15, title: 'Description', html: 'This example demonstrates a rather interesting "feature" ' + 'of ExtJS ViewModel and data binding system, by which ' + 'implicit two-way data bindings are established between parent ' + 'and child view models properties within the same hierarchy ' + 'that share a data property with the same name, whose value is ' + 'undefined at the lower level. Hint: click the ? in upper ' + 'right of the panels.' },{ xtype: 'parent-panel', items: [{ xtype: 'some-cmp' }, { xtype: 'child-panel', items: { xtype: 'some-cmp' } }] }] }); } }); Ext.define('ParentPanel', { extend: 'Ext.Panel', xtype: 'parent-panel', title: 'Parent Panel', margin: 15, bodyPadding: 15, frame: true, viewModel: { data: { undefinedText: 'default Parent text', definedText: 'default Parent text' }}, tools: [{ type: 'help', handler: help }], tbar: [{ xtype: 'button', text: 'Change Parent Data', handler: changeParentData }] }); Ext.define('ChildPanel', { extend: 'Ext.Panel', xtype: 'child-panel', title: 'Child Panel', margin: 15, bodyPadding: 15, frame: true, viewModel: { data: { undefinedText: undefined, definedText: 'default Child Text' }}, tools: [{ type: 'help', handler: help }], bbar: [{ xtype: 'button', text: 'Change Child Undefined -> Defined', handler: changeChindUndefinedToDefined },{ xtype: 'button', text: 'Change Child Defined -> Undefined', handler: changeChindDefinedToUndefined }] }); Ext.define('SomeCmp', { extend: 'Ext.Component', xtype: 'some-cmp', bind: 'Binding to undefinedText: {undefinedText}<br/>' + 'Binding to definedText: {definedText}<br/>' }); function help(event, toolEl, panelHeader) { var panel = panelHeader.up('panel'); var vm = panel.getViewModel(); Ext.Msg.alert('ViewModel Info', panel.id + '<br/>"undefinedText": ' + vm.get('undefinedText') + '<br/>"definedText": ' + vm.get('definedText')); } function changeParentData() { var panel = this.up('panel'); var vm = panel.getViewModel(); var newText = Math.random()*100000; vm.set('undefinedText', newText); vm.set('definedText', newText); } function changeChindUndefinedToDefined() { this.up('panel').getViewModel().set('undefinedText', 'Child Text Explicitly Set'); } function changeChindDefinedToUndefined() { this.up('panel').getViewModel().set('definedText', undefined); }