1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    60
    Vote Rating
    1
    joku is on a distinguished road

      0  

    Default Ext.ux.CheckList

    Ext.ux.CheckList


    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({
            
    storeds,
            
    mode'local',
            
    checkField'checked',
            
    displayField'item',
            
    trueValuetrue//value to set for checkField when item is checked
            
    falseValuefalse//value to set for checkField, when item is unchecked        
            
    autoScrolltrue,
            
    renderTo'checklist1',
            
    listeners:{
                        
    click: function(view,index,node,event){
                                var 
    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'',
              
    trueValuetrue,
              
    falseValuefalse,
            
              
    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>',
                { 
                  
    checkFieldthis.checkField,
                  
    trueValuethis.trueValue,
                  
    displayFieldthis.displayField
                
    });

          
    Ext.ux.CheckList.superclass.initComponent.call(this);
        }
    });
    Ext.reg('checklist'Ext.ux.CheckList); 

  2. #2
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Thumbs up Very Good

    Very Good


    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    3
    Vote Rating
    0
    fredarters is on a distinguished road

      0  

    Default I know this is old...

    I know this is old...


    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:

    Code:
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi