viewModel inheritance when involving popup window

[SebTardif]

Like many other widgets, I have a custom widget that open a tiny popup window to edit/view more states.

Before that popup window is created, the viewModel exist in the class that will open the window.

My problem is that the new popup window is ignoring the viewModel of my custom widget, it's real parent, because it's not in the UI hierarchy. How can I fix this?

Ext.define('OPApp.widget.DateRange', {
    extend: 'Ext.container.Container',
    viewModel: {
            start: '{start}',
            end: '{end}'
     }


    items: [{
        xtype: 'textfield',
        triggers: {
            search: {
                    Ext.create('Ext.form.Panel', {
                        floating: true,
                    ).showAt(xy);
...

[estesbubba]

You need to do something like:

dateRange.add(panel).showAt();

This example shows how to attach dialogs to a view to share the VM & VC.

http://dev.sencha.com/extjs/5.0.0/ex...-child-session

[SebTardif]

This fix the viewModel

dateRange.add(panel).showAt();

but it create side effect for dateRange because it has an unexpected children. You can imagine that each component may behave differently.

For what I know so far, it's NOT a solution, it's a HACK.

[estesbubba]

Go back to your original code and try this. I had to do this somewhere to make the parent's VM visible.

Ext.create('Ext.form.Panel', {
    floating: true,
    viewModel: {}
).showAt(xy);

[SebTardif]

It seems we can also do:

 viewModel: true

[SebTardif]

It seems that this approach using parent.add(popup).showAt() has side effects related to the fact that "popup" has already been created, and so its constructor and initComponent didn't have the binding of parent when executed.

[alfonso.nishikawa]

Sorry for resurrecting the thread. I have a button that opens a popup window and I want the window to get into the ViewModel hierarchy, but the button has no add()method.
For that I use the config:

Ext.create('MyApp.foo.BarWindow', {
    viewModel: {
        parent: btn.getViewModel()
    }
}) ;

The documentation states that the config value 'parent' is ReadOnly, but actually states in the description: "Once set, this cannot be changed.", so I feel confident using it

[SebTardif]

I have a button that opens a popup window and I want the window to get into the ViewModel hierarchy, but the button has no add()method.
For that I use the config

Great, that should handle all the cases, including my new issue, at least the parent is known during construction.

I just understood a new issue with the Sencha way below:

dateRange.add(panel).showAt();

panel (and it's subcomponents) already start it's creation code before having a parent. If any of the subcomponent do viewmodel stuff, including creating their own viewmodel, it's getting nasty because the parent may still not be available depending of the order of execution. I just lost couple of hours of 'unexplained' issue where a custom component that is independent and work well, started to misbehave and seems to behave differently depending of the 'debugger' statement I put in the code....

[rhubarb65]

For expliciteness - If you want your viewModel to be inherited by the child popup window then use (in a viewcontroller method):-


view.add(popup).show();


or spend hours wondering why this does not work :-


popup.show();
view.add(popup);

[mcg1103]

When using ExtJS 6.7.0 Modern I found that you have to allow the parent to create the dialog to inherit the viewmodel.

So you can either include the dialog in the view's items:

items: [{
     xtype: 'mydialog'
},{

<OTHER ITEMS>
}]

Then locate the dialog via view.child('mydialog') or something like that.

or allow the parent view to create the dialog when adding it.

salesOrderPanel.add({
                xtype: 'mydialog'
});

THIS DID NOT WORK:

let mydialog = Ext.create({
                xtype: 'mydialog'
 });

parentView.add(mydialog);

OR:
parentView.add(Ext.create({
                xtype: 'mydialog'
}));

Because this is creating the dialog before it is assigned to the view and its bindings are already set.