Question

我有一个像这样定义的树形列：

{
    xtype: 'treecolumn',
    flex: 1,
    dataIndex: 'text',
    cellWrap: true
}

它看起来像这样：

但我想将文字对齐一点点：

所需的图片是在Paint中制作的，而我想在ExtJS中实现相同的效果。 PS。我正在使用ExtJS 6。

Answer 1

您可以使用 cellTpl 属性来执行此操作。您需要在模板中修复css才能正确对齐文本。

您可以在http://docs.sencha.com/extjs/6.5.3/classic/src/Column.js-2.html

找到最新6.5.x版本的默认cellTpl值

Sencha小提琴为extjs 6.x依赖项提供了许多依赖性错误，因此创建了一个带有extjs 5.0的poc。

这里使用相同的工作POC代码（extjs 5.x）：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [{
                    text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH',
                    leaf: true
                }, {
                    text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH',
                    expanded: true,
                    children: [{
                        text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH report',
                        leaf: true
                    }, {
                        text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH',
                        leaf: true
                    }]
                }, {
                    text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH lottery tickets',
                    leaf: true
                }]
            }
        });

        var tree = Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 300,
            id: "treee",
            store: store,
            rootVisible: false,
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            selType: 'cellmodel',
            columns: [{
                xtype: 'treecolumn',
                flex: 1,
                title: "COLNAME",
                dataIndex: 'text',
                cellWrap: true,
                cellTpl: [
                    '<tpl for="lines">',
                        '<img src="{parent.blankUrl}" class="{parent.childCls} {parent.elbowCls}-img ',
                        '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"/>',
                    '</tpl>',
                    '<div style="display:inline-flex">',
                        '<img src="{blankUrl}" style="width:28px" class="{childCls} {elbowCls}-img {elbowCls}',
                            '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"/>',
                        '<tpl if="checked !== null">',
                            '<input type="button" {ariaCellCheckboxAttr}',
                                ' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"/>',
                        '</tpl>',

                            '<img src="{blankUrl}" style="width:28px" role="presentation" class="{childCls} {baseIconCls} ',
                                '{baseIconCls}-<tpl if="leaf">leaf<tpl else>parent</tpl> {iconCls}"',
                                '<tpl if="icon">style="background-image:url({icon})"</tpl>/>',
                            '<tpl if="href">',
                                '<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
                            '<tpl else>',
                                '<span class="{textCls} {childCls}">{value}</span>',
                    '</div>',
                    '</tpl>'
                ],
            }]
        });

        Ext.create('Ext.panel.Panel', {
            laypout: 'fit',
            items: [tree],
            renderTo: Ext.getBody()
        });
    }
});

工作小提琴（extjs 5.0）：https://fiddle.sencha.com/#view/editor&fiddle/2clm

修改

Sencha小提琴修复了依赖关系的问题。

使用extjs 6.5.3的工作解决方案：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var treeStore = Ext.create('Ext.data.TreeStore', {
            fields: ['text'],
            root: {
                expanded: true,
                children: [{
                    text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH',
                    leaf: true
                }, {
                    text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH',
                    expanded: true,
                    children: [{
                        text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH report',
                        leaf: true
                    }, {
                        text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH',
                        leaf: true
                    }]
                }, {
                    text: 'SOME LONG TEXT RIGHT HERE BLAH BLAH BLAH lottery tickets',
                    leaf: true
                }]
            }
        });

        var treePanel = Ext.create('Ext.tree.Panel', {
            store: treeStore,
            width: 300,
            rootVisible: false,
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            selType: 'cellmodel',
            columns: [{
                xtype: 'treecolumn',
                title: "COLNAME",
                dataIndex: 'text',
                flex: 1,
                cellWrap: true,
                cellTpl: [
                    '<tpl for="lines">',
                        '<div class="{parent.childCls} {parent.elbowCls}-img ',
                        '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"></div>',
                    '</tpl>',
                    '<div style="display:inline-flex">',
                        '<div class="{childCls} {elbowCls}-img {elbowCls}',
                            '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"></div>',
                        '<tpl if="checked !== null">',
                            '<div role="button" {ariaCellCheckboxAttr}',
                                ' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"></div>',
                        '</tpl>',
                        '<tpl if="glyph">',
                            '<span class="{baseIconCls}" ',
                            '<tpl if="glyphFontFamily">',
                                'style="font-family:{glyphFontFamily}"',
                            '</tpl>',
                            '>{glyph}</span>',
                        '<tpl else>',
                            '<tpl if="icon">',
                                '<img src="{blankUrl}"',
                            '<tpl else>',
                                '<div',
                            '</tpl>',
                            ' role="presentation" class="{childCls} {baseIconCls} {customIconCls} ',
                            '{baseIconCls}-<tpl if="leaf">leaf<tpl else><tpl if="expanded">parent-expanded<tpl else>parent</tpl></tpl> {iconCls}" ',
                            '<tpl if="icon">style="background-image:url({icon})"/><tpl else>></div></tpl>',
                        '</tpl>',
                        '<tpl if="href">',
                            '<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
                        '<tpl else>',
                            '<span class="{textCls} {childCls}">{value}</span>',
                        '</tpl>',
                    '</div>'
                ],
            }]
        });

        var mainPanel = Ext.create('Ext.panel.Panel', {
            title: "Sample panel",
            renderTo: Ext.getBody(),
            items: [treePanel]
        });
    }
});

ExtJS 6.5.3的cellTpl配置：

        cellTpl: [
            '<tpl for="lines">',
                '<div class="{parent.childCls} {parent.elbowCls}-img ',
                '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"></div>',
            '</tpl>',
            '<div style="display:inline-flex">',
                '<div class="{childCls} {elbowCls}-img {elbowCls}',
                    '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"></div>',
                '<tpl if="checked !== null">',
                    '<div role="button" {ariaCellCheckboxAttr}',
                        ' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"></div>',
                '</tpl>',
                '<tpl if="glyph">',
                    '<span class="{baseIconCls}" ',
                    '<tpl if="glyphFontFamily">',
                        'style="font-family:{glyphFontFamily}"',
                    '</tpl>',
                    '>{glyph}</span>',
                '<tpl else>',
                    '<tpl if="icon">',
                        '<img src="{blankUrl}"',
                    '<tpl else>',
                        '<div',
                    '</tpl>',
                    ' role="presentation" class="{childCls} {baseIconCls} {customIconCls} ',
                    '{baseIconCls}-<tpl if="leaf">leaf<tpl else><tpl if="expanded">parent-expanded<tpl else>parent</tpl></tpl> {iconCls}" ',
                    '<tpl if="icon">style="background-image:url({icon})"/><tpl else>></div></tpl>',
                '</tpl>',
                '<tpl if="href">',
                    '<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
                '<tpl else>',
                    '<span class="{textCls} {childCls}">{value}</span>',
                '</tpl>',
            '</div>'
        ],

使用Extjs 6.5.3工作：https://fiddle.sencha.com/#view/editor&fiddle/2clq

Answer 2

您是否尝试将其置于其他方向

{
    xtype: 'treecolumn',
     flex: 1,
     dataIndex: 'text',
     cellWrap: true
}

树列内的文本对齐方式

2 个答案:

修改