树内的文本对齐

Question

我有一棵树，其定义如下：

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

看起来是这样的：

​

​

但我想让文本对齐有点不同：

​

​

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

Answer 1

您可以使用cellTpl属性来完成此操作。您将需要修复模板中的css以使文本对齐正确。

您可以在: cellTpl找到最新6.5.x版本的默认值：http://docs.sencha.com/extjs/6.5.3/classic/src/Column.js-2.html。

Sencha为extjs6.x依赖项提供了许多依赖错误，因此使用extjs5.0创建了一个poc。

这里使用相同的POC代码(extjs5.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()
        });
    }
});

工作小提琴(EXJS5.0)：https://fiddle.sencha.com/#view/editor&fiddle/2clm

编辑

森查小提琴用依赖解决了问题。

使用extjs6.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]
        });
    }
});

用于cellTpl 6.5.3的ExtJS配置：

        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>'
        ],

使用Extjs6.5.3：https://fiddle.sencha.com/#view/editor&fiddle/2clq

Answer 2

你有没有试着把它放到像这样的方向

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