ux.maximgb.treegrid 使用指南

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 '_':


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


Code:

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:


Code:

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:


Code:

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

With:

Code:

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

Notice the use of:

Code:

new record({...}, id)Where record was defined earlier:

Code:

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

This is instead of using:


Code:

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


Code:

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:

Code:

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

,Has changed to this:


Code:

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

,And then in my code:


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