PDA

View Full Version : What's the best way to add checkboxfield to xtype list?



kerdosa
2 May 2012, 6:49 AM
Hi,

I want to add the checkbox field to the list based on the model field. My model has two fields.
fields: [
{name: 'Name', type: 'string'},
{name: 'checked', type: 'boolean'},
]
I successfully displayed the checkbox in the list view by using DataItem and useComponents property. The check/uncheck works OK. But when new filter is set to the model store, then the list items are changed, the checkbox status does not reflect the value of model correctly. Any idea how to reflect the checkbox status when the list items are changed?

mitchellsimoens
4 May 2012, 5:51 AM
How are you creating the dataitem?

kerdosa
4 May 2012, 6:09 AM
Thank you for response. This is a full code that creates a data item, I followed the kiva example. It draws the checkbox correctly when I set the data to the store. The problem is when the items list are changed by search, the checkbox does not follow. When the store filter is changed, the updateChecked() is not get called.



Ext.define('MyApp.view.RecordsListItem', {
extend: 'Ext.dataview.component.DataItem',
xtype : 'recordslistitem',


config: {
dataMap: {
getName: {
setHtml: 'Name'
},
getSelectedField: {
setHtml: 'selectedField'
},
getChecked: {
// setHtml: 'checked'
setHtml: ''
},
},


cls: Ext.baseCSSPrefix + 'list-item',


name: {
cls: 'xx-name',
// docked: 'left',
width: 200,
// width: '25%',
style: {
display: 'inline-block',
'overflow-x': 'hidden',
'text-overflow':'ellipsis',
'text-wrap': 'none',
'margin-right': '20px'
}
},
selectedField: {
cls: 'xx-selected-field',
width: 300,
// width: '35%',
style: {
display: 'inline-block',
'overflow-x': 'hidden',
'text-overflow':'ellipsis',
'text-wrap': 'none',
'margin-right': '20px'
}
},
checked: {
// baseCls: 'x-list',
cls: 'xx-checked',
docked: 'right',
// value: '',
width: 100
},


layout: {
type: 'vbox',
pack: 'center'
}
},


applyName: function(config) {
return Ext.factory(config, Ext.Component, this.getName());
},


updateName: function(newName) {
if (newName) {
this.add(newName);
}
},


applySelectedField: function(config) {
return Ext.factory(config, Ext.Component, this.getSelectedField());
},


updateSelectedField: function(newSelectedField) {
if (newSelectedField) {
this.add(newSelectedField);
}
},


applyChecked: function(config) {
console.log('applyChecked');
// window.item = this;
// window.config = config;
// console.log(this); // item element
// console.log(this.getChecked() ); // checked component
var data = this.getRecord().getData();
if (data.checked)
config['checked'] = true;
else
config['checked'] = false;
return Ext.factory(config, Ext.field.Checkbox, this.getChecked());
// return Ext.factory(config, Ext.field.Checkbox, '');
},


updateChecked: function(newChecked) {
console.log('updateChecked');
// console.log(this); // item element
// console.log(newChecked); // checked component
if (newChecked) {
this.add(newChecked);
}
},


});