如何在 ExtJs 中突出顯示文本？

Question

我仍在尋找 Extjs 的方法，我目前正在向 UI 顯示文本數據，如下所示：

reference: 'agentLogGrid',

    store: {
        xclass: 'Ext.data.ChainedStore',
        source: 'LogViewSource',
    },

    itemConfig: {
        viewModel: true,
    },

    columns: [{
        text: 'Timestamp',
        xtype: 'templatecolumn',
        tpl: '{timestamp}',
        flex: 1,
    }, {
        text: 'Data',
        xtype: 'templatecolumn',
        tpl: '{data}',
        flex: 1,
    }],...

但是文本不能突出顯示，這意味着我不能突出顯示它們並復制，或者 select 和復制。 當我將鼠標懸停時，指針將其視為鏈接，但我無法突出顯示或 select。 如何使{data}突出顯示？

Answer 1

在經典工具包中，您可以使用enableTextSelection屬性。 像這樣的東西：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'employeeStore',
            fields: ['firstname', 'lastname', 'seniority', 'department'],
            groupField: 'department',
            data: [{
                firstname: "Michael",
                lastname: "Scott",
                seniority: 7,
                department: "Management"
            }, {
                firstname: "Dwight",
                lastname: "Schrute",
                seniority: 2,
                department: "Sales"
            }, {
                firstname: "Jim",
                lastname: "Halpert",
                seniority: 3,
                department: "Sales"
            }, {
                firstname: "Kevin",
                lastname: "Malone",
                seniority: 4,
                department: "Accounting"
            }, {
                firstname: "Angela",
                lastname: "Martin",
                seniority: 5,
                department: "Accounting"
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Column Template Demo',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [{
                text: 'Full Name',
                xtype: 'templatecolumn',
                tpl: '{firstname} {lastname}',
                flex: 1
            }, {
                text: 'Department (Yrs)',
                xtype: 'templatecolumn',
                tpl: '{department} ({seniority})'
            }],
            // USE viewConfig enableTextSelection property
            viewConfig: {
                enableTextSelection: true
            },
            height: 200,
            width: 300,
            renderTo: Ext.getBody()
        });
    }
});