如何在ExtJ中使文本高亮？

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,
    }],...

但是这些文本不是高亮的，这意味着我不能高亮显示和复制，或者选择和复制。当我鼠标移动时，指针将其视为链接，但无法突出显示或选择。如何才能使{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()
        });
    }
});