Archive

Posts Tagged ‘tree with horizontal line’

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