Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: ViewModel bindings are affecting OTHER views!

  1. #1
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,271
    Answers
    13

    Question ViewModel bindings are affecting OTHER views!

    I have a problem whereby setting link to a ViewModel for one form is affecting another form of the same type (a separate copy/instance of that form). Here's how I'm creating and adding copies of a form to a tabpanel:

    PHP Code:
    var tab Ext.create('App.view.ClientForm', {
        
    closabletrue,
        
    title'Client Form',
        
    CLIENTIDClientID
    });
    tabpanel.add(tab);
    tabpanel.setActiveTab(tab); 
    I'm passing the ClientID to the formpanel so that it knows which ID to request from the server when it loads. If I print the .id of each tab as I add it, I'm definitely getting unique formpanels:

    PHP Code:
    console.log('added tab with id: ' tab.id); 
    first call prints: added tab with id: clientform-1071
    second call prints: added tab with id: clientform-1109

    So, my formpanels (as tabs) are definitely unique!

    This is how I'm setting up the model for the form, since I can't hard-code the ID at design time in Architect, of course, and I am not aware of a better way to set up the link dynamically:

    PHP Code:
    onFormAfterRender: function(componenteOpts) {
        
    this.getViewModel().setLinks({
            
    theClient: {
                
    type'App.model.ClientInfo',
                
    idthis.CLIENTID
            
    }
        });

    I have bound the title of the form to the model. Here is a trimmed down definition of the ClientForm showing the title binding:

    PHP Code:
    Ext.define('App.view.ClientForm', {
        
    extend'Ext.form.Panel',
        
    alias'widget.clientform',

        
    controller'clientform',
        
    viewModel: {
            
    type'clientform'
        
    },
        
    defaultListenerScopetrue,

        
    layout: {
            
    type'vbox',
            
    align'stretch'
        
    },
        
    bind: {
            
    title'{theClient.FamilyName}, {theClient.GivenName} {theClient.MiddleName}'
        
    }
    }); 
    When I add the first tab, it loads fine and changes the panel's title to the name of the client.

    Then, I load a second tab for another client, and now I have two panels with EXACTLY the same title (and other field values, which I've omitted here).

    I thought these ViewModels were supposed to be uniquely attached to their views???

    What is the correct way to define a ViewModel for a formpanel dynamically in Architect 3.1? I'm using the ViewModel and ViewController defined for me already by Sencha Architect when I added the new formpanel.

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,501
    Answers
    13

    Default

    Add to your afterRender event:


    console.log(this.CLIENTID);


    Before setting the links.


    Chances are that both views are created with the same CLIENTID.


    Regards.

  3. #3
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,271
    Answers
    13

    Default

    I haven't checked that, but I'm sending the ID from the record in the selected grid row, but I'll check on Monday. Thanks.

  4. #4
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,271
    Answers
    13

    Default

    I printed the received ClientID to the console this morning and they are indeed different, so that's not the problem. My suspicions are that - even to this day with a brand-new Ext JS 5 - a ViewModel instance is not really that, it belongs to the formpanel it's associated with as a whole, and changes to one affect all.

    This isn't really what I expected. Controllers in Ext JS 4 were next to useless when it came to having multiple clones of a form in a tab panel, and it seems that the MVVM implementation is just as useless.

    Are there really developers out there who only ever have one instance of something like a client form open at a time? I wonder what purpose a tabpanel serves, then, if you can't really put clones of forms in there?! I'm sorry to unleash the sarcasm so early of a Monday morning, but MVVM was supposed to be the great saviour, but I am utterly disappointed with it. I will have to go back to doing things manually like I have done since late 2011. I can't afford to deal at length with these kinds of show-stopping oversights.

  5. #5
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,271
    Answers
    13

    Default

    It seems that links behave in an absolutely static way, and any view linked to a link gets whatever's in the link. I can't see how this would be useful at all. If I print a few things in the debug console, my two tabs have the following properties:

    id="clientform-1072"
    isFirstInstance=true
    linkData.theClient.data.ClientID=3 [should be 1]

    id="clientform-1110"
    isFirstInstance=false
    linkData.theClient.data.ClientID=3

    So, if links are utterly useless, how then does one create a unique instance of a model and bind it to its instance of a view? Sencha Architect doesn't allow me to delete the useless copies of ViewModel and ViewController, so I'm stuck with having them whether I like it or not.

  6. #6
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    You haven't really posted enough information.

    Where is "onFormAfterRender" being executed? Why is it setting the id in after render as opposed to at creation time?

    Would suggest you put together a fiddle, otherwise it's just speculating about what may be wrong.

  7. #7
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,271
    Answers
    13

    Default

    Quote Originally Posted by evant View Post
    Where is "onFormAfterRender" being executed? Why is it setting the id in after render as opposed to at creation time?
    Funnily enough, onFormAfterRender is being executed after my form renders. It's a basic event binding on the form in Sencha Architect. I've been using onFormAfterRender for years (especially since we couldn't use initComponent after Ext Designer turned into Sencha Designer, I think). I add a HAS_ALREADY_LOADED property on the form so that my onFormAfterRender code only executes once.

    If I were to set the ID at creation time then I suppose that would require an override? Overrides are usually a hassle so I tend to avoid them.

    Quote Originally Posted by evant View Post
    Would suggest you put together a fiddle, otherwise it's just speculating about what may be wrong.
    I've stripped all my bindings and references and have gone back to form.loadRecord() and form.updateRecord(). At least it works. The VM and VC created by Architect are "just there" doing no harm now, but I can't get rid of them.

  8. #8
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    What I mean is, there is no context provided. How is afterrender being bound? Is it inline on the component? In an application controller? In a view controller?

    The view models are separated between instances, so there's obviously something going wrong but it's not really possible to diagnose it without a clear picture of what is happening here, there's too many missing parts to say with any certainty.

  9. #9
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,271
    Answers
    13

    Default

    This is how my onFormAfterRender is defined (I've stripped most of the markup from SA's generated code):

    PHP Code:
    Ext.define('App.view.ClientForm', {
        
    extend'Ext.form.Panel',
        
    alias'widget.clientform',

        
    onFormAfterRender: function(componenteOpts) {
            
        }

    }); 
    If you know of a better way to setLinks() after the form is loaded into a tabpanel (or even before, if you prefer), then I'm all ears.

  10. #10

    Default

    Have you found any solution? I too face the same problem.

Page 1 of 2 12 LastLast

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
  •