Archive

Posts Tagged ‘ExtJS 4’

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: , ,

Extjs4 tree (un)check all children

October 20th, 2014 No comments

If you use Extjs treePanel with checkbox to select elements, here’s the solution how to check/decheck all tree elements.

Example for check:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",true); 
});

Example for uncheck:

Ext.getCmp('tree-list').getRootNode().cascade(function(n) 
{
    n.set("checked",false); 
});
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;";
}

ExtJS 4 – Tree Grid with lines

May 14th, 2013 No comments

ExtJS 4 gives you the ability to combine two objects: Tree and Grid. To do this you need to add the attribute “column” in the object tree. You specify the columns you want to display, as it did for the grid. Tree is shown in this way there is no border bottom which separates the rows.\r\n\r\nnull\r\n\r\nIf you want to display lines need to create additional CSS style that will then be included in the configuration part of tree. For this occasion, I create two styles:\r\n\r\n\r\n.border-line &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n}\r\n.border-cell &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n border-right: 1px solid #eee !important;\r\n}\r\n\r\n\r\nThe second step is to call the appropriate style as follows:\r\n\r\n\r\nviewConfig: {\r\n getRowClass: function(record) { return ”border-line”; }\r\n}\r\n\r\n\r\nAbove code will create a line under each row of trees that might look something like this:\r\n\r\nline\r\n\r\nAnd if you replace “<em>border-line</em>” with “<em>border-cell</em>”, you can get an effect similar to the following figure:\r\n\r\ncellExtJS gives you the ability to combine two objects: Tree and Grid. To do this you need to add the attribute “column” in the object tree. You specify the columns you want to display, as it did for the grid. Tree is shown in this way there is no border bottom which separates the rows.\r\n\r\nnull\r\n\r\nIf you want to display lines need to create additional CSS style that will then be included in the configuration part of tree. For this occasion, I create two styles:\r\n\r\n\r\n.border-line &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n}\r\n.border-cell &gt; td {\r\n border-bottom: 1px solid #eee !important;\r\n border-right: 1px solid #eee !important;\r\n}\r\n\r\n\r\nThe second step is to call the appropriate style as follows:\r\n\r\n\r\nviewConfig: {\r\n getRowClass: function(record) { return ”border-line”; }\r\n}\r\n\r\n\r\nAbove code will create a line under each row of trees that might look something like this:\r\n\r\nline\r\n\r\nAnd if you replace “<em>border-line</em>” with “<em>border-cell</em>”, you can get an effect similar to the following figure:\r\n\r\ncellExtJS gives you the ability to combine two objects: Tree and Grid. To do this you need to add the attribute “column” in the object tree. You specify the columns you want to display, as it did for the grid. Tree is shown in this way there is no border bottom which separates the rows.

null

If you want to display lines need to create additional CSS style that will then be included in the configuration part of tree. For this occasion, I create two styles:

.border-line &gt; td {
  border-bottom: 1px solid #eee !important;
}
.border-cell &gt; td {
  border-bottom: 1px solid #eee !important;
  border-right: 1px solid #eee !important;
}

The second step is to call the appropriate style as follows:

viewConfig: {
  getRowClass: function(record) { return 'border-line'; }
}

Above code will create a line under each row of trees that might look something like this:

line

And if you replace “<em>border-line</em>” with “<em>border-cell</em>”, you can get an effect similar to the following figure:

cell