Как получить компонент значка actioncolumn?

Я ищу два дня и не могу найти, как получить доступ к компоненту actioncolumn (НЕ html) в rowselect. Мне нужно установить событие при щелчке значка, используя технику взаимодействия компонентов Saki (источник). Моя колонка выглядит так:

введите здесь описание изображения

Я нашел способ показать/скрыть кнопки при выборе строки изменения (этот код используется в 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. Следующий. Я хочу показать другое окно при нажатии (установить событие щелчка). Но я не знаю, как получить доступ от 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???

        }
    });

}
});

Я также пытался установить id на этот значок на beforerowselect, но на rowselect этот код Ext.getCmp('icon-id') возвращает undefined. Мне тоже не помогают функции up() и down() =(

Помогите, пожалуйста! знак равно

p.s. Печально, но Ext.ComponentQuery работает только с ExtJS 4.


extjs extjs3 gridpanel
person Sogl    schedule 28.04.2016    source источник
comment
Я не уверен, что понимаю, почему вы используете rowselect вместо cellclick или событие о щелчке? Я могу предложить использовать cellclick: docs.sencha.com/extjs/3.4.0/#!/api/   -  person Michael    schedule 28.04.2016
comment
@MichaelLane Просто потому, что cellclick не слушает события клавиатуры (клавиши вверх и вниз), а rowselect слушает.   -  person Sogl    schedule 05.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

Итак, наконец, я переписал некоторые части своего приложения.

Сначала нам нужно добавить некоторые параметры к actioncolumn:

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

Кнопки отображения/скрытия строк сетки теперь не зависят от actioncolumn перемещения:

 /**
 * 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 часть:

//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();
        };
    }   
});

Все работает как положено!

person Sogl    schedule 05.05.2016