1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    9
    Vote Rating
    0
    mfoley is on a distinguished road

      0  

    Default Ext.grid.CheckboxColumn Plugin

    Ext.grid.CheckboxColumn Plugin


    Checkbox Column Plugin creates a grid column that provides:
    - single-click editing of boolean records in a grid-bound data store
    - single-click catch-all toggling of boolean records in a grid-bound data store, via the column header.
    - event listening of grid *click events (cellclick, headerclick)
    - event firing of grid *edit events (validateedit, beforeedit, afteredit)
    - event firing of grid column model "headerchange" event

    Feedback is very welcome!

    Usage:
    Code:
    var ckbxCol = new Ext.grid.CheckboxColumn({dataIndex:'accept'});
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: [
            ckbxCol,
            {header:'Name',dataIndex:'name'}
        ],
        plugins: ckbxCol
    });
    Source:
    PHP Code:
    Ext.grid.CheckboxColumn = function(config){
        
    config.id config.id || 'ck';
        
    config.columnId config.id || 'ck';
        return 
    Ext.applyIf(config||{},{
            
    init:function(grid){
                
    grid.on('cellclick'this.onCellClickthis);
                
    grid.on('headerclick',this.onHeaderClick,this);
                }
            ,
    dataIndex:''
            
    ,header:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'
            
    ,enableHeaderControl:true
            
    ,masterValue:false
            
    ,width:40
            
    ,fixed:true
            
    ,headerUnchecked:'<div class="x-grid3-check-col">&amp;#160;</div>'
            
    ,headerChecked:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'
            
    ,onHeaderClick:function(grid,columnIndex,event){
                var 
    cIndex grid.getColumnModel().getIndexById(this.columnId);
                var 
    column grid.getColumnModel().getColumnById(this.columnId);
                if(
    cIndex == columnIndex && this.enableHeaderControl!==false){
                    var 
    newValue = (typeof column.masterValue == "undefined")?this.masterValue:!column.masterValue;
                    
    column.masterValue newValue
                    var 
    newHeader newValue==true?this.headerChecked:this.headerUnchecked;
                    if(
    column.header != newHeader){
                        
    column.header newValue==true?this.headerChecked:this.headerUnchecked;
                        
    grid.getColumnModel().fireEvent("headerchange",cIndex,newHeader);
                    }
                    
    grid.getView().updateHeaders();
                    if(
    this.dataIndex != ''){
                        var 
    ct grid.getStore().getCount();
                        for(var 
    i=0;i<ct;i++){
                            
    this.toggleCheck(grid,i,columnIndex,newValue);
                        }
                    }
                }
            }
            ,
    onCellClick:function(grid,rowIndex,columnIndex,event){
                var 
    cIndex grid.getColumnModel().getIndexById(this.columnId);
                if(
    cIndex == columnIndexthis.toggleCheck(grid,rowIndex,columnIndex);
            }
            ,
    toggleCheck:function(grid,rowIndex,columnIndex,newValue){
                    var 
    td grid.getView().getCell(rowIndex,columnIndex);
                    var 
    record grid.getStore().getAt(rowIndex);
                    var 
    startValue record.data[this.dataIndex];
                    if(
    this.dataIndex != ''){
                        var 
    newValue newValue||!Ext.fly(td).hasClass('x-grid3-check-col-on');
                        var 
    = {
                            
    gridgrid,
                            
    recordrecord,
                            
    fieldthis.dataIndex,
                            
    valuenewValue,
                            
    originalValuestartValue,
                            
    rowrowIndex,
                            
    columncolumnIndex,
                            
    cancelfalse
                        
    };
                        if(    (
    grid.fireEvent("beforeedit",e)!==false && !e.cancel)&& 
                            (
    grid.fireEvent("validateedit",e)!==false && !e.cancel)){
                                
    record.set(this.dataIndex,newValue);
                                
    delete e.cancel;
                                
    grid.fireEvent("afteredit",e);
                        }
                    }            
            }
            ,
    renderer:function(value,meta,record){
                
    meta.css 'x-grid3-check-col-td x-grid3-check-col';
                if(
    value==true || value=='true' || value=='on' || value==|| value=='1'meta.css += ' x-grid3-check-col-on';
                return 
    '<div class="x-grid3-check-col-inner"> </div>';
            }
        });


  2. #2
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    1
    DigitalSkyline is on a distinguished road

      0  

    Default


    Wow just what I was looking for... Thanks!

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    32
    Vote Rating
    0
    kenshin is on a distinguished road

      0  

    Default


    Great work! :-)

    Is possible to have a live demo?

  4. #4
    Ext User
    Join Date
    Nov 2007
    Posts
    11
    Vote Rating
    0
    mjcon is on a distinguished road

      0  

    Default hmm...something not right

    hmm...something not right


    I've tried this and it's nearly working for me...I have a grid with several checkboxes, and after implementing your code, when I click on any of the checkboxes, all of the others get toggled too (to the reverse of whatever they were showing previously). I lifted your code untouched in place of the code from the "edit-grid.js" example. Any ideas what I may have done wrong?
    Cheers
    Martin

  5. #5
    Ext User
    Join Date
    Sep 2008
    Location
    Sydney, Australia
    Posts
    1
    Vote Rating
    0
    ohhorob is on a distinguished road

      0  

    Default


    Quote Originally Posted by mfoley View Post
    Checkbox Column Plugin creates a grid column that provides:
    - single-click editing of boolean records in a grid-bound data store
    - single-click catch-all toggling of boolean records in a grid-bound data store, via the column header.
    - event listening of grid *click events (cellclick, headerclick)
    - event firing of grid *edit events (validateedit, beforeedit, afteredit)
    - event firing of grid column model "headerchange" event

    Feedback is very welcome!
    Hi mfoley,

    Your plugin works well. I had arrived at a very similar solution after discovering the 'afteredit' mechanism in onEditComplete().

    A quick note for anyone else looking to use this plugin... to turn off the "toggle-all" header, specify your header name, and enableHeaderControl: false in the config passed to the constructor.

    Cheers,

    Rob

  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    7
    Vote Rating
    0
    justincredible is on a distinguished road

      0  

    Question


    Quote Originally Posted by mjcon View Post
    I've tried this and it's nearly working for me...I have a grid with several checkboxes, and after implementing your code, when I click on any of the checkboxes, all of the others get toggled too (to the reverse of whatever they were showing previously). I lifted your code untouched in place of the code from the "edit-grid.js" example. Any ideas what I may have done wrong?
    Cheers
    Martin
    I am having the same issue.

    The columns in my grid are selected dynamically so my grid could end up having multiple checkboxcolumns, only 1 or zero. When a grid is created with only one checkboxcolumn everything is a-okay. If the grid has multiple I start having issues. The first column will act as it is supposed to but every subsequent column will just control the first one. So if I click a checkbox in the 3rd column it will only toggle the checkbox in the 1st column. If I alert the columnIndex it is also giving me that first checkboxcolumn index regardless of which one I am trying to check.

    Here is what my code looks like:

    Code:
    <script type='text/javascript'>                
    Ext.namespace('Ext.ux');                
    Ext.ux.Livegrid = Ext.extend(Ext.ux.grid.livegrid.EditorGridPanel, {                                        
         initComponent : function() {                        
              var bufferedReader = new Ext.ux.grid.livegrid.JsonReader({     
                   root: 'response.value.items',                            
                   versionProperty: 'response.value.version',                            
                   totalProperty: 'response.value.total_count',                            
                   id: 'id'                        
              },
              [
                  {name: 'wid'},
                  {name: 'pid'},
                  {name: 'word'},
                  {name: 'year'},
                  {name: 'dc'},
                  {name: 'used_dc'}
              ]);                                                
              this.store = new Ext.ux.grid.livegrid.Store({                            
                  autoLoad: true,                           
                  bufferSize: 4027,                            
                  reader: bufferedReader,                            
                  url: '/words/data-proxy.php'                        
              });
              this.selModel = new Ext.ux.grid.livegrid.RowSelectionModel();                                         this.view = new Ext.ux.grid.livegrid.GridView({                            
                   nearLimit: 50,                            
                   loadMask: {                                
                        msg : 'Please wait...'                            
                   }                        
              });                                                
              this.bbar = new Ext.ux.grid.livegrid.Toolbar({                            
                   view: this.view,                            
                   displayInfo: true                        
              });
              Ext.ux.Livegrid.superclass.initComponent.call(this);
         }
    });
    
    var dc_CheckColumn = new Ext.grid.CheckboxColumn({
         header: 'dc',
         width: '75px',                                       
         dataIndex: 'dc',                                      
         sortable: true,                                      
         enableHeaderControl: false
    });
    
    var used_dc_CheckColumn = new Ext.grid.CheckboxColumn({
         header: 'used_dc',                                       
         width: '75px',                                       
         dataIndex: 'used_dc',                                      
         sortable: true,                                      
         enableHeaderControl: false
    });    
                                
    var cm = new Ext.grid.ColumnModel([                    
         new Ext.grid.RowNumberer({header : '#' }),
         {                                   
              header: 'wid',                                   
              width: '75px',                                   
              dataIndex: 'wid',                                  
              hidden: true,                                  
              hideable: false,                                  
              sortable: true
         },
         {                                   
              header: 'pid',                                   
              width: '75px',                                  
              dataIndex: 'pid',                                  
              hidden: true,                                  
              hideable: false,                                  
              sortable: true
         },
         {                                   
              header: 'word',                                   
              width: '125px',                                   
              dataIndex: 'word',                                   
              sortable: true,                                  
              editor: new Ext.form.TextField({                                       
                   allowBlank: true,                                       
                   clicksToEdit: 1                                   
              })
         },
         {                                   
              header: 'year',                                   
              width: '75px',                                   
              dataIndex: 'year',                                   
              sortable: true,                                  
              editor: new Ext.form.TextField({                                       
                   allowBlank: true,                                       
                   clicksToEdit: 1                                   
              })
         },
         dc_CheckColumn,
         used_dc_CheckColumn                
    ]);                                                               
    
    var grid = new Ext.ux.Livegrid({                    
         listeners: {                        
              afteredit: function(eventInfo) {                                                        
                   var column = eventInfo.column;
                   var col = cm.getColumnById(column).dataIndex;                            
                   var data = eventInfo.value;                            
                   var store = grid.getStore();                            
                   var rowData = store.getAt(eventInfo.row);                            
                   var wordID = rowData.get('wid');                            
                   var pubID = rowData.get('pid');                                                        
                   var opt = {                                
                        method: 'post',                                
                        asynchronous: true,                                
                        parameters: { 
                             action: 'edit-record', 
                             column: col, 
                             value: data, 
                             wid: wordID, 
                             pid: pubID 
                        },
                        evalScripts: true                            
                   }                                                        
                   new Ajax.Updater('query','/words/words.php',opt);                        
              }                    
         },                    
         enableDragDrop: false,                    
         cm: cm,                    
         loadMask: {
              msg : 'Loading...'
         },                    
         title: '',
         renderTo: 'content',
         plugins: [dc_CheckColumn,used_dc_CheckColumn]
    });                                
    
    results = new Ext.Window({
         title: 'Results',
         maximizable: false,
         constrain: true,
         closable: true,
         collapsible: true,
         closeAction: 'hide',
         plain: true,
         resizable: true,
         layout: 'fit',
         items: grid,
         width: 1200,
         height: 600,
         tbar: new Ext.Toolbar({                        
         items : [                            
              new Ext.Button({                                
                   text : 'Export to Excel',                                
                   iconCls: 'excel-button',                                
                   handler: function(){                                    
                        window.open('/words/words.php?action=export-to-excel');                                
                   }                            
              })                        
         ]                   
    })                
    
    });   
                                
    results.show();                            
    </script>
    Any ideas?

  7. #7
    Sencha User
    Join Date
    Apr 2008
    Posts
    26
    Vote Rating
    0
    Drakkhen is on a distinguished road

      0  

    Default


    I have the same problem : everything is fine with one checkbox, but not when there is more.
    Does anyone have a solution ?

  8. #8
    Ext User
    Join Date
    Dec 2008
    Posts
    7
    Vote Rating
    0
    justincredible is on a distinguished road

      0  

    Default


    Quote Originally Posted by Drakkhen View Post
    I have the same problem : everything is fine with one checkbox, but not when there is more.
    Does anyone have a solution ?
    Have you had any luck?

  9. #9
    Ext User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    weelillad is on a distinguished road

      0  

    Default


    I have found a solution for more than one column of checkboxes. It involves modifying the original code slightly:

    Code:
    Ext.grid.CheckboxColumn = function(config){
     
    config.id = config.id || 'ck';
     
    config.columnId = config.id || 'ck';
     
       return Ext.applyIf(config||{},{
     
    init:function(grid){
     
    grid.on('cellclick', this.onCellClick, this);
     
    grid.on('headerclick',this.onHeaderClick,this);
     
               }
     
           ,dataIndex:''
     
    ,header:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'
     
    ,enableHeaderControl:true
     
    ,masterValue:false
     
    ,width:40
     
    ,fixed:true
     
    ,headerUnchecked:'<div class="x-grid3-check-col">&amp;#160;</div>'
     
    ,headerChecked:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'
     
    ,onHeaderClick:function(grid,columnIndex,event){
     
               var cIndex = grid.getColumnModel().getIndexById(this.columnId);
     
               var column = grid.getColumnModel().getColumnById(this.columnId);
     
               if(cIndex == columnIndex && this.enableHeaderControl!==false){
     
                   var newValue = (typeof column.masterValue == "undefined")?this.masterValue:!column.masterValue;
     
    column.masterValue = newValue; 
     
                   var newHeader = newValue==true?this.headerChecked:this.headerUnchecked;
     
                   if(column.header != newHeader){
     
    column.header = newValue==true?this.headerChecked:this.headerUnchecked;
     
    grid.getColumnModel().fireEvent("headerchange",cIndex,newHeader);
     
                   }
     
    grid.getView().updateHeaders();
     
                   if(this.dataIndex != ''){
     
                       var ct = grid.getStore().getCount();
     
                       for(var i=0;i<ct;i++){
     
    this.toggleCheck(grid,i,columnIndex,newValue);
     
                       }
     
                   }
     
               }
     
           }
     
           ,onCellClick:function(grid,rowIndex,columnIndex,event){
     
    var cm = grid.getColumnModel();
               var colId = cm.getColumnId(columnIndex);
               var colConfig = cm.getColumnById(colId);
               if (colConfig.headerUnchecked == '<div class="x-grid3-check-col">&amp;#160;</div>') // check if the column is a CheckboxColumn, by looking for unique var/value
                   this.toggleCheck(grid, rowIndex, columnIndex);
    
            }
     
            ,toggleCheck:function(grid,rowIndex,columnIndex,newValue){
     
    var cm = grid.getColumnModel();
                   var colId = cm.getColumnId(columnIndex);
                   var colConfig = cm.getColumnById(colId);
                    
    var td = grid.getView().getCell(rowIndex,columnIndex);
     
                   var record = grid.getStore().getAt(rowIndex);
     
                   var startValue = record.data[colConfig.dataIndex];
     
                   if(this.dataIndex != ''){
     
                       var newValue = newValue||!Ext.fly(td).hasClass('x-grid3-check-col-on');
     
                       var e = {
     
    grid: grid,
     
    record: record,
     
    field: colConfig.dataIndex,
     
    value: newValue,
     
    originalValue: startValue,
     
    row: rowIndex,
     
    column: columnIndex,
     
    cancel: false
     
    };
     
                       if(    (grid.fireEvent("beforeedit",e)!==false && !e.cancel)&& 
     
                           (grid.fireEvent("validateedit",e)!==false && !e.cancel)){
     
    record.set(colConfig.dataIndex,newValue);
     
    delete e.cancel;
     
    grid.fireEvent("afteredit",e);
     
                       }
     
                   }            
     
           }
     
           ,renderer:function(value,meta,record){
     
    meta.css = 'x-grid3-check-col-td x-grid3-check-col';
     
               if(value==true || value=='true' || value=='on' || value==1 || value=='1') meta.css += ' x-grid3-check-col-on';
     
               return '<div class="x-grid3-check-col-inner"> </div>';
     
           }
     
       });
     
    }
    Please feel free to improve upon this.

  10. #10
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    167
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Is this working with 3.3.x?
    Or somebody knows a similar extension for 3.3.x?

    Thanks and Greetings,
    Urkman