Here's a checklist that ties to and auto updates your store. It could use some work, but it satisfies my current needs. If you have requests or updates, just let me know and I'll add em in.
Here's the demo: http://www.freewebs.com/jokurocks/checklist.html
Here's how to use it:
PHP Code:
var myData = [
[true,'Item1'],
[true,'Item2'],
[false,'Item3'],
[true,'Item4'],
[false,'Item5'],
[true,'Item6']
];
var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({},
[{name: 'checked'},{name: 'item'}])
});
ds.loadData(myData);
document.myCheckList = new Ext.ux.CheckList({
store: ds,
mode: 'local',
checkField: 'checked',
displayField: 'item',
trueValue: true, //value to set for checkField when item is checked
falseValue: false, //value to set for checkField, when item is unchecked
autoScroll: true,
renderTo: 'checklist1',
listeners:{
click: function(view,index,node,event){
var r = view.store.getAt(index);
alert(r.data.item + ' was ' + (node.checked ? 'checked' : 'unchecked'));
}
}
});
Here's the extension code:
PHP Code:
Ext.ux.CheckList = Ext.extend(Ext.DataView,{
itemSelector: 'input.x-checklist',
checkField: 'Checked',
displayField: '',
trueValue: true,
falseValue: false,
modifyCheckOnAll: function(boolValue){//value is a boolean
this.store.each(
function(record){
record.data[this.checkField] = boolValue ? this.trueValue : this.falseValue;
});
var compositeEl = Ext.select(this.itemSelector);
if(compositeEl){
compositeEl.each(function(el){el.dom.checked=boolValue;});
}
},
checkAll: function(){
this.modifyCheckOnAll(true);
},
uncheckAll: function(){
this.modifyCheckOnAll(false);
},
initComponent: function(){
this.tpl = new Ext.XTemplate(
'<tpl for="."><div><input type="checkbox" class="x-checklist" style="margin-right:2px;" {[ values.' + this.checkField + '==' + this.trueValue + '? "checked" : ""]} />{' + this.displayField + '}</div></tpl>',
{
checkField: this.checkField,
trueValue: this.trueValue,
displayField: this.displayField
});
Ext.ux.CheckList.superclass.initComponent.call(this);
}
});
Ext.reg('checklist', Ext.ux.CheckList);