1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    32
    Vote Rating
    0
    pulkitagarwal is on a distinguished road

      0  

    Default Selective action on Rows Of Grid based on data

    Selective action on Rows Of Grid based on data


    Hi ,
    I have this use case where based on a certain data contains true or false I have to make the row uneditable and editable respectively.

    The row has multiple columns say price quantity which I am having enabled for inline editing .
    Now if the data is {true , <price> , <quantity> } I want to disable the inline editing and if it's
    {false , <price> , <quantity>} then the columns of the row should be enabled for inline editing.

    What I should use in this case in Grid Panel . Some pointers on this will be highly appreciated.
    Thanks
    Pulkit

  2. #2
    Ext User
    Join Date
    Sep 2010
    Posts
    32
    Vote Rating
    0
    pulkitagarwal is on a distinguished road

      0  

    Default


    + The thing I am seeing on net is a Row Editor Plugin . If this will help my use case please can you point me to a good example for the same ?

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    32
    Vote Rating
    0
    pulkitagarwal is on a distinguished road

      0  

    Default [SOLVED] Pasting the whole code I used

    [SOLVED] Pasting the whole code I used


    You need to include the checkColumn plugin file too
    http://www.sencha.com/forum/showthre...kColumn-Plugin

    Actually this code has other things too like including the check box as column and doing selective action so enjoy .
    Code:
    <html>
        <head>
            <title>Hello World Window</title>
            <link rel="stylesheet" type="text/css" href="lib/ext-3.3.1/resources/css/ext-all.css" />
            <script type="text/javascript" src="lib/ext-3.3.1/adapter/ext/ext-base.js">
            </script>
           
    
            <script type="text/javascript" src="lib/ext-3.3.1/ext-all.js">
            </script>
             <script type="text/javascript" src="CheckColumn.js">
            </script>
    
        </head>
        <body>
            <script type="text/javascript">
      Ext.onReady(function(){
    
    var arrayData = [                                                      
         ['Jay Garcia','MD' , false ],
         ['Aaron Baker',   'VA' , true],
         ['Susan Smith',   'DC' , true],
         ['Mary Stein',    'DE' , false],
         ['Bryan Shanley', 'NJ' , false],
         ['Nyri Selgado',  'CA' , true]
     ];
     Ext.grid.CheckColumn = function(config){
        Ext.apply(this, config);
        if(!this.id){
            this.id = Ext.id();
        }
        this.renderer = this.renderer.createDelegate(this);
    };
     
    Ext.grid.CheckColumn.prototype ={
        init : function(grid){
            this.grid = grid;
            this.grid.on('render', function(){
                var view = this.grid.getView();
                view.mainBody.on('mousedown', this.onMouseDown, this);
            }, this);
        },
     
        onMouseDown : function(e, t){
            if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
                e.stopEvent();
                var index = this.grid.getView().findRowIndex(t);
                var record = this.grid.store.getAt(index);
                record.set(this.dataIndex, !record.data[this.dataIndex]);
            }
        },
     
        renderer : function(v, p, record){
            p.css += ' x-grid3-check-col-td'; 
            return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
        }
    };
     var nameRecord = Ext.data.Record.create([                            
         {name : 'name',  mapping : 0  },
         {name : 'state', mapping : 1 },
         {name : 'indoor', type:'bool', mapping :2 }
     ]);
     
     var arrayReader = new Ext.data.ArrayReader({}, nameRecord);          
     
    var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(arrayData),
    reader: arrayReader,
    remoteSort: true
    });
    
    
    
    var selModel = new Ext.grid.CheckboxSelectionModel({             
         singleSelect : false,
         checkOnly : true
     });
     
      var fm = Ext.form;
    
    
     
    var colModel = new Ext.grid.ColumnModel({
        columns: [selModel, {
            header: 'Full Name',
            sortable: true,
            dataIndex: 'name',
            editor: new fm.TextField({
                allowBlank: false
            })
        }, {
            header: 'State',
            dataIndex: 'state',
            editor: new fm.TextField({
                allowBlank: false
            })
        }, {
            xtype: 'checkcolumn',
            header: 'Indoor?',
            dataIndex: 'indoor'
        
        }],
    isCellEditable: function(colIndex, rowIndex) {
            if ((colIndex == this.findColumnIndex('state') )&& !grid.getStore().getAt(rowIndex).get('indoor')){
          return false;
        }
        return Ext.grid.ColumnModel.prototype.isCellEditable.apply(this, arguments);
      }
    
    });
     
    
    
     var gridView = new Ext.grid.GridView();                     
     
     
     var grid = new Ext.grid.EditorGridPanel({                         
         title      : 'Our first grid',
         renderTo   : Ext.getBody(),
         autoHeight : true,
         width      : 325,
         store      : ds,                                                                     
         colModel   : colModel,                                       
         selModel   : selModel,
          viewConfig: {
                forceFit:true,
                enableRowBody:true,
                showPreview:true,
                getRowClass : function(record, rowIndex, p, store){
                      
                       if(rowIndex==2){
                        alert("pullu");
                        return 'pullu';
                    }
                    return 'chullu';
                }
            },
    
           bbar: new Ext.PagingToolbar({
                pageSize: 2,
                store: ds,
                displayInfo: true,
                items:[
                    '-', {
                    pressed: true,
                    enableToggle:true,
                    text: 'Show Preview',
                    cls: 'x-btn-text-icon details',
                    toggleHandler: function(btn, pressed){
                        var view = grid.getView();
                        view.showPreview = pressed;
                        view.refresh();
                    }
                }]
            })
    
     });
    ds.load({params:{start:0, limit:2}});
    
    });
    
            </script>
            <div id='div1'>
                Pulkit's
            </div>
            <div id="p1" style="width:300px;">
                Grid
            </div>
            <div>
                Example
            </div>
        </body>
    </html>

Similar Threads

  1. Replies: 2
    Last Post: 7 Oct 2010, 5:41 PM
  2. Checking selective grid checkboxes
    By raj_plays in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 19 Apr 2010, 1:04 AM
  3. How to Sort Grid Rows based on Date and Time.
    By frank_ash in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 23 Jun 2009, 8:51 PM
  4. Selective Text Colouring on Grid
    By jdobrowski in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 18 Mar 2008, 7:20 AM