Skip to content

February 7, 2013

5

ExtJs 3 & 4 TreeGrid Component: adding grid line style and highlighting expanded nodes/rows

by Joe Kuan

ExtJs 3 TreeGrid style

In ExtJs 3, a default TreeGrid has no cell grid lines. This article demonstrates how to improve the style and fix the hidden column alignment. The following is a ExtJs 3 TreeGrid screenshot with default style showing network usages:

Default TreeGrid style

TreeGrid comes with a set of class names prefixed with ‘x-tree*’. We can apply the following CSS styles to improve the UI:

/* Add grid lines to the cells */
.x-treegrid-col {
   border-left: 1px solid #D0D0D0;
}

/* This fix the grid line alignment when a column is hidden */
.x-treegrid-hd-hidden {
   display: none;
}

/* Give a fainted highlight on the row that is expanded */
.x-tree-node-expanded {
   border-right: 1px solid #D0D0D0;
   background-color: #F4F4F4;
   border-top-color: #EDEDED;
   border-bottom-color: #EDEDED;
}

First, we set the grid lines like a normal GridPanel. Then we add a bit of touch similar to stripeRows effect. When a tree node row is expanded, we slightly highlight the background with a darker borderline. The x-treegrid-hd-hidden is to fix the grid line alignment when a column is set to be hidden.

ExtJs TreeGrid with improved style

As we can see, the expandable nodes/rows are highlighted faintly and it is easier to notice the drill down effects.

ExtJs 4 TreeGrid style

The underneath of ExtJs 4 TreeGrid is significant different to ExtJs 3 and it is one of the major updates, i.e. share more common structure. Lets use an ExtJs 4 treegrid example:

ExtJs 4 TreeGrid example

Apply the following CSS change to the treegrid example:

.x-grid-tree-node-expanded .x-grid-cell {
    background-color: #F4F4F4;
    border-top-color: #EDEDED;
    border-bottom-color: #EDEDED;
}
.x-grid-row .x-grid-cell {
    border-left: 1px solid #D0D0D0;
}

We now have an expanded and highlighted treegrid with gridlines:
ExtJs 4 TreeGrid example with gridlines

Advertisements
5 Comments Post a comment
  1. Ryad bek
    Mar 4 2013

    Hello,

    I am new to Highchart EXT JS.
    The project really looks good!
    However there were a lot of changes in the API and
    I find it very difficult to make it works. It will be good to have a minimal example to test it.
    All existing examples on the web are short html/js fragments. I was not able to get anything from them.
    I installed ExtJs version: 4.1.1.1, Highcharts version: 2.3.5 but the demo just displayed nothing (no graph available at the left of the screen).
    I do not know if it is because I use free versions of highchart & (ext js) or I because I screw something (path folder,..).
    Would it be possible to have a minimal example (1 html file with js embeded)
    to understand and debug?
    Warm regards
    (PS I was able to run the exampel from https://joekuan.wordpress.com/2013/01/13/updated-extjs-4-1-1-using-multiple-fields-inside-a-row-editor-cell-for-editing-large-values/ but there it is not about chart unfortunately)

    Reply
    • Joe Kuan
      Mar 5 2013

      No problem. I will update a standalone example in Highcharts_Sencha github module over the weekend.

      Thanks
      Joe

      Reply
      • Ryad bek
        Mar 5 2013

        Thanks a lot! I was partially confused because
        http://www.highcharts.com/download
        says that Highcharts_Sencha needs a valid (commercial?) Highcharts license

      • Joe Kuan
        Mar 6 2013

        That means if you use my extension for a commercial product, you also need to purchase commercial license for Highcharts.

      • Ryad bek
        Mar 5 2013

        It seems that it didn’t work because I was running the html without web server. The desktop application rocks when it runs on top of an Apache server.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: