Archive

Posts Tagged ‘extjs grid’

Adding QTips to GridPanel cell in ExtJS 4.0

November 8th, 2014 No comments

Need to add a custom tooltip (quick tip) to cell in a GridPanel in ExtJS 4.0? In your column definitions, simply add a attribut “rendered”, passing a custom function.

...
columns [
    ...
    {
      text:"Bookmark", 
      dataIndex:"title", 
      flex:1, 
      renderer:function(value,metaData) 
      {
        metaData.tdAttr = 'data-qtip="' + value + '"';
        return value;
      }
    },
    ...
}
...

A couple notes:

  1. To show tooltip, you need to add line “Ext.QuickTips.init();” before Grid definition
  2. data-qtip is one of four attributes for tooltip. Tooltip attributes are:
    • data-qtip – Set tooltip text content
    • data-qtitle – Set the title
    • data-qwidth – Set tooltip width
    • data-qalign – Represented by a reference point that corresponds to the original, which reference point. For example: “tl-br” is represented by the tip of the upper left corner, corresponding to the lower right corner of the original

With such a modification, you get a nice tooltip generated for each cell in your grid.

Categories: JavaScript Tags: , ,

Extjs change grid cell background based on value

October 20th, 2014 No comments

If you want to change the color of a Grid cell Grid, use the renderer attribute.
Example: Suppose you have a cell that has a numeric value. If this value is greater than 0, then the background color is green, otherwise it is red.
Here’s a code that describes:

renderer : function(v, md) 
{
    if(parseInt(v) > 0)
        md.style = "background-color:green;";
    else
        md.style = "background-color:red;";
}

Delete selected rows in Grid

July 27th, 2013 No comments

Here’s an example of how to delete selected row in the Grid object:

I guess that somewhere you have a button that will click to perform the action. In this example, it is a button located in the toolbar on the grid object

tbar : [{
    iconCls: 'cross- line ',
    text: 'Delete',
    tooltip:{ title:'Delete Rows' , text: 'Delete selected rows' },
    handler : function(ths, e)
    {
       Ext.Msg.confirm('Delete Confirmation', 'Delete selected rows?', function(btn)
        {
            if (btn == 'yes') {
                store_object.remove( ths.up('grid').
                                         getView().
                                         getSelectionModel().
                                         getSelection() );
            }
        });
    }
}]

If the user confirms delete, the selected rows will be removed from the store. In order to reach the selected rows is necessary to pass through the structure.

“ths” variable is the first in a series. She points to the button that we clicked. The button is part of the grid toolbar. The function up (‘grid’) take the first grid that is above it in the hierarchy (the parent). In a similar way you can request other objects, e.g. tree or form. When you get the grid object, pass through it and take the selected rows.