ExtJS - TreeGrid上的自定义列呈现器没有被触发

Question

我有一个ExtJS TreeGrid，我试图将一个自定义渲染器添加到特定的列。不幸的是，它不工作 - 事件没有被解雇，也没有发出任何警告。我无法找到TreeGrid的API。有没有其他人经历过这个？

下面的代码：

var tree = new Ext.ux.tree.TreeGrid({ 
     title: 'My Tree Grid', 
     loader: treeLoader, 
     columns:[{ 
      header: 'Title', 
      dataIndex: 'title', 
      width: 500 
     },{ 
      header: 'Testing', 
      width: 100, 
      dataIndex: 'testing', 
      renderer: function(value) { 
       console.log('Test'); 
      }, 
      align: 'center' 
     }] 
    }); 

谢谢！

Answer 1

TreeGrid没有API，因为它是用户扩展（Ext.ux）。您必须查看源代码以获取更多信息。如果你没有在你的项目源，转到以下页面：

http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

并点击“查看源文件” Ctrl + U。从那里你可以链接到TreeGrid.js和其他支持js文件。

我注意到TreeGrid延伸TreePanel，这反过来延伸普通旧Panel。似乎没有任何关于的提及，所以如果您使用的是组件，我不相信有任何列渲染器。从我所收集的例子（树grid.js），而不是使用一个XTemplate渲染列数据：

var tree = new Ext.ux.tree.TreeGrid({ 
     title: 'Core Team Projects', 
     width: 500, 
     height: 300, 
     renderTo: Ext.getBody(), 
     enableDD: true, 

     columns:[{ 
      header: 'Task', 
      dataIndex: 'task', 
      width: 230 
     },{ 
      header: 'Duration', 
      width: 100, 
      dataIndex: 'duration', 
      align: 'center', 
      sortType: 'asFloat', 
      // ================================== // 
      // this acts as your column renderer 
      tpl: new Ext.XTemplate('{duration:this.formatHours}', { 
       formatHours: function(v) { 
        if(v < 1) { 
         return Math.round(v * 60) + ' mins'; 
        } else if (Math.floor(v) !== v) { 
         var min = v - Math.floor(v); 
         return Math.floor(v) + 'h ' + Math.round(min * 60) 
          + 'm'; 
        } else { 
         return v + ' hour' + (v === 1 ? '' : 's'); 
        } 
       } 
      }) 
      // ================================== // 
     },{ 
      header: 'Assigned To', 
      width: 150, 
      dataIndex: 'user' 
     }], 

     dataUrl: 'treegrid-data.json' 
    }); 

尝试使用XTemplate你的目的。如果这不符合您的需求，您将不得不提供更多信息。