Results 1 to 6 of 6

Thread: ViewModel link to a session child record still triggers XHR request

  1. #1
    Sencha Premium Member CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    118
    Answers
    6

    Default Answered: ViewModel link to a session child record still triggers XHR request

    I built a demo file mimicing the binding child session kitchen sink example.

    Similar to the kitchen sink example, when I click on the Edit button, I pass the button and create a tab using the button's record:

    Code:
        onEditCustomerClick: function (button){
            this.createTab( button.getWidgetRecord() );
        }
    
    
    
        createTab: function (record){
    
    
            var tabs = Ext.getCmp('mainTabPanel');
            
    
    
            this.isEdit = !!record;
    
    
            this.tab = tabs.add({
                xtype: 'binding-child-session-form',
                viewModel:{
                    data:{
                        title: record ? 'Edit: ' + record.get('name') : 'Add Customer'
                    },
    
    
                    links: {
                        theCustomer: record || {
                            type: 'Customer',
                            create: true
                        }
                    }
                },
    
    
                session: true
            });
    When my create tab method fires and the this.tab property is created, the title is set correctly using the record object passed in from the button (as expected).

    The issue that I'm seeing happens when I try to link the record to the viewModel property. Instead of using the record passed in, I get a new XHR request. The correct record is pulled from the server, and the bindings based on the "theCustomer" reference populate correctly, but as far as I understand it should not be creating/using an XHR request, it should be using the data from the record.

    I've watched the network tab for the sencha kitchinsink demo version and do not see any additional requests to the server.

    Is there something in my configuration that would prevent me from using the existing session instead of the model proxy?

  2. You want to set session:true on the parent of the two components. Otherwise you're creating two sessions. You can use lookupSession() on the component to see what session is in use:

    http://docs.sencha.com/extjs/5.1/5.1...-lookupSession

    Component w/o a session will ascend to the first ancestor with a session.

    You can use peekRecord to see if a record is in a session.

  3. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    The first thing I'd verify would be if the record in question already exists in the parent session. If yes, it should not be requested from the server.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #3
    Sencha Premium Member CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    118
    Answers
    6

    Default

    Gotcha.

    Is there a way of confirming that in the Javascript console?

    I'm pretty positive that the record should exist in the session. I've enabled the session config on the grid that the button is on:


    Code:
    Ext.define("BindingChildSessionDemo.view.customers.List",{
        extend: "Ext.grid.Panel",
    
    
        requires: [
            "BindingChildSessionDemo.view.customers.ListController",
            "BindingChildSessionDemo.view.customers.ListModel"
        ],
    
    
        controller: "customers-list",
        viewModel: {
            type: "customers-list"
        },
    
    
        session: true, // Session is on for the grid itself. 
    
    
        reference: 'customerGrid',
    
    
        xtype: 'customergrid',
    
    
        bind:{
            store: '{Customers}'
        },
    
    
        columns:[
            {text: 'Name', dataIndex: 'name', flex: 1},
            {text: 'Phone', dataIndex: 'phone'},
            {
                xtype: 'widgetcolumn',
                width: 90,
                widget:{
                    xtype: 'button',
                    text: 'Edit',
                    handler: 'onEditCustomerClick' // Here's my handler that's triggering the OnEditCustomerClick method of my controller
                }
            }
        ]
    });
    Also, here's the form class that is created during the edit method call:

    Code:
    Ext.define("BindingChildSessionDemo.view.customers.ChildSessionForm",{
        extend: "Ext.panel.Panel",
    
    
        xtype: 'binding-child-session-form',
    
    
        bind:{
            title: '{title}'
        },
        layout: 'fit',
        closable:true,
    
    
        items:{
            xtype: 'form',
            reference: 'form',
            bodyPadding: 10,
            border: false, 
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items:[
                {
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    reference: 'name',
                    msgTarget: 'side',
                    bind: '{theCustomer.name}'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Phone',
                    reference: 'phone',
                    msgTarget: 'side',
                    bind: '{theCustomer.phone}'
                },
            ]
        },
        buttons:[
            {
                text: 'Save',
                handler: 'onSaveClick'
            },
            {
                text: 'Cancel',
                handler: 'onCancelClick'
            }
        ]
    
    
    });

    From what I understood based on the docs and on the kitchen sink example, all I needed to do to make sure the records in the session were shared between the grid and the tab I created was to set the session config to true on the grid and in the tab I create in the controller. Is there something else that I need to do that I missed?

    I didn't enable the session config in my form class (because I assumed that as long as it was enabled on the viewModel used on the form the form didn't need it). Do I need to enable it on the form class too?

  5. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    242
    Answers
    22

    Default

    You want to set session:true on the parent of the two components. Otherwise you're creating two sessions. You can use lookupSession() on the component to see what session is in use:

    http://docs.sencha.com/extjs/5.1/5.1...-lookupSession

    Component w/o a session will ascend to the first ancestor with a session.

    You can use peekRecord to see if a record is in a session.

  6. #5
    Sencha Premium Member CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    118
    Answers
    6

    Default

    Quote Originally Posted by The0s View Post
    You want to set session:true on the parent of the two components. Otherwise you're creating two sessions.
    Ah! Awesome!

    I had session set to true for both the main view and the grid which is one of the child items of that main view. The new tabs that are being created are direct children of this main view as well so it makes sense (if I'm understanding this correctly now) that the session that the tabs are using belong to the main view and not the grid, hence the extra xhr request.

    I left the session config on the main view and removed it from the grid. Now it works and there are no extra requests.

    Thank you for that and also thank you for the ways of seeing the sessions used and seeing if the records are in a particular session. Now that it's working as expected, I'm going to go back and use those tools to look at the differences with the grid session set and with it not set to further understand the concept.

    Thanks!

  7. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    242
    Answers
    22

    Default

    Cheers. Sessions are used to share and isolate Model instances within a given component. This means you can edit the model without the changes being reflected in the ancestor parts of your app, but your siblings will see the changes. I personally rarely use this pattern as i want my models to be the same everywhere in the app, but it's very useful when you do need the isolation.

Similar Threads

  1. Replies: 7
    Last Post: 26 Oct 2015, 5:03 PM
  2. Replies: 1
    Last Post: 9 Sep 2014, 2:17 PM
  3. Load session user into viewModel
    By HriBB in forum Ext 5: Q&A
    Replies: 1
    Last Post: 14 Jun 2014, 5:13 AM
  4. Replies: 4
    Last Post: 16 Feb 2012, 2:36 AM

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
  •