PDA

View Full Version : How can i set checked a checkbox group after store loads



ignachiou
5 Apr 2017, 7:40 AM
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


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





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

Gary Schlosberg
5 Apr 2017, 3:11 PM
Can you use the setValue() method?
http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.form.CheckboxGroup-method-setValue

ignachiou
5 Apr 2017, 3:29 PM
Can you use the setValue() method?
http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.form.CheckboxGroup-method-setValue

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

Gary Schlosberg
5 Apr 2017, 3:52 PM
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/#!/api/Ext.form.CheckboxGroup-method-setValue

ignachiou
5 Apr 2017, 4:54 PM
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?

ignachiou
5 Apr 2017, 7:15 PM
this is how i solve it



{
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?