Results 1 to 6 of 6

Thread: how to change color to a row after a click on a checkbox into the row

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
      0  

    Default Answered: how to change color to a row after a click on a checkbox into the row

    first of all, forgive me for my english.
    i've a grid with an editable boolean column
    Code:
    var sxgrid = Ext.create('Ext.grid.Panel', {
        id: 'sxGrid',
        alias : 'widget.prova',
        width: '100%',
        title: 'Lavorazione',
        selType: 'cellmodel',
        columns: [{
            text: 'Nome',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnName',
            sortable: true
        }, {
            text: 'Tipo',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnType',
            sortable: true
        }, {
            text: 'Lunghezza',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnLenght',
            sortable: true
        }, {
            text: 'Chiave',
            xtype: 'booleancolumn',
            dataIndex: 'NaturalKey',
            trueText: 'Si',
            falseText: 'No',
            sortable: true,
            editor: { 
                xtype: 'checkbox',
                listeners: { change : this.checkBoxClick }
            }
        }],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit:1})
        ]
    });
    
    function checkBoxClick(a,newValue, oldValue, eopts)
    {
        //how to get reference to the row of the grid that contains the checkbox and changing its background color based on checkbox value
        
    }
    how to get the parent object(in my case the row of the grid) and change its color?
    i've tryed something like:

    a.getParentByType('????') returns always undefined (maybe i've used a wrong xtype, i've tryed with 'grid', 'gridpanel','prova','widget.prova','app.widgetprova' i don't' know the xtype of a row if exists) anyway it returns always undefined

    but i don't know how to get reference to a parent/container or an ancestor of component in a grid

    i can't proceed over, maybe i should use another approach?

    i've seen a lot of examples that use 'Ext.selection.CheckboxModel' to select a row whith a checkbok but itsn't suitable for me.
    (i'd like to have an editable custom column not at the beginnig of the grid, with a text in the header and not a checkbox userd to prerform 'select all row')

    anyway, every suggestion is appreciated

    thanks a lot sencha friends :-)

  2. It seems that you want to change the row color basing on NaturalKey value. If so, you should try getRowClass() of grid view. Something like this:
    Code:
    Ext.define('App.sxGrid',{
        extend:'Ext.grid.Panel', 
        id: 'sxGrid',
        alias : 'widget.prova',
        width: '100%',
        title: 'Lavorazione',
        selType: 'cellmodel',
        viewConfig: {
            getRowClass: function(record){
                return record.get('NaturalKey') ? 'selected' : 'unselected';
            }
        },
        columns: [{
            text: 'Nome',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnName',
            sortable: true
        }, {
            text: 'Tipo',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnType',
            sortable: true
        }, {
            text: 'Lunghezza',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnLenght',
            sortable: true
        }, {
            text: 'Chiave',
            xtype: 'booleancolumn',
            dataIndex: 'NaturalKey',
            trueText: 'Si',
            falseText: 'No',
            sortable: true,
            editor: { 
                xtype: 'checkbox',
    //            handler: function myHandler(sender, event){
    //                var currGrid = Ext.getCmp('sxGrid');
    //                var selection =  currGrid.getSelectionModel().getSelection(); //<---this return always and empty array 
    //            }
            }
        }],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit:1})
        ]
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    Have a look at:
    grid.getSelectionModel().getSelection()[0] // row
    this.gridB.getSelectionModel().getSelection()[0].data // record
    this.gridB.getSelectionModel().getSelection()[0].data.id // field in record

    Regards,
    Scott.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
      0  

    Default

    i've tryed to use 'grid.getSelectionModel().getSelection()' and this method returns always an empty array because (i suppose) i use a custom checkbox into the editor section of a
    booleancolum and this checkbox doesn't select any row into the store automatically.
    this theory seems to be confirmed, because if i use the 'Ext.selection.CheckboxModel' instead of a custom checkbox when i call 'grid.getSelectionModel().getSelection()' i get the selected rows.
    so, to avoid to use the automatically generated checkbox by Ext.selection.CheckboxModel, how to select programmatically the row into the store when i click on my custom checkbox?

    anyway, even if i would use 'Ext.selection.CheckboxModel' to select the rows how to color the rows when i get the selected store rows by 'grid.getSelectionModel().getSelection()'???

    i hope to have been clear enough :-(
    this is my grid code:
    Code:
    Ext.define('App.sxGrid',{
        extend:'Ext.grid.Panel', 
        id: 'sxGrid',
        alias : 'widget.prova',
        width: '100%',
        title: 'Lavorazione',
        selType: 'cellmodel',
        columns: [{
            text: 'Nome',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnName',
            sortable: true
        }, {
            text: 'Tipo',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnType',
            sortable: true
        }, {
            text: 'Lunghezza',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnLenght',
            sortable: true
        }, {
            text: 'Chiave',
            xtype: 'booleancolumn',
            dataIndex: 'NaturalKey',
            trueText: 'Si',
            falseText: 'No',
            sortable: true,
            editor: { 
                xtype: 'checkbox',
                handler: function myHandler(sender, event){
                    var currGrid = Ext.getCmp('sxGrid');
                    var selection =  currGrid.getSelectionModel().getSelection(); //<---this return always and empty array 
                }
            }
        }],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit:1})
        ]
    });

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    It seems that you want to change the row color basing on NaturalKey value. If so, you should try getRowClass() of grid view. Something like this:
    Code:
    Ext.define('App.sxGrid',{
        extend:'Ext.grid.Panel', 
        id: 'sxGrid',
        alias : 'widget.prova',
        width: '100%',
        title: 'Lavorazione',
        selType: 'cellmodel',
        viewConfig: {
            getRowClass: function(record){
                return record.get('NaturalKey') ? 'selected' : 'unselected';
            }
        },
        columns: [{
            text: 'Nome',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnName',
            sortable: true
        }, {
            text: 'Tipo',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnType',
            sortable: true
        }, {
            text: 'Lunghezza',
            xtype: 'gridcolumn',
            dataIndex: 'ColumnLenght',
            sortable: true
        }, {
            text: 'Chiave',
            xtype: 'booleancolumn',
            dataIndex: 'NaturalKey',
            trueText: 'Si',
            falseText: 'No',
            sortable: true,
            editor: { 
                xtype: 'checkbox',
    //            handler: function myHandler(sender, event){
    //                var currGrid = Ext.getCmp('sxGrid');
    //                var selection =  currGrid.getSelectionModel().getSelection(); //<---this return always and empty array 
    //            }
            }
        }],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit:1})
        ]
    });

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
      0  

    Default

    It works perfectly, thanks thanks and again thanks :-)
    Happy Easter.
    Alessio.

  7. #6
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Answers
    1
    Vote Rating
    0
      0  

    Default

    hello! i have grid panel with gridwiev and getRowConfig handler. Select Model = CheckBoxModel with lisneners select and deselect like this:
    Code:
    xtype: 'gridpanel',
                                                        dock: 'left',
                                                        id: 'grListCamera',
                                                        itemId: 'grListCamera',
                                                        autoScroll: true,
                                                        header: false,
                                                        title: 'My Grid Panel',
                                                        store: 'stListCamera',
                                                        viewConfig: {
                                                            getRowClass: function(record, rowIndex, rowParams, store) {
                                                                var num=record.data.num;
                                                                var fix=_myAppGlobal.getController('cntFirst').isFixCam(record.data.num);
                                                                str='';
                                                                if (_MainCamera==record.data.num)
                                                                {
                                                                    str="maincam";   
                                                                }
                                                                if ( fix >= 0) 
                                                                {
                                                                   str =" fixcam";
                                                                }
                                                              return str;
                                                            },
                                                            id: 'gridCamView',
                                                            itemId: 'gridCamView'
                                                        },
                                                        columns: [
                                                           
                                                            {
                                                                xtype: 'gridcolumn',
                                                                width: 30,
                                                                dataIndex: 'num',
                                                                text: '?'
                                                            },
                                                            {
                                                                xtype: 'gridcolumn',
                                                                width: 186,
                                                                dataIndex: 'comment',
                                                                text: '????????'
                                                            }
                                                        ],
                                                        selModel: Ext.create('Ext.selection.CheckboxModel', {
                                                            allowDeselect: false,
                                                            showHeaderCheckbox: false,
                                                            listeners: {
                                                                select: {
                                                                    fn: me.onCheckboxselectionmodelSelect,
                                                                    scope: me
                                                                },
                                                                deselect: {
                                                                    fn: me.onCheckboxselectionmodelDeselect,
                                                                    scope: me
                                                                }
                                                            }
                                                        }),
    after click .. selected row.. but getRowClass event not fire. If i write in handler onSelect selection Model call .refresh method GridView
    Code:
    Ext.getCmp('gridCamView').refresh();
    getRowClass is fired okey .. BUT my GridView Scroll on Top and my selection row not view on screen ( autoscroll on top on refresh).
    1.Can i fire getRowClass without call refresh and not goto Top of my grid.
    2.if no and i must call refresh - can i return to position before click select on row in my grid.
    ps.excuse me my poor english.

    psps propertis preserveScrollOnRefresh on grid.view = true !!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •