Results 1 to 2 of 2

Thread: Multiple Checkbox and store data binding

  1. #1
    Sencha User
    Join Date
    Oct 2016
    Posts
    1

    Default Multiple Checkbox and store data binding

    Hi Guys

    I have been trying to bind store data with the checkbox following MVVM pattern. Could you guys please have a look at it.
    I am trying to achieve following result.
    1. Generate checkboxes based on store json data.
    2. Have data binding between store and checkbox properties and values.

    Thanks


    Code:
    lang.json
    
    { success:'true',
      data :[
                    { text:' Extjs', name:'language',  value:'extjs', id:'p1'},
                    { text:' Angular JS', name:'language',  value:'angular', id:'p2'},
                    { text:' ReactJS', name:'language',  value:'react js', id:'p3'},
                    { text:' Jquery, name:'language',  value:'jquery', id:'p4'}
               ]
    }
    Code:
    ViewModel
    
    Ext.create('MyApp.view.LanguageViewModel',{
           extend: 'Ext.app.ViewModel',
          alias: 'viewmodel.language',
    stores : {
        langStore : {
        autoLoad : true,
        fields: ['text', 'name', 'value'],
        proxy : {
            type : 'ajax',
            url : 'lang.json',
            reader : {
                type : 'json',
                root: 'data'
            }
        }
        }
    }
    });

    Code:
    View
    
    Ext.create('MyApp.view.LanguageView',{
        extend:'Ext.panel.Panel',
        
        
        viewmodel:{
            type:'language'
        },
    
        bind{
            store:'{langStore}'
        },
    
        items[{
            xtype:'checkboxgroup',
            items:[
                {
                    xtype:'checkboxfield'
                    bind{
                        name:'{name}',
                        inputValue:'{value}',
                        boxLabel:'{text}'
                    }    
                }    
            ]
            
            
        }]
        
    })

  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    I don't have a solution that does exactly what you are looking for, but I think this is a god start that can be improved upon. It does not bind the individual checkboxfield items to a record. However, it does update base on a datachange event from the store as records are added/removed. If you prefer to also have it update whenever model data is changed, you'll need to relay the update event as well.

    I look forward to seeing how you improve upon this to fit your requirement.

    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

Similar Threads

  1. Replies: 2
    Last Post: 9 Sep 2013, 6:16 AM
  2. Replies: 4
    Last Post: 16 Apr 2012, 6:55 PM
  3. Data binding problem using Ajaxproxy as data store
    By pm.sreejith in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 23 Oct 2011, 9:13 PM
  4. Grid Store Data binding
    By bartolomiew in forum Ext GWT: Discussion
    Replies: 5
    Last Post: 14 Feb 2010, 6:36 PM
  5. Ext.data.XmlReader and CheckBox value binding
    By borillo in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 24 Jun 2008, 9:50 PM

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
  •