Hybrid View

  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default Grid row checking independent of selection

    Grid row checking independent of selection


    There are use cases when row selection and row checking are two seperate, independent operations.

    One example is a mail client.

    The selected row might be opened in a preview pane.

    You might still be able to check multiple rows to delete, or move, or otherwise operate upon without changing the selection.

    Ext.ux.GridRowChecker is a Grid plugin which offers this.

    Drop the code below into examples/grid as array-grid.js. It adds Record[] checkChecked(), void checkAll() and void uncheckAll() to its client GridPanel.

    Code:
    Ext.onReady(function(){
    
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ];
    
        // example of custom renderer function
        function change(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        // example of custom renderer function
        function pctChange(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '%</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // create the data store
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        });
        store.loadData(myData);
        
        Ext.ux.GridRowChecker = Ext.extend(Object, {
    	    header: "",
    	    width: 23,
    	    sortable: false,
    	    fixed: true,
    	    menuDisabled: true,
    	    dataIndex: '',
       		id: 'selection-checkbox',
    	    rowspan: undefined,
    
        	init: function(grid) {
        		this.grid = grid;
        		this.gridSelModel = this.grid.getSelectionModel();
        		this.gridSelModel.originalMouseDown = this.gridSelModel.handleMouseDown;
    			this.gridSelModel.handleMouseDown = this.onGridMouseDown;
        		grid.getColumnModel().config.unshift(this);
        		grid.getChecked = this.getChecked.createDelegate(this);
        		grid.checkAll = this.checkAll.createDelegate(this);
        		grid.uncheckAll = this.uncheckAll.createDelegate(this);
        	},
    
    		renderer: function() {
    			return '<input class="x-row-checkbox" type="checkbox">';
    		},
    
    		getChecked: function() {
    			var result = [];
    			var cb = this.grid.getEl().query("div.x-grid3-col-selection-checkbox > input[type=checkbox]");
    			var idx = 0;
    			this.grid.store.each(function(rec) {
    				if (cb[idx++].checked) {
    					result.push(rec);
    				}
    			});
    			delete cb;
    			return result;
    		},
    
    		checkAll: function() {
    			this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
    				e.dom.checked = true;
    			});
    		},
    
    		uncheckAll: function() {
    			this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
    				e.dom.checked = false;
    			});
    		},
    
    		onGridMouseDown: function(g, rowIndex, e) {
    			if (e.getTarget('div.x-grid3-col-selection-checkbox')) {
    				e.stopEvent();
    				return false;
    			}
        		this.originalMouseDown.apply(this, arguments);
    		}
        });
    
        // create the Grid
        window.grid = new Ext.grid.GridPanel({
            store: store,
            plugins: [ new Ext.ux.GridRowChecker() ],
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height:350,
            width:600,
            title:'Array Grid'
        });
    
        grid.render('grid-example');
        grid.getSelectionModel().selectFirstRow();
    });

  2. #2
    Sencha User
    Join Date
    Jun 2007
    Posts
    125
    Vote Rating
    1
    bhaidaya is on a distinguished road

      0  

    Default


    nice! works perfectly... thanks

  3. #3
    Sencha User KevinChristensen's Avatar
    Join Date
    Sep 2007
    Posts
    36
    Vote Rating
    0
    KevinChristensen is on a distinguished road

      0  

    Default


    Animal,
    Really nice plug-in and I'm still learning about plug-ins so I may be missing the obvious.

    Is it be possible to pass a config option to this plug-in to allow attributes like header and width to be changed?

    Something like:
    PHP Code:
    plugins: [ new Ext.ux.GridRowChecker({header:'Del',width:30}) ], 

  4. #4
    Ext User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    fsx is on a distinguished road

      0  

    Default


    Nice work Animal!

    This will give you the config options that you requested. If you bind to a boolean datasource it'll check the boxes upon loading.

    PHP Code:
    Ext.ux.GridRowChecker = function(config)
    {
        if(
    typeof config != 'undefined')
        {
            if(
    typeof config.header != 'undefined'this.header config.header;
            if(
    typeof config.dataIndex != 'undefined'this.dataIndex config.dataIndex;
            if(
    typeof config.width != 'undefined'this.width config.width;
        }
    }
    Ext.extend(Ext.ux.GridRowCheckerObject, {
         
    header'',
         
    width23,
         
    sortablefalse,
         
    fixedtrue,
         
    menuDisabledtrue,
         
    dataIndex'',
         
    id'selection-checkbox',
         
    rowspanundefined,
         
    init: function(grid) {
          
    this.grid grid;
          
    this.gridSelModel this.grid.getSelectionModel();
          
    this.gridSelModel.originalMouseDown this.gridSelModel.handleMouseDown;
       
    this.gridSelModel.handleMouseDown this.onGridMouseDown;
          
    grid.getColumnModel().config.unshift(this);                 // Places this column first
          
    grid.getChecked this.getChecked.createDelegate(this);
          
    grid.checkAll this.checkAll.createDelegate(this);
          
    grid.uncheckAll this.uncheckAll.createDelegate(this);
         },
      
    renderer: function(value) {
                return 
    '<input class="x-row-checkbox" type="checkbox" ' + (value 'checked' '') + '>';   
      },
      
    getChecked: function() {
       var 
    result = [];
       var 
    cb this.grid.getEl().query("div.x-grid3-col-selection-checkbox > input[type=checkbox]");
       var 
    idx 0;
       
    this.grid.store.each(function(rec) {
        if (
    cb[idx++].checked) {
         
    result.push(rec);
        }
       });
       
    delete cb;
       return 
    result;
      },
      
    checkAll: function() {
       
    this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
        
    e.dom.checked true;
       });
      },
      
    uncheckAll: function() {
       
    this.grid.getEl().select("div.x-grid3-col-selection-checkbox > input[type='checkbox']").each(function(e){
        
    e.dom.checked false;
       });
      },
      
    onGridMouseDown: function(growIndexe) {
       if (
    e.getTarget('div.x-grid3-col-selection-checkbox')) {
        
    e.stopEvent();
        return 
    false;
       }
          
    this.originalMouseDown.apply(thisarguments);
      }
        }); 

  5. #5
    Ext User
    Join Date
    Sep 2008
    Posts
    27
    Vote Rating
    0
    priyanka_iknip is on a distinguished road

      0  

    Exclamation Not able to fetch checked rows

    Not able to fetch checked rows


    Hi

    By using your plugins i am not able to fetched the Checked rows? Please tell me what to do? Its returning me [object : Object]. When i am using getValue function then it is returning me "undefined".

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by priyanka_iknip View Post
    Hi

    By using your plugins i am not able to fetched the Checked rows? Please tell me what to do? Its returning me [object : Object]. When i am using getValue function then it is returning me "undefined".
    getChecked returns an Array of Records.

  7. #7
    Ext User
    Join Date
    Sep 2008
    Posts
    27
    Vote Rating
    0
    priyanka_iknip is on a distinguished road

      0  

    Exclamation Coloring selected row

    Coloring selected row


    With your plugin can i change the color of the checked rows?