Ext.ux.CheckList

[joku]

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]

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]

I think if you make the template a configurable property, you can easily customize the way checkboxes are rendered.

[fredarters]

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