TreeGrid (Ext.ux.maximgb.tg) - a tree grid component based on Ext's native grid.

[MaximGB]

Hi.

I've ported my tree grid extension to ExtJS 3.x, the tree grid is based on the Ext.grid.GridPanel and Ext.data.Store, so the most grid/store options are in place. I've also added per node paging and some UI enhancements. Any feedback and/or bug reports are highly appreciated.

Description, demo and download page is here at
http://max-bazhenov.com/dev/ux.maximgb.tg/index.html

Changes from ExtJS 2.x version

• No more breadcrumbs header, thought it might be added later as optional component.
• Ext.ux.maximgb.tg.EditorGridPanel class added, so TreeGrid gained the cell editing feature as well.

[steffenk]

Hi Maxim,

great plugin!

One thing looks odd to me, but maybe it's a general problem having row estender: when row is expanded and not selected, the hovering looks wrong. It takes row and part of the extender.

[sfs]

Hi Maxim

Can the treegrid do dynamic loading e.g. using ext.Direct?

I have big grid and I'm not to happy about the paging solution. Primarily because sorting only affects whatever page your on.

Thanks in advance.

[Izhaki]

Tips for new users

Hi,

Having spent the last few days trying to get a hang of TreeGrid, I feel I should share some of what I've learnt for the benefit of new users who might come across this thread.

I have found this parts of this thread being slightly outdated (posts from 2 years ago), and TreeGrid in general could use better documentation. Hopefully this will help others:

Adjacency List vs. Nested Set Models

TreeGrid offers two types of stores:

• Adjacency List (AdjacencyListStore)
• Nested Set (NestedSetStore)

These models are, in principal, two SQL related strategies to represent hierarchy in databases.

TreeGrid ships with two corresponding examples (examples/server_al & examples/server_ns), although no use of SQL is demonstrated in these examples.

Adjacency List requires each record to contain the following fields:

• ID
• Parent ID
• Is Leaf

Nested Set requires - in addition to the fields above - the following fields:

• Lft
• Rgt
• Level

How Lft, Rgt, are calculated is explained below.

Which one should I choose?

Adjacency List is far more simple than the Nested Set model, as you don't have to calculate Lft and Rgt.

One example where this is important is when you plan to add records dynamically to TreeGrid - if you are using NestedSetStore, you'd have to calculate Lft and Rgt; with AdjacencyListStore, you only need to know the parent id.

So why would I choose Nested Set?

The hierarchy logic in databases can be implemented either by SQL queries or by a server-side script. For example, in order to find the top parent of a node, programmers might use SQL only, or a hybrid between SQL and PHP.

Nested Set makes life easier for those who implement the hierarchy logic via SQL queries. Then, if the database contains the lft and rgt fields anyway, you might just as well use the NestedSetStore with TreeGrid. If your database does not contain lft and rgt fields - you should probably use the AdjacencyListStore.

How do I calculate Lft and Rgt?

How Lft and Rgt are calculated is explained (alongside a thorough explanation of the two models) here: http://dev.mysql.com/tech-resources/...ical-data.html

However, TreeGrid ships with Tree.php script that can calculate them for you.

The following PHP script demonstrates how it is used:

    $tree = new Tree();  
      
    $result = sql("SELECT * FROM nodes");

    while ($node = mysql_fetch_array($result)) 
    {
      $tree->add(array(
        'title' => $node['title'],     
        ), $node['parent_id']
      );
    }
    
    return $tree->getNodes();

$tree->getNodes() will return the nodes with lft and rgt fields.

So what options do I have?

Option 1:

• A Nested Set database (with lft and rgt fields per record).
• NestedSetStore with TreeGrid

This option is good for those who wish to implement the hierarchy logic using SQL.

Option 2:

• An Adjacency List database (records having ID and Parent ID)
• Having Tree.php calculating lft and rgt
• NestedSetStore with TreeGrid

This option is good for those who wish to make life hard for themselves.

Option 3:

• An Adjacency List database
• AdjacencyListStore with TreeGrid

This option is good for those who wish to keep things simple, and don't mind implementing the hierarchy logic in PHP (or any other server-side script).

Anything else I need to know?

Be aware that the record definition varies with respect to your NestedSetStore/AdjacencyListStore choice.

With NestedSetStore you need to have the fields starting with '_':

    var record = Ext.data.Record.create([
           {name: 'company'},
         {name: 'price', type: 'float'},
         {name: 'change', type: 'float'},
         {name: 'pct_change', type: 'float'},
         {name: 'last_change', type: 'date', dateFormat: 'n/j h:ia'},
         {name: 'desc'},
         {name: '_id', type: 'int'},
         {name: '_level', type: 'int'},
         {name: '_lft', type: 'int'},
         {name: '_rgt', type: 'int'},
         {name: '_is_leaf', type: 'bool'}
       ]);

