extjs 如何在ExtJ中突出显示文本?

brc7rcf0  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(205)

我还在摸索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}**反白显示?

tpgth1q7

tpgth1q71#

在经典的工具包中,你可以使用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()
        });
    }
});

相关问题