Archive

Archive for December, 2014

ExtJS4 – activate the function by clicking on the icon/text in the Grid object

December 1st, 2014 No comments

There are several ways you can create the action by clicking on the icon or the text that is displayed in the cell Grid object:

  • Using the attribute renderer when defining the Grid column object
  • Using xtype actioncolumn that allows a more flexible way of calling the function
  • Using event cellclick, which reacts to the whole cell, regardless of whether you clicked on a text (the last two are acting as link)

Using the attribute renderer

This is the simplest way to create the action. When defining attributes for a column add the attribute renderer. This attribute calls a function which is passed to the value of that cell (parameter v), HTML tag within which it is located on the page (parameter md) and record with all the data in the row (parameter r).

This attribute is used to change the view in the cell. If the function set “return v;” the effect is the same as if we did not set this attribute. Convenient if, for example, you want depending on the value set icon that defines status. In our case, is used to create the link. Click on the link calls a function show_comments_of_user().

The disadvantage of this method is that you can not forward the variable but only specific values. This example, in contrast to the other two is no variable “r” which represents the object with the data of the whole line.

Conclusion, This method use only when you want to display a value, or to call a function which forward concrete values.

columns : [
    ...
    {
        dataIndex:'comment',
        cls:'colComments',
        header:'User comments',
        tooltip:'User comments',
        width:24,
        menuDisabled:true,
        renderer:function(v, md, r) 
        {
            return '<a href="javascript:void(0)" '+
                      'onclick="show_comments_for_user(\'comment_view\');">'+
                   'View<\/a>'; 
        }
    }
    ...
]

Using xtype actioncolumn

This approach, and the next, is much more flexible when it comes to data forwarding function. Instead of attributes “renderer” column is set attribute “xtype” which assigns the value “actiontype”. This type enables the cell Grid object appears one or more icons that will create an action when you click on them. Each icon is an object that has a large number of its attributes. For a description of all attributes is best to check the official documentation.

We will process only the attribute “handler”, whose value is a function that will be executed when clicking on the icon. This function contains three variables: Grid object, row index amd cell index. The first two variables we use to get the record with all the data in a given row (line 17). In this way we get a third variable from the previous example. Then need to call the appropriate functions (line 18).

columns : [
    ...
    {
        dataIndex:'comment',
        cls:'colComments',
        header:'User comments',
        tooltip:'User comments',
        width:24,
        menuDisabled:true,
        xtype:'actioncolumn',
        items:[ 
            {
                iconCls:'icon-comments',
                tooltip:'View user comments',
                handler:function(grid, rIdx, cIdx) 
                {
                    var r = grid.getStore().getAt(rIdx);
                    show_comments_for_user(r, 'comment_view');
                    return false; 
                } 
            } 
        ]
    }
    ...
]

Using event cellclick

Unlike the previous example in which it is possible to set up multiple icons in the same column, in this example is possible to set only one icon per column. The reason is that the actions are performed on a cell in the Grid object and not the icon itself. This example has the simplest way of defining the columns. The only thing you need to keep in mind is that the attribute “dataIndex” be unique for each column and here are the reasons.

Click on any of the cells activates the event “cellclick“. On this occasion are forwarded to multiple parameters, and for us the most interesting parameter “cellIndex” because it defines the number of columns on which the user clicked the mouse. The numbers start from 0. This parameter should be sufficient to determine the cell, but it’s only half true. For example, your cells in the grid object has an index 4, but if some of the previous column is not visible, the index decreases. So, the “cellIndex” provides the indexr of visible columns in the Grid. For this reason it is essential that the value of the dataIndex attribute be unique. Lines 16-21 show how to get the dataIndex value from cellIndex. In this way, regardless of the order the cell you clicked, you will always have the correct value. It remains to check whether it is a cell that suits you. In example below, it is used switch() statement.

columns : [
    ...
    {
        dataIndex:'comment',
        cls:'colComments',
        header:'User comments',
        tooltip:'User comments',
        width:24,
        menuDisabled:true,
    }
    ...
]
listeners : {
    cellclick : function(ths, td, cellIndex, r, tr, rowIndex, e, eO)
    {
        var dataIdx = ths.up('grid')
                        .getView()
                        .panel
                        .headerCt
                        .getHeaderAtIndex(cellIndex)
                        .dataIndex;
        switch (dataIdx) {
            case 'comment' : 
                show_comments_for_user(r, 'comment_view'); 
                break;
            default :
                show_user(r, 'view');
                break;
        }
    }
}
Categories: Web Tags: