Results 1 to 3 of 3

Thread: ViewModel Formula: Primary Record Edits

  1. #1
    Sencha User
    Join Date
    Jul 2016
    Posts
    15

    Default ViewModel Formula: Primary Record Edits

    In this situation I want to recreate, there is one Ext.data.Model record that serves as the main source of info for the view. It has levels and levels of stores of Models in the hierarchy. For simplicity, I mocked two. There are instances where we want to only display the contents of a single record in a form and edit that one record on those fields.

    I want to bind the fields in such a way that if this "Primary" record is edited somewhere else not specified under that name, it would reflect on the fields that have the bindings specific to that record.

    Is this possible? How would one write the set methods for those formulas?
    (Guessing I have to call notify manually)

    Here is what I have imagined so far. I only got it working to a point. Not the best way of doing things, but only POC.
    Code:
    Ext.define('Address', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'address_one',  type: 'string'},
            {name: 'address_two',  type: 'string'},
            {name: 'type',   type: 'string'}
        ]
    });
    
    
    Ext.define('User', {
        extend: 'Ext.data.Model',
        requires: ['Address'],
        fields: [
            {name: 'name',  type: 'string'},
            {name: 'age',   type: 'int', convert: null},
            {name: 'phone', type: 'string'},
            {name: 'alive', type: 'boolean', defaultValue: true, convert: null}
        ],
        hasMany: [{
            name: "addresses",
            model: "Address"
        }]
    });
    
    
    Ext.define('UserModel', {
        extend: 'Ext.app.ViewModel',
    
    
        data: {
            user: null
        },
        
        formulas: {
            name: {
                get: function(get){
                    return get('user').get('name');
                },
                set: function(value){
                    get('user').set('name',value);
                }
            },
            age: {
                get: function(get){
                    return get('user').get('age');
                },
                set: function(value){
                    get('user').set('age',value);
                }
            },
            primaryAddress: {
                get: function(get){
                    var user = get('user');
                    return user.getAddresses().getAt(0);
                }
            },
            primaryAddressOne: {
                get: function(get){
                    return get('primaryAddress').get('address_one');
                },
                set: function(value){
                    
                }
            },
            primaryAddressTwo: {
                get: function(get){
                    return get('primaryAddress').get('address_two');
                },
                set: function(value){
                    
                }
            },
            primaryAddressType: {
                get: function(get){
                    return get('primaryAddress').get('type');
                },
                set: function(value){
                    
                }
            }
        }
    });
    
    
    Ext.define('MyViewController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.myvc',
        onUserLoad: function(btn, e, eOpts) {
            this.getViewModel().linkTo('user', {
                type: 'User',
                id: 0
            })
        },
        onUserSave: function(btn, e, eOpts) {
            this.getViewModel().get('user').save({
                callback: function(record) {
                    console.log( record )
                }
            })
        }
    })
    
    
    Ext.define('MyForm', {
        extend: 'Ext.form.Panel',
        alias: 'widget.myform',
        title: 'Simple Form',
        controller: 'myvc',
        defaultType: 'textfield',
    
    
        items: [{
            fieldLabel: 'Name',
            bind: '{firstName}' // uses "test" ViewModel from parent
        },{
            fieldLabel: 'Age',
            bind: '{lastName}'
        },{
            fieldLabel: 'Primary Address 1',
            bind: '{primaryAddressOne}'
        },{
            fieldLabel: 'Primary Address 2',
            bind: '{primaryAddressTwo}'
        },{
            fieldLabel: 'Primary Address Type',
            bind: '{primaryAddressType}'
        }]
    });
    
    
    Ext.application({
        name : 'Fiddle',
        launch : function() {
            var user = Ext.create("User",{
                name: "FName LName",
                age: 20,
                phone: "",
                alive:true,
                addresses:[{
                    address_one: "info1",
                    address_two: "info2",
                    type: "P"
                },{
                    address_one: "info3",
                    address_two: "info4",
                    type: "S"
                }]
            });
            
            var vm = Ext.create('UserModel', {});
            
            vm.setData({user:user});
            
            try{
                Ext.create('MyForm', {
                    viewModel: vm,
                    renderTo: document.body,
                    width: 400
                });
            }catch(e){
                alert(e);
            }
            
            alert("Finished");
        }
    });

  2. #2
    Sencha User
    Join Date
    Jul 2016
    Posts
    15

    Default Thread Error

    I edited my initial post and now it is missing all content. What did I do?

  3. #3
    Sencha User
    Join Date
    Jul 2016
    Posts
    15

    Default Fiddle Added

    60+ views and no ideas. Dang.
    Here's a Fiddle if someone wants to play with it.
    https://fiddle.sencha.com/#view/editor&fiddle/1pfe

Similar Threads

  1. [FIXED] store undefined while loading in a viewmodel formula
    By pscanlon1 in forum Ext 5: Bugs
    Replies: 4
    Last Post: 15 Sep 2016, 7:24 AM
  2. Replies: 3
    Last Post: 4 May 2016, 10:12 PM
  3. Calling superclass formula in ViewModel
    By valio in forum Ext 5: Q&A
    Replies: 1
    Last Post: 28 Jul 2015, 7:55 AM
  4. Replies: 1
    Last Post: 1 Apr 2015, 6:24 PM

Posting Permissions

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