Make Title Selectable

Question

I have the following code in which I want to make the title as selectable. As it is a header the .x-selectable class is getting added.

The code is as follows

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

Is there any work around for this issue ?

Answer 1

You can use selectable()

selectable( ) : Ext.Element
Enable text selection for this element (normalized across browsers)

You need need to get your grid title header element & need to call this function.

Like this:

<yourGrid>.getHeader().el.selectable();

Can be done in afterrender listener of grid:

listeners: {
    afterrender: function(grid){
        grid.down('header').getHeader().selectable();
    },
},

For EXTJS 3.3.1 we need to remove the selectStart listener applied by default by extjs using removeAllListeners():

listeners: {
    afterrender: function(panel){
        panel.header.removeAllListeners();
    }
}