I'm using EXJjs. I have a form with some checkbox group, this form is used to register a user and is send in json format. Everything is fine at this point, when I'm going to update this information, I retrieve all info (name, lastname, id, address) but I cannot set the checkbox as checked if the value is set inside the json, there values are "client" and "provider".
<script>
Ext.define('contactosModel',{
extend: 'Ext.data.Model',
fields: [
{name:'name', type:'string'},
{name:'identification', type:'string'},
{name:'phonePrimary', type:'string'},
],
});
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: 'xxxxxxxxxxxxxxxxxxxx,
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 xxxxxxxxx'
}
}
});
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: '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',
},{
xtype: 'checkboxgroup',
// Arrange checkboxes into two columns, distributed vertically
columns: 1,
name: 'type[]',
vertical: true,
baseParams:{
routine:'getInfo'
},
items: [
{ boxLabel: 'Cliente', inputValue: 'client' },
{ boxLabel: 'Proveedor', inputValue: 'provider' },
],
},]
}],
// 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()
});
</script>
my checkbox group name is "type" and is an array of string, see below.