Results 1 to 5 of 5

Thread: Bind radiogroup to ViewModel

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    150
    Answers
    2
    Vote Rating
    19
      1  

    Default Bind radiogroup to ViewModel

    Still digging in the documentation for the MVVM stuff.

    I had hard time populating radio group from my viewmodel. It appears that the radio group cannot consume normal values, instead it needs an object.

    Came to this kind of solution:
    PHP Code:
    {
        
    xtype'radiogroup',
        
    fieldLabel'Type',
    ///////////
        
    bind: {
            
    value: {customer_type'{customer_type}'}
        },
    ///////////
        
    items: [
            {
                
    xtype'radiofield',
                
    boxLabel'Property',
                
    inputValue'2',
                
    name'customer_type'
            
    },
            {
                
    xtype'radiofield',
                
    boxLabel'Management Company',
                
    inputValue'1',
                
    name'customer_type'
            
    }
        ]
    }, 
    Do you think this is the appropriate way to do it?

    Thanks

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,307
    Answers
    3992
    Vote Rating
    1478
      1  

    Default

    This is working for me:

    Code:
    new Ext.form.RadioGroup({
        renderTo  : Ext.getBody(),
        viewModel : {
            data : {
                customer_type : '2'
            }
        },
        bind : {
            value : {
                customer_type : '{customer_type}'
            }
        },
        items     : [
            {
                boxLabel   : 'Property',
                inputValue : '2',
                name       : 'customer_type'
            },
            {
                boxLabel   : 'Management Company',
                inputValue : '1',
                name       : 'customer_type'
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium User
    Join Date
    Feb 2012
    Posts
    73
    Answers
    1
    Vote Rating
    46
      2  

    Default

    I have put together this little fiddle for binding a radiogroup to a boolean property on a viewmodel.


  4. #4
    Sencha Premium Member
    Join Date
    Sep 2015
    Location
    UK
    Posts
    22
    Vote Rating
    0
      0  

    Default Ext JS 6 - Classic - Binding checkbox within checkbox group to record via viewModel

    I had a similar issue trying to bind boolean value from a record to a number of checkboxes which were part of a checkbox group config. I was struggling to directly bind the checkboxes to the record which was set in the ViewModel of the form the checkbox was an item in. What finally worked for me was binding the checkboxgroup to the record , and then further bind the individual checkboxes to the record's specific property.


    Code:
    Ext.define('MyApp.view.checklist.Checklist', {
        extend: 'Ext.form.Panel',
        xtype: 'checklist',
    
    
        viewModel: {
            type: 'checklist'
        },
    
    items: [{       
                xtype: 'checkboxgroup',
                fieldLabel: 'Sunday',
                row: 1,
                vertical: false,
                bind: {
                    value: '{record.grocery}'
                },
                listeners: {
                    change: 'onCheckBoxChange'
                }, 
                items: [
                    { name: 'apples', bind: '{record.grocery.apples}'},
                    { name: 'milk', bind: '{record.grocery.milk}'},
                    { name: 'bread', bind: '{record.grocery.bread}'},
                    { name: 'tea', bind: '{record.grocery.tea}'}
                ]
            }]
    });

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    239
    Answers
    3
    Vote Rating
    71
      0  

    Default

    I don't know if in the older versions this works as well, but the key thing was to set simpleValue: true for the radio group.See this fiddle: https://fiddle.sencha.com/#fiddle/2lc6&view/editor.

    Code:
    Ext.define('MainViewModel', {
        extend: 'Ext.app.ViewModel',
        alias: 'viewmodel.mainviewmodel',
        constructor: function ()
        {
            var me = this;
            me.callParent(arguments);
    
    
            me.bind('{radioValue2}', function (value) {
                console.log(value);
            });
        },
        data: {
            myRecord: {
                isOptedIn: true,
                firstName: 'Fou',
                lastName: 'Barr'
            },
    
    
            radioValue2: null
        }
    });
    
    
    Ext.application({
        name: 'Fiddle',
    
    
        launch: function() {
    
    
            new Ext.container.Container({
                renderTo: Ext.getBody(),
    
    
                viewModel: {
                    type: 'mainviewmodel'
                },
    
    
                items: [{
                    xtype: 'radiogroup',
                    // This just provides a formula to convert the boolean
                    // value into the 'key:value' object shape expected by
                    // the RadioGroup
                    // viewModel: {
                    //     formulas: {
                    //         radioValue: {
                    //             // myRecord is inherited from the parent viewModel
                    //             bind: '{myRecord.isOptedIn}',
                    //             get: function(value) {
                    //                 return {
                    //                     isOptedIn: value
                    //                 };
                    //             },
                    //             set: function(value) {
                    //                 this.set('myRecord.isOptedIn', value.isOptedIn);
                    //             }
                    //         }
                    //     }
                    // },
                    bind: {
                        value: '{radioValue2}'
                    },
                    simpleValue: true,
                    // defaults: {
                    //     name: 'isOptedIn'
                    // },
                    fieldLabel: 'Subscribe?',
                    items: [{
                        boxLabel: 'Yes please',
                        inputValue: true,
                    }, {
                        boxLabel: 'No thanks',
                        inputValue: false,
                    }]
                }, {
                    xtype: 'displayfield',
                    fieldLabel: 'User opted in?',
                   // bind: '{myRecord.isOptedIn}'
                    bind: {
                     value:   '{radioValue2}'
                    }
                }]
            });
        }
    });

Posting Permissions

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