With AdjacencyListStore you don't need the _level, _lft, and _rgt fields. In fact, having them can mess up the TreeGrid Display. So:

    var record = Ext.data.Record.create([
           {name: 'company'},
         {name: 'price', type: 'float'},
         {name: 'change', type: 'float'},
         {name: 'pct_change', type: 'float'},
         {name: 'last_change', type: 'date', dateFormat: 'n/j h:ia'},
         {name: '_id', type: 'int'},
         {name: '_parent', type: 'auto'},
         {name: '_is_leaf', type: 'bool'}
       ]);

Adding a Record Dynamically


The following code is based on an earlier post in this thread:

function addItemChild() {

    // get selected record
    var r = grid.getSelectionModel().getSelected();

    // if it's a leaf that make it a non-leaf
    if (r.get("_is_leaf")) {
        r.set("_is_leaf", false);
    }

    childID = Ext.id();
    var myNewRecord = new record({company:"Child " + childID, price:12, _id:childID, _is_leaf:true, _parent:r.get("_id")}, childID);
    store.addSorted(myNewRecord);
}

A few notes on this:

1) When using EditorGridPanel, I have found the need to replace this line:

var r = grid.getSelectionModel().getSelected();

With:

row = grid.getSelectionModel().getSelectedCell()[0];
r = store.getAt(row);

2) Notice the use of:

new record({...}, id)

Where record was defined earlier:

var record = Ext.data.Record.create([...]);

This is instead of using:

new Ext.data.Record({...}, id);

3) This example applies to AdjacencyListStore. If you want to add a record to a NestedSetStore, you'd need to provide _lft, _rgt and _level (most likely you'd have the server doing this, possible calculating these using the Tree helper class).

4) I have found the need to include the following for the tree to update correctly (mainly with regards to the icons displayed next to the node):

          store.addSorted(myNewRecord);
          // the two lines below are added so the grid updates correctly
          store.expandNode(r);          
          grid.getView().refresh();

Using Direct with TreeGrid

I got TreeGrid working with direct by replacing the following in treegrid.js:

This:

Ext.ux.maximgb.tg.AbstractTreeStore = Ext.extend(Ext.data.Store,

Has changed to this:

Ext.ux.maximgb.tg.AbstractTreeStore = Ext.extend(Ext.data.DirectStore,

And then in my code:

    var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
        autoLoad : true,
        directFn : nodes.get,
        reader: new Ext.data.JsonReader({id: '_id'}, record),
    });

Hope this helps

[sfs]

Hi Izhaki

Great explanation - I have been through the same process as you

I didn't try to use direct but finally figured out that if you don't fetch the entire tree to the treegrid, then when you expand a node which is not a leaf, the store will try to fetch the underlying nodes, by adding a parameter to you url called "anode" (Thank you Firebug!) which contains the id of the node you are trying to expand.

Does anyone know the difference between the dynamic load which I have just descriped and what goes on when you use direct?

/sfs

[Izhaki]

Does anyone know the difference between the dynamic load which I have just descriped and what goes on when you use direct?

To my knowledge if you have a node that is not marked as a leaf (meaning it should have children) but has no children in the store, extjs will prompt the server for its children when the node is expanded. This is what you have described as dynamic load, and I think is also termed synchronous load.

Direct is just a way to define server side classes that can be called directly from your javascript code. So for example, I can have a PHP class called Nodes, with a method called get_nodes(), and call it directly from javascript with Nodes.get_nodes(). This really ease the client/server protocol, and results in a more logical server-side code.

[MasterAM]

Hi,

I found an issue with AdjacencyListStore-based grids.
You can easily reproduce it by modifying some of maxim's examples, like the client_editable example, as follows:

(index.js)

 ...
   // create the data store
    var record = Ext.data.Record.create([
         {name: 'company'},
         {name: 'price', type: 'float'},
         {name: 'change', type: 'float'},
         {name: 'pct_change', type: 'float'},
         {name: 'last_change', type: 'date', dateFormat: 'n/j h:ia'},
         {name: 'desc'},
         {name: '_id', type: 'int'},
         {name: '_parent', type: 'int'},
         {name: '_is_leaf', type: 'bool'}
       ]);
    var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
... 

If you extract a node, the correct children will be expanded, but in most cases they would be in the wrong position.

The problem lies in the AdjacencyListStore's implementation of the getRootNodes method.
In my case, the roots' '_parent' property was an empty string and not null, making the method return an empty array.

Therefore, the following is proposed:
([email protected] 929)

    getRootNodes : function()
    {
        var i, 
            len, 
            result = [], 
            records = this.data.getRange();
        
        for (i = 0, len = records.length; i < len; i++) {
            if (isNaN(parseInt(records[i].get(this.parent_id_field_name)),10)) {
                result.push(records[i]);
            }
        }
        
        return result;
    }, 

@MaximGB,
Great extension!
Perhaps some of the code can be refactored a bit so that it can compress better.
I will apply a few changes as I go and post the changes when done.

Cheers!
Alon

[MaximGB]

Great extension!
Perhaps some of the code can be refactored a bit so that it can compress better.
I will apply a few changes as I go and post the changes when done.

Thanks, but I prefer code readability over compressibility.

[s.m.srinivas]

Hi,

I had requirement to use Tree Grid & below is the code. I don't see records in the Grid, I would like to know what am i doing wrong

