Controller = function()
{
var grid, record; function createGrid()
{
    var data = [
{"company":"0. Johnson & Johnson","price":64.72,"change":0.06,"pct_change":0.09,"last_change":"9\/1 12:00am","_id":1,"_parent":null,"_level":1,"_lft":1,"_rgt":98,"_is_leaf":false},
{"company":"1. American International Group, Inc.","price":64.13,"change":0.31,"pct_change":0.49,"last_change":"9\/1 12:00am","_id":2,"_parent":1,"_level":2,"_lft":2,"_rgt":17,"_is_leaf":false},
{"company":"2. Alcoa Inc","price":29.01,"change":0.42,"pct_change":1.47,"last_change":"9\/1 12:00am","_id":3,"_parent":1,"_level":2,"_lft":18,"_rgt":65,"_is_leaf":false},
{"company":"3. The Coca-Cola Company","price":45.07,"change":0.26,"pct_change":0.58,"last_change":"9\/1 12:00am","_id":4,"_parent":1,"_level":2,"_lft":66,"_rgt":79,"_is_leaf":false},
{"company":"4. Citigroup, Inc.","price":49.37,"change":0.02,"pct_change":0.04,"last_change":"9\/1 12:00am","_id":5,"_parent":null,"_level":1,"_lft":99,"_rgt":100,"_is_leaf":true},
{"company":"5. Hewlett-Packard Co.","price":36.53,"change":-0.03,"pct_change":-0.08,"last_change":"9\/1 12:00am","_id":6,"_parent":null,"_level":1,"_lft":101,"_rgt":118,"_is_leaf":false}
];
   
    // add in some dummy descriptions and loaded flag
for (var i = 0; i < data.length; i++) {
     data[i].desc = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.';
     data[i]._is_loaded = true;
}

var expander = new Ext.ux.grid.RowExpander({
      tpl : new Ext.Template(
          '<p><b>Company:</b> {company}</p><br>',
          '<p><b>Summary:</b> {desc}</p>'
      )
    });    // 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: '_level', type: 'int'},
      {name: '_lft', type: 'int'},
      {name: '_rgt', type: 'int'},
      {name: '_is_leaf', type: 'bool'}
    ]);
    var store = new Ext.ux.maximgb.tg.NestedSetStore({
     autoLoad : true,
reader: new Ext.data.JsonReader({id: '_id'}, record),
proxy: new Ext.data.MemoryProxy(data)
    });
    // create the Grid
    var grid = new Ext.ux.maximgb.tg.GridPanel({
      store: store,
      master_column_id : 'company',
      columns: [
       //expander,
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
        {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pct_change'},
        {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'last_change'}
      ],
      stripeRows: true,
      autoExpandColumn: 'company',
      title: 'Array Grid',
      //plugins: expander,
      viewConfig : {
       enableRowBody : true
      }
    });
    var vp = new Ext.Viewport({
     layout : 'fit',
     items : grid
    });
}

// example of custom renderer function
  function change(val)
  {
    if (val > 0) {
      val = '<span style="color:green;">' + val + '</span>';
    } 
    else if(val < 0) {
val = '<span style="color:red;">' + val + '</span>';
    }
    return val;
  }  // example of custom renderer function
  function pctChange(val)
  {
    if (val > 0) {
      val = '<span style="color:green;">' + val + '%</span>';
    } 
    else if(val < 0) {
      val = '<span style="color:red;">' + val + '%</span>';
    }
    return val;
  } return {
init : function()
{
createGrid();
}
}
}();Ext.onReady(Controller.init);Controller = function()
{
var grid, record; function createGrid()
{
    var data = [
{"company":"0. Johnson & Johnson","price":64.72,"change":0.06,"pct_change":0.09,"last_change":"9\/1 12:00am","_id":1,"_parent":null,"_is_leaf":false},
{"company":"1. American International Group, Inc.","price":64.13,"change":0.31,"pct_change":0.49,"last_change":"9\/1 12:00am","_id":2,"_parent":1,"_is_leaf":false},
{"company":"2. Alcoa Inc","price":29.01,"change":0.42,"pct_change":1.47,"last_change":"9\/1 12:00am","_id":3,"_parent":1,"_is_leaf":false},
{"company":"3. The Coca-Cola Company","price":45.07,"change":0.26,"pct_change":0.58,"last_change":"9\/1 12:00am","_id":4,"_parent":1,"_is_leaf":false},
{"company":"4. Citigroup, Inc.","price":49.37,"change":0.02,"pct_change":0.04,"last_change":"9\/1 12:00am","_id":5,"_parent":null,"_is_leaf":true},
{"company":"5. Hewlett-Packard Co.","price":36.53,"change":-0.03,"pct_change":-0.08,"last_change":"9\/1 12:00am","_id":6,"_parent":null,"_is_leaf":false}
];
   
    // add in some dummy descriptions and loaded flag
for (var i = 0; i < data.length; i++) {
     data[i].desc = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.';
     data[i]._is_loaded = true;
}

var expander = new Ext.ux.grid.RowExpander({
      tpl : new Ext.Template(
          '<p><b>Company:</b> {company}</p><br>',
          '<p><b>Summary:</b> {desc}</p>'
      )
    });    // 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: '_is_leaf', type: 'bool'}
    ]);
    var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
     autoLoad : true,
reader: new Ext.data.JsonReader({id: '_id'}, record),
proxy: new Ext.data.MemoryProxy(data)
    });
    // create the Grid
    var grid = new Ext.ux.maximgb.tg.GridPanel({
      store: store,
      master_column_id : 'company',
      columns: [
       //expander,
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
        {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pct_change'},
        {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'last_change'}
      ],
      stripeRows: true,
      autoExpandColumn: 'company',
      title: 'Array Grid',
      //plugins: expander,
      viewConfig : {
       enableRowBody : true
      }
    });
    var vp = new Ext.Viewport({
     layout : 'fit',
     items : grid
    });
}

// example of custom renderer function
  function change(val)
  {
    if (val > 0) {
      val = '<span style="color:green;">' + val + '</span>';
    } 
    else if(val < 0) {
val = '<span style="color:red;">' + val + '</span>';
    }
    return val;
  }  // example of custom renderer function
  function pctChange(val)
  {
    if (val > 0) {
      val = '<span style="color:green;">' + val + '%</span>';
    } 
    else if(val < 0) {
      val = '<span style="color:red;">' + val + '%</span>';
    }
    return val;
  } return {
init : function()
{
createGrid();
}
}
}();Ext.onReady(Controller.init);第一份代码的store用的是NestedSetStore
第二份代码的store用的是AdjacencyListStore
第一份需要_lft和_rgt这两个参数,基于左右值的无限分类算法,很麻烦,而且不太可能动态更改。关于这方面的资料少的可怜,大部分都是转载的同一篇文章。我按照资料改写成了第二份代码,如第二张图所示,明显的错误,在表格中没有形成树形,一眼看去就是个纯表格。
不知道错在哪里   本人新手  希望有EXT的大神指点迷津treegridAdjacencyListStore