Search code examples
extjsextjs3gridpanel

How to get actioncolumn icon component?


I'm searching two days and can't find how to get access to actioncolumn component (NOT html) on rowselect. I need to set event on icon click using Saki's component communication technique (source). My column looks like:

enter image description here

I found a way how to show/hide buttons on change row selection (this code uses in GridPanel):

sm: new Ext.grid.RowSelectionModel({
        singleSelect: true,
        listeners: {
            beforerowselect: function(grid, rowIndex, record) {

                // 7 is the last cell index
                var cell = grid.grid.getView().getCell( rowIndex, 7 );
                //select icons in cell
                var icons = Ext.DomQuery.select('.x-action-col-icon', cell);

                //for each DOM element
                Ext.each(icons, function(icon, index) {
                    currentIcon = Ext.get(icon);

                    //if not 1st button
                    if (index !== 0) {
                        //Delete class that hides. Class 'x-hidden' also works
                        currentIcon.removeClass('x-hide-display'); //show icon
                    }
                });
            },
            rowdeselect: function(grid, rowIndex, record) {

                // 7 is the last cell index
                var cell = grid.grid.getView().getCell( rowIndex, 7 );
                //select icons in cell
                var icons = Ext.DomQuery.select('.x-action-col-icon', cell);

                //for each DOM element
                Ext.each(icons, function(icon, index) {
                    currentIcon = Ext.get(icon);

                    //if not 1st button
                    if (index !== 0) {
                        //Delete class that hides. Class 'x-hidden' also works
                        currentIcon.addClass('x-hide-display'); //show icon
                    }
                });
            }
        }
    });

Ok. Next. I want to show another window on click (set click event). But I don't know how to get access from Window/Viewport:

//get items
this.loanGrid = this.items.itemAt(0);
this.documentsGridWindow = this.items.itemAt(2);

//add events
this.loanGrid.on ({
    scope: this,
    afterrender: function() {

        selModel = this.loanGrid.getSelectionModel();

        selModel.on({
            scope: this,
            rowselect: function (grid, rowIndex, keepExisting, record) {
                //HOW TO GET actioncolumn 2nd button here???

        }
    });

}
});

I also tried to set id to this icon on beforerowselect, but on rowselect this code Ext.getCmp('icon-id') returns undefined. up() and down() functions not helps me too =(

HELP please! =)

p.s. Sad, but Ext.ComponentQuery works only from ExtJS 4.


Solution

  • So finally I re-wrote some parts of my application.

    First we need to add some options to actioncolumn:

    dataIndex: 'action',
    id: 'action',
    

    Grid row buttons show/hide now is independent of actioncolumn move:

     /**
     * buildSelectionModel
     */
    buildSelectionModel: function() {
        var sm = new Ext.grid.RowSelectionModel({
            singleSelect: true,
            listeners: {
                scope: this,
                rowselect: function(grid, rowIndex, record) {
                    this.toggleFirstButtonShowState(grid.grid, rowIndex);
                },
                rowdeselect: function(grid, rowIndex, record) {
                    this.toggleFirstButtonShowState(grid.grid, rowIndex);
                }
            }
        });
        return sm;
    },
    
    /**
     * toggleFirstButtonShowState
     */
    toggleFirstButtonShowState: function(grid, rowIndex) {
    
        //'action' is data index of
        var colIndex = this.getColumnIndexByDataIndex(grid, 'action');
        console.log(colIndex);
    
        // 7 is the last cell index
        var cell = grid.getView().getCell( rowIndex, colIndex);
        //select icons in cell
        var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
    
        //for each DOM element
        Ext.each(icons, function(icon, index) {
            currentIcon = Ext.get(icon);
    
            //if not 1st button
            if (index !== 0) {
                //Show/delete class that hides. Class 'x-hidden' also works
                currentIcon.toggleClass('x-hide-display'); //show/hide icon
            }
    
        });
    },
    
    getColumnIndexByDataIndex: function(grid, dataIndex) {
        //columns
        gridColumns = grid.getColumnModel().columns;
    
        for (var i = 0; i < gridColumns.length; i++) {
           if (gridColumns[i].dataIndex == dataIndex) {
                return i;
           }
        }
    

    Viewport part:

    //get selection model
    selModel = this.loanGrid.getSelectionModel();
    
    selModel.on({
        scope: this,
        rowselect: function (grid, rowIndex, keepExisting, record) {
    
            //get second icon in actioncolumn
            var icon = grid.grid.getColumnModel().getColumnById('action').items[1];
    
            //save context
            var self = this;
    
            //add handler by direct set
            icon.handler = function(grid, rowIndex, colIndex) {
                //open documents window
                self.documentsGridWindow.show();
            };
        }   
    });
    

    All works as expected!