Results 1 to 6 of 6

Thread: How can i set checked a checkbox group after store loads

  1. #1

    Default How can i set checked a checkbox group after store loads

    Hello friends, im searching some help here, i have a form with some text fields and a checkbox group. This form should be populated with information from a server, i can populate the text fields but i dont have a clue how to set this checkbox as checked after the store is load with the information.

    this is the code
    Code:
    Ext.define('Address',{
        extend: 'Ext.data.Model',
        fields:['address','city']
        });
    
    
    
    
    Ext.define('contactosModel',{
        extend: 'Ext.data.Model',
        fields: [
                 {name:'name', type:'string'},
                 {name:'identification', type:'string'},
                {name:'addresss', mapping: 'address.address'},
                 {name:'city', mapping: 'address.city'},
                 {name:'phonePrimary', type:'string'},
                 {name:'observations', type:'string'},
                 ],
                 hasMany:[
                          {model:'Address', name: 'address'},               
                          ]
        });    
    
    
    
    
    var getUrl = location.href;
    var finall = getUrl.substr(getUrl.lastIndexOf('/') + 1);
    var id = finall;
    
    
    var store = Ext.create('Ext.data.Store', {
        model: 'contactosModel',
        autoLoad: true,
        proxy: {        
            type: 'rest',
            url:  'https://app.alegra.com/api/v1/contacts/' + id ,
            method: 'GET',
            pageParam: false, //to remove param "page"
            startParam: false, //to remove param "start"
            limitParam: false, //to remove param "limit"
            noCache: false, 
            reader: {
                type: 'json',
                //rootProperty: 'data',
                },
            headers: {
                Accept : 'application/json',
                Authorization: 'Basic xxxxxxxxxxxxxx'
                    }                
            }
        });
    
    
        
            
        Ext.create('Ext.form.Panel', {
            standardSubmit: true,
            bodyPadding: 5,
            width: 900,
    
    
            // The form will submit an AJAX request to this URL when submitted
            url: 'http://localhost/zender/public/index/update/id/' + id,
    
    
            // Fields will be arranged vertically, stretched to full width
            layout: 'column',
            defaults: {
                anchor: '100%'
            },
            layout: {
                type: 'vbox',
                align: 'center',
            },
            style: 'margin:0 auto;margin-top:40px;margin-bottom:15px;',
    
    
            // The fields
            //defaultType: 'textfield',
            items: [{
                xtype: 'form',
                border: false,
                items:[{                
                    fieldLabel: 'Nombre*',
                    name: 'name',
                    xtype: 'textfield',
                    allowBlank: false,
                    minLength: 3,
                    minLengthText: 'Debe contener un minimo de tres caracteres',
                    maxLength: 20,
                    maxLengthText: 'Debe contener un maximo de veinte caracteres',
                    vtype: 'alphanum',
                    msgTarget : 'side',
                    blankText: 'Debes colocar el nombre',
                    
                },{
                    fieldLabel: 'identificacion',
                    name: 'identification',
                    maskRe: /([0-9a-zA-Z])/,
                    allowBlank: true,
                    xtype: 'textfield',
                    vtype: 'alphanum',
                    msgTarget : 'side',
                    minLength: 4,
                    minLengthText: 'Debe contener un minimo de cuatro caracteres',
                    maxLength: 10,
                    maxLengthText: 'Debe contener un maximo de diez caracteres',
                },{
                    fieldLabel: 'Direccion',
                    name: 'addresss',
                    maskRe: /([0-9a-zA-Z\s])/,
                    allowBlank: true,
                    xtype: 'textfield',
                    msgTarget : 'side',
                    minLength: 4,
                    minLengthText: 'Debe contener un minimo de cuatro caracteres',
                    maxLength: 20,
                    maxLengthText: 'Debe contener un maximo de veinte caracteres',
                },{
                    fieldLabel: 'Ciudad',
                    name: 'city',
                    maskRe: /([a-zA-Z\s])/,
                    allowBlank: true,
                    xtype: 'textfield',
                    msgTarget : 'side',
                    minLength: 4,
                    minLengthText: 'Debe contener un minimo de cuatro caracteres',
                    maxLength: 20,
                    maxLengthText: 'Debe contener un maximo de veinte caracteres',
                },{
                    fieldLabel: 'Correo Electronico',
                    name: 'email',
                    xtype: 'textfield',
                    allowBlank: true,
                    width: 400,
                    msgTarget : 'side',
                    vtype: 'email'
                },{
                    fieldLabel: 'Telefono 1',
                    name: 'phonePrimary',
                    allowBlank: true,
                    xtype: 'textfield',
                    maskRe: /[0-9.]/,
                    minLength: 7,
                    msgTarget : 'side',
                    minLengthText: 'Debe contener un minimo de 7 numeros',
                    maxLength: 20,
                    maxLengthText: 'Debe contener un maximo de veinte numeros',
                },{
                    fieldLabel: 'Telefono 2',
                    name: 'phoneSecondary',
                    allowBlank: true,
                    xtype: 'textfield',
                    maskRe: /[0-9.]/,
                    minLength: 7,
                    msgTarget : 'side',
                    minLengthText: 'Debe contener un minimo de 7 numeros',
                    maxLength: 20,
                    maxLengthText: 'Debe contener un maximo de veinte numeros',
                },{
                    fieldLabel: 'Fax',
                    name: 'fax',
                    allowBlank: true,
                    xtype: 'textfield',
                    maskRe: /[0-9.]/,
                    msgTarget : 'side',
                    minLength: 7,
                    minLengthText: 'Debe contener un minimo de 7 numeros',
                    maxLength: 20,
                    maxLengthText: 'Debe contener un maximo de veinte numeros',
                },{
                    fieldLabel: 'Celular',
                    name: 'mobile',
                    allowBlank: true,
                    xtype: 'textfield',
                    msgTarget : 'side',
                    maskRe: /[0-9.]/,
                    minLength: 7,
                    minLengthText: 'Debe contener un minimo de 7 numeros',
                    maxLength: 20,
                    maxLengthText: 'Debe contener un maximo de veinte numeros',
                },{
                    xtype: 'checkboxgroup',
                    // Arrange checkboxes into one columns, distributed vertically
                    columns: 1,
                    name: 'type[]',
                    vertical: true,
                    baseParams:{                        
                        routine:'getInfo'
                    },
                    items: [
                        { boxLabel: 'Cliente', inputValue: 'client' },
                        { boxLabel: 'Proveedor', inputValue: 'provider' },
                    ],        
                    
                },{
                    xtype: 'textareafield',
                    fieldLabel: 'Observaciones',
                    name: 'observations',
                    maskRe: /([a-zA-Z\s])/,
                    allowBlank: true,
                    maskRe: /([0-9a-zA-Z\s])/,
                    minLength: 7,
                    minLengthText: 'Debe contener un minimo de siete caracteres',
                    msgTarget : 'side',
                    maxLength: 50,
                    maxLengthText: 'Debe contener un maximo de cincuenta caracteres',
                }]
            }],
    
    
            // Reset and Submit buttons
            buttons: [{
                text: 'Borrar todo',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Actualizar',
                formBind: true, //only enabled once the form is valid
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            jsonData: Ext.JSON.encode(form.getValues()),
                            success: function(form, action) {
                               Ext.Msg.alert('Success', action.result.msg);
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert('Failed', action.result.msg);
                            }
                        });
                    }
                }
            }],
            listeners: {
                afterrender: function (component, eOpts) {
                    var myStore = Ext.getStore(store);
                    myStore.load({
                        callback: function (records, operation, success) {
        
    
                            component.down('form').loadRecord(myStore.last());
        
                            console.log(myStore.data);
                        }
                    });
                    }
            },
            renderTo: Ext.getBody()
        });
    and this is the json i get from server

    Code:
    • address:{address: "El bosque ", city: "Valencia"}
    • email:"[email protected]"
    • fax:"41789654"
    • id:"2"
    • identification:"ADF154"
    • mobile:"4215896"
    • name:"Carolina"
    • observations:"Comprador de productos lacteos"
    • phonePrimary:"141569879"
    • phoneSecondary:"4563217"
    • type:["client", "provider"]

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Can you use the setValue() method?
    http://docs.sencha.com/extjs/4.2.6/#...ethod-setValue

  3. #3

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    Thanks for the answer Gary,can you please give me some example,i dont have very clear the mapping thing.i'm kinf of newbie with extjs

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    The example on the doc page to which I linked is the only one I know of off hand.
    http://docs.sencha.com/extjs/4.2.6/#...ethod-setValue

  5. #5

    Default

    thanks Gary let me try, also do you know how to do the same but with a combobox? i mean to set a specific option after the store loads?

  6. #6

    Default

    this is how i solve it

    Code:
    {
                    xtype: 'checkboxgroup',
                    // Arrange checkboxes into one columns, distributed vertically
                    id: 'tipo',
                    columns: 1,
                    vertical: true,
                    baseParams:{                        
                        routine:'getInfo'
                    },
                    items: [
                        { boxLabel: 'Cliente', inputValue: 'client',name:'type' },
                        { boxLabel: 'Proveedor', inputValue: 'provider',name:'type' },
                    ],        
                    
                },
    but now i have a problem, when i try to update the information and i have both client and provider checkbox as checked, the json that is send just put the last checkbox inside it, this means the provider checkbox.

    This is the result of change the type[] name for just type. do you have any idea how to solve this and save both inside an array of string?

Similar Threads

  1. Set as checked a checkbox from store Ask
    By ignachiou in forum Ext JS 6.x Q&A
    Replies: 0
    Last Post: 25 Mar 2017, 12:51 PM
  2. Replies: 1
    Last Post: 27 Aug 2012, 12:19 PM
  3. Checkbox Tree Child nodes not checked When parent checked
    By mgarn in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 6 Jan 2012, 8:33 AM
  4. Checkbox group checked with load values
    By scopus in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 21 Sep 2010, 3:10 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
  •