var fields = [
	{name: 'acctClient'},
	{name: 'account'},
	{name: 'shortName'},
	{name: 'forms'},
	{name: 'doc'},
	{name: 'desc'},
	{name: 'revision'},
	{name: 'scan'},
	{name: 'statusDate'},
	{name: 'frame'},
	{name: 'loc'},
	{name: 'status'},
	{name: 'id', type: 'int'},
	{name: 'parentid', type: 'int'},
	{name: 'leaf', type: 'bool'}
];

var data = [
	{
		"rows": [
					{
						"id":1,"parentid":null,"leaf":false,"acctClient":"","account":"","shortName":"","forms":"CL-SVC-SEL","doc":"","desc":"ACCOUNT SERVICES SELECTION","revision":"11-2005","scan":"03/15/2006","statusDate":"","frame":"SEZ","loc":"CMD","status":"Accepted"
					},
					{
						"id":2,"parentid":1,"leaf":true,"acctClient":"","account":"","shortName":"","forms":"","doc":"DF","desc":"FDIC ADDENDUM FOR TRUST ACCTS","revision":"","scan":"","statusDate":"","frame":"","loc":"","status":""
					}
		],
		"success":true,
		"total":2
	}
];

var acctMaintStore = new Ext.ux.maximgb.tg.AdjacencyListStore({
		autoLoad : true,
		leaf_field_name: "leaf",
		parent_id_field_name: "parentid",
		reader: new Ext.data.JsonReader({
				idProperty: 'id', 
				root: 'rows',
				fields: fields
		}),
		proxy: new Ext.data.MemoryProxy(data)
});

var resultPanel = new Ext.ux.maximgb.tg.GridPanel({
	store: acctMaintStore,
	enableHdMenu : false,
	master_column_id : "forms",
	disableSelection : true,
	columns: [
		{header: "Account/Client", hidden: true, width: 100, sortable: true, dataIndex: 'acctClient'},
		{header: "Account", hidden: true, width: 100, sortable: true, dataIndex: 'account'},
		{header: "Short Name (Friendly)", hidden: true, width: 150, sortable: true, dataIndex: 'shortName'},
		{header: "Forms", width: 100, sortable: true, dataIndex: 'forms'},
		{header: "Doc Cd", width: 125, sortable: true, dataIndex: 'doc'},
		{header: "Description", width: 125, sortable: true, dataIndex: 'desc',id:'auto-expand-column-acct-maint'},
		{header: "Revision", hidden: false, width: 125, sortable: true, dataIndex: 'revision'},
		{header: "Scan", hidden: false, width: 125, sortable: true, dataIndex: 'scan'},
		{header: "Status Date", width: 75, sortable: true, dataIndex: 'statusDate'},
		{header: "Frame", hidden: false, width: 75, sortable: true, dataIndex: 'frame'},
		{header: "Loc", hidden: false, width: 75, sortable: true, dataIndex: 'loc'},
		{header: "Status", width: 75, sortable: true, dataIndex: 'status'},
		{header: "Action", width: 150, sortable: false,dataIndex:'action'}
	],
	stripeRows: true,
	autoExpandColumn: 'auto-expand-column-acct-maint',
	region: 'center',
	margins	: '0 0 0 0',
	header : false,
	border: false,
	title:'Results Panel'
});

[s.m.srinivas]

I figured out the issue in the code

.............

var resultPanel = new Ext.ux.maximgb.tg.GridPanel({
	store: acctMaintStore,
	enableHdMenu : false,
	master_column_id : "forms",
	disableSelection : true,
	columns: [
		{header: "Account/Client", hidden: true, width: 100, sortable: true, dataIndex: 'acctClient'},
		{header: "Account", hidden: true, width: 100, sortable: true, dataIndex: 'account'},
		{header: "Short Name (Friendly)", hidden: true, width: 150, sortable: true, dataIndex: 'shortName'},
		{header: "Forms", width: 100, sortable: true, dataIndex: 'forms',id:'forms'},
		{header: "Doc Cd", width: 125, sortable: true, dataIndex: 'doc'},
		{header: "Description", width: 125, sortable: true, dataIndex: 'desc',id:'auto-expand-column-acct-maint'},
		{header: "Revision", hidden: false, width: 125, sortable: true, dataIndex: 'revision'},
		{header: "Scan", hidden: false, width: 125, sortable: true, dataIndex: 'scan'},
		{header: "Status Date", width: 75, sortable: true, dataIndex: 'statusDate'},
		{header: "Frame", hidden: false, width: 75, sortable: true, dataIndex: 'frame'},
		{header: "Loc", hidden: false, width: 75, sortable: true, dataIndex: 'loc'},
		{header: "Status", width: 75, sortable: true, dataIndex: 'status'},
		{header: "Action", width: 150, sortable: false,dataIndex:'action'}
	],
	stripeRows: true,
	autoExpandColumn: 'auto-expand-column-acct-maint',
	region: 'center',
	margins	: '0 0 0 0',
	header : false,
	border: false,
	title:'Results Panel'
});

...............

The id marked in red was missing & hence the grid was not showing