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