Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-6186 in a recent build.
  1. #1
    Sencha User Sharkanana's Avatar
    Join Date
    Nov 2011
    Location
    Charlotte, NC
    Posts
    39
    Vote Rating
    0
    Sharkanana is on a distinguished road

      0  

    Default [4.1 Final] ActionColumn icon not updating in TreeGrid

    [4.1 Final] ActionColumn icon not updating in TreeGrid


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.1 rev Final

    Browser versions tested against:
    • FF
    • Chrome 18

    DOCTYPE tested against:
    • None

    Description:
    • When using getClass to determine the icon for an action, if the action column is in a treegrid the icon will no longer update. Even if the function is hit and returns a different class. Get class works on load, but not when a value is changed.

    Steps to reproduce the problem:
    • Load a tree grid with an aciton column
    • trigger a value change that would change an actions icon

    The result that was expected:
    • Icon changes

    The result that occurs instead:
    • Icon doesn't change

    Test Case:


    Code:
    Ext.require('Ext.*');
    
    
            Ext.Loader.require('Ext.direct.*', function() {
                Ext.Direct.addProvider(Aym.REMOTING_API);
            });
    
    
            Ext.onReady(function() {
                var store = Ext.create('Ext.data.TreeStore', {
                    fields: [
                        { name: 'text', type: 'string'},
                        { name: 'leaf', type: 'boolean'},
                        { name: 'isReadOnly', type: 'boolean'}
                    ],
                    root: {
                        expanded: true,
                        children: [
                            { text: "detention", leaf: true },
                            { text: "homework", expanded: true, children: [
                                { text: "book report", leaf: true, isReadOnly: true },
                                { text: "alegrbra", leaf: true}
                            ] },
                            { text: "buy lottery tickets", leaf: true }
                        ]
                    }
                });
    
    
                Ext.create('Ext.tree.Panel', {
                    title: 'Simple Tree',
                    width: 200,
                    height: 150,
                    store: store,
                    rootVisible: false,
                    columns: [
                        {
                            xtype: 'treecolumn',
                            flex: 1,
                            dataIndex: 'text'
                        },
                        {
                            xtype: 'actioncolumn',
                            width: 60,
                            header: 'Read Only',
                            items: [
                                {
                                    getClass: function(value, metadata, record)
                                    {
                                        return record.get('isReadOnly') ? 'button-checkbox-checked-icon' : 'button-checkbox-unchecked-icon';
                                    },
                                    handler: function(grid, rowIdx)
                                    {
                                        var record = grid.getStore().getAt(rowIdx);
                                        record.set('isReadOnly', !record.get('isReadOnly'));
                                    }
                                }
                            ]
                        }
                    ],
                    renderTo: Ext.getBody()
                });
            });





    HELPFUL INFORMATION


    Additional CSS used:
    • background images for icons

    Operating System:
    • Windows 7

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    65
    Vote Rating
    1
    kevhender is on a distinguished road

      0  

    Default


    This is causing a massive, unfixable bug in our app. Is there any update for this?

  3. #3
    Sencha Premium Member Fredric Berling's Avatar
    Join Date
    Sep 2007
    Location
    Sweden
    Posts
    186
    Vote Rating
    15
    Fredric Berling has a spectacular aura about Fredric Berling has a spectacular aura about

      0  

    Default Also has the same effect action column

    Also has the same effect action column


    I have the same problem in Ext JS 4.1.1 RC1 when using getClass in actioncolumns. Did work in 4.0.7

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,004
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      1  

    Default


    This will be fixed for 4.1.1.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Posts
    5
    Vote Rating
    1
    cepaul is on a distinguished road

      0  

    Default not working again in 4.2.1.883?

    not working again in 4.2.1.883?


    I am using this technique for a grid action column but the icon won't update. It will update if I use grid.getView().refresh at the end but that causes some other issues for me. And I take it that grid.getView().refreshRow(rowIndex) is no longer valid?

    Code:
    items: [{
        getClass: function(v, meta, record) {                            
            var relationship = record.get('relationship');
            
            if (relationship == 'child') { 
                // child row
                return 'row-child';
            } else {
                // parent row                            
                var hidden = record.get('hidden');
                var linkedToCount = record.linkedTo().getCount();
                                        
                if (record.linkedTo().getCount() > 0) {
                    if (hidden == 1) {
                        // child row is hidden
                        return 'row-plus';                      
                    } else {
                        // child row is visible
                        return 'row-minus'; 
                    }
                }    
            }
        },
        handler: function(view, rowIndex, colIndex, item, e, record, row) {
            var grid = view.up('grid');
            var linkedToCount = record.linkedTo().getCount();
            var hidden = record.get('hidden');
                                
            if (hidden == 1) {
                console.log('hidden = 1');
                // show the linkedTo rows
                for (var i=1; i <= linkedToCount; i++) {
                    console.log('show row: ' + rowIndex + i);
                    grid.view.removeRowCls(rowIndex + i, 'row-hidden');
                }
                // set 'hidden' to false
                grid.getStore().getAt(rowIndex).set('hidden', 0);
            } else {
                console.log('hidden = 0');
                // hide the linkedTo rows
                for (var i=1; i <= linkedToCount; i++) {
                    console.log('hide row: ' + rowIndex + i);
                    grid.view.addRowCls(rowIndex + i, 'row-hidden');
                }
                // set 'hidden' to true
                grid.getStore().getAt(rowIndex).set('hidden', 1);
            }
            //grid.getView().refresh();
        }
    }],