ExtJS - TreeGrid上的自定义列渲染器未被触发

Question

ExtJS - TreeGrid上的自定义列渲染器未被触发

5

我有一个 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'
        }]
     });

谢谢！

- user300285

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- McStretch · Accepted Answer

由于TreeGrid是用户扩展（Ext.ux），因此没有API可用。您需要查看源代码以获取更多信息。如果您的项目中没有源代码，请访问以下页面：http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html，然后点击“查看源代码”Ctrl + U。从那里，您可以链接到TreeGrid.js和其他支持js文件。

我注意到TreeGrid扩展了TreePanel，而TreePanel又扩展了普通的Panel。似乎没有任何参考GridPanel的内容，因此我认为如果您使用该组件，则不会有列渲染器。从我所了解的情况来看，示例（tree-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来实现您的需求。如果这不能满足您的需求，您需要提供更多信息。