PDA

View Full Version : Ext.ux.CheckList



joku
7 May 2008, 11:02 AM
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:


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:


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);

chalu
15 May 2008, 2:56 AM
I wanted to build something like this, but decided to do a search first. It would be 'more complete' if we could have the ability to configure these :

1. how the check boxes are positioned, either horizontally or vertically or allow 'a default'.
2. a minimum and maximum selection option so that the user can be constrained when required
3. a check all / un-check all option as one of the options instead of external buttons.

Thanks again, this is very useful.

durlabh
15 May 2008, 7:01 AM
I think if you make the template a configurable property, you can easily customize the way checkboxes are rendered.

fredarters
21 Jan 2013, 3:17 PM
Since I still dont see a check list for ExtJs... I recently used this. Thanks.

I was missing a tie in to have the checked fields update the checked value in the store though.. accomplished this by adding:



listeners: {
click: function(view, index, node, event) {
var r = view.store.getAt(index);
r.set(this.checkField, node.checked);
r.commit();
}
},


To the CheckList definition. Worked like a champ.

-Fred