Results 1 to 10 of 10

Thread: viewModel inheritance when involving popup window

  1. #1
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296
    Answers
    16

    Default Answered: viewModel inheritance when involving popup window

    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?

    Code:
    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);
    ...

  2. You need to do something like:

    Code:
    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

  3. #2
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Answers
    10

    Default

    You need to do something like:

    Code:
    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

  4. #3
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296
    Answers
    16

    Default

    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.

  5. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Answers
    10

    Default

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

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

  6. #5
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296
    Answers
    16

    Default

    It seems we can also do:
    Code:
     viewModel: true

  7. #6
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296
    Answers
    16

    Default

    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.

  8. #7

    Default

    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:

    Code:
    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

  9. #8
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296
    Answers
    16

    Default

    Quote Originally Posted by alfonso.nishikawa View Post
    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:
    Code:
    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....

  10. #9
    Sencha Premium Member
    Join Date
    Oct 2014
    Posts
    55

    Default

    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);

  11. #10
    Sencha User
    Join Date
    Sep 2007
    Location
    Phoenix AZ
    Posts
    99
    Answers
    3

    Default

    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:

    Code:
    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.

    Code:
    salesOrderPanel.add({
                    xtype: 'mydialog'
    });
    THIS DID NOT WORK:

    Code:
    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •