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你的目的。如果這不符合您的需求，您將不得不提供更多信息。