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
    151
    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

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