In ExtJS 6, How to Get ViewModel data to work before panel loads - extjs

Question

I'm having trouble with timing. I understand why in my example below and on fiddle that the page shows, then disappears. That is because the model data changes the hidden property after the panel has displayed, then it hides the panel. I want to figure out how to have the panel know about the model data before it loads.
https://fiddle.sencha.com/#fiddle/19m1
Ext.application({
name : 'MyApp',
launch : function() {
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
viewModel: {
people: [],
data: {
hidePanel: true
}
},
bind: {
data: '{people}',
hidden: '{hidePanel}',
},
border: 3,
width: 300,
height: 150,
title: 'XTemplate Data Binding Example',
tpl: [
'<tpl for=".">',
'First Name: {fName} <br>',
'Last Name: {lName}',
'<hr>',
'</tpl>'
],
autoScroll: true, // add scroll bar if necessary
title: 'Details'
});
var pnl = Ext.create('MyApp.view.MyPanel', {
renderTo: Ext.getBody()
});
pnl.getViewModel().set('people',[
{fName: 'Steve', lName: 'Drucker', bonus: 5},
{fName: 'Jason', lName: 'Perry', bonus: 7},
{fName: 'Tracey',lName: 'Dunn', bonus: 8},
]);
}
});
*** Proposed answer by Robert Watkins?
I believe below is what Robert Watkins is proposing. That is, not using bind with the hidden property but looking at the hidden property in the afterrender event.
https://fiddle.sencha.com/#fiddle/19m7 (updated fiddle)
Ext.application({
name : 'MyApp',
launch : function() {
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
viewModel: {
people: [],
data: {
hidePanel: true
}
},
listeners: {
afterrender: function(sender) {
if (this.getViewModel().data.hidePanel != true) {
this.show();
}
}
},
hidden: true,
bind: {
data: '{people}'
//hidden: '{hidePanel}',
},
border: 3,
width: 300,
height: 150,
title: 'XTemplate Data Binding Example',
tpl: [
'<tpl for=".">',
'First Name: {fName} <br>',
'Last Name: {lName}',
'<hr>',
'</tpl>'
],
autoScroll: true, // add scroll bar if necessary
title: 'Details'
});
var pnl = Ext.create('MyApp.view.MyPanel', {
renderTo: Ext.getBody()
});
pnl.getViewModel().set('people',[
{fName: 'Steve', lName: 'Drucker', bonus: 5},
{fName: 'Jason', lName: 'Perry', bonus: 7},
{fName: 'Tracey',lName: 'Dunn', bonus: 8},
]);
}
});

Answer 1

The actual problem is that panel will get rendered and made visible before the view model data is bound to the panel. That's why you get the beat - panel is made, shown, and then hidden.
ViewModel data is applied to the bound values in as close to a background thread as you can get in JavaScript - in a scheduled task set to happen ASAP, or as soon as the browser is idle. This will be after the panel is rendered.
The simplest solution is to hide by default. That way, if it's meant to stay invisible, it will, and if it's meant to become visible, it will be shown on the beat.
Example:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
viewModel: {
people: [],
data: {
hidePanel: true // determine if the panel should be hidden or not.
}
},
bind: {
data: '{people}',
hidden: '{hidePanel}', // add the binding to make the panel visible or not.
},
hidden: true, // make it hidden by default.
....
}

Answer 2

You can use a formula for hidePanel, like:
viewModel: {
formulas: {
hidePanel: function(getter){
var people = getter('people');
return !people;
}
}
}
Working example: https://fiddle.sencha.com/#fiddle/19mb