Where is the option to select text in a Ext JS 4 grid ?

Where is the option to select text in a Ext JS 4 grid ?

Hi, in this article I would like to show you how we can select text in a Ext JS 4 grid because this option is disabled by default. It’s simple operation but it requires time in Sencha docs to find out. I think it’s important because some clients really want to select feature at the beginning of project. I will try from time to time share just such short posts about similar features.

In this example I have basic MVC project generated by Sencha Cmd. The default grid look like the following picture:

5-extjs4

In this grid user can’t select text using mouse cursor. Sometimes it’s really necessary because sometimes user want to use some parts of text to find something in for example search input.

Code look like the following picture, and you can find this file in the view (default sencha cmd structure) directory, filename Main.js :

Ext.define('DevJS.view.Main', {
 extend: 'Ext.container.Container',
 requires: [
 'Ext.tab.Panel',
 'Ext.layout.container.Border',
 'Ext.grid.Panel',
 ],

xtype: 'app-main',

layout: {
 type: 'border'
 },

initComponent: function () {

this.items = [
 {
     region: 'west',
     xtype: 'panel',
     title: 'west',
     width: 150
 },
 {
     region: 'center',
     xtype: 'tabpanel',
     items: [
     {
         xtype: 'grid',
         title: 'Zaznaczenie tekstu',
         store: Ext.data.StoreManager.lookup('testStore'),
     columns: [
         { text: 'Nr', dataIndex: 'number' },
         { text: 'Tekst', dataIndex: 'text', flex: 1 },
     ]
    }
 ]
 }
 ]

 //parent
 this.callParent(arguments);
 }
});

You have to create Store with data for grid, in this example I used controller Main.js to do that :


Ext.define('DevJS.controller.Main', {
 extend: 'Ext.app.Controller',

init: function () {
     //create test store
     this.prepareGridStore();
 },

prepareGridStore: function () {
     Ext.create('Ext.data.Store', {
         storeId: 'testStore',
         fields: ['number', 'text'],
         data: {
         'items': [
             { number: 1, text: "Testowy tekst." },
             { number: 2, text: "Testowy tekst do zaznaczenia." }
         ]},
         proxy: {
             type: 'memory',
             reader: {
                  type: 'json',
                  root: 'items'
             }
         }
     });
 }
});

After that, you can assigne your controller here: application.js in app directory.

//Remmeber, in this place we mount MVC components

The code looks like the following picture:


Ext.define('DevJS.Application', {
 name: 'DevJS',

extend: 'Ext.app.Application',

views: [
 // TODO: add views here
 ],

controllers: [
 'DevJS.controller.Main'
 ],

stores: [
 // TODO: add stores here
 ]
});

//You can also put only controller name, ‘Main’

As you can see controller is mounted and application will take care of rest.

Okay, our goal is here:

6-extjs4

This operation is simple if we know how to set it. You have to configure the top grid layout, it’s called “the grid’s UI view”, Ext.view.Table file. You can pass arguments by viewConfig object or you can create new instance of Ext.view.Table and set configuration there but it’s not a good solution.

Modification look like the following code:

{
 region: 'center',
 xtype: 'tabpanel',
 items: [
 {
     xtype: 'grid',
     title: 'Zaznaczenie tekstu',
     store: Ext.data.StoreManager.lookup('testStore'),
     columns: [
         { text: 'Nr', dataIndex: 'number' },
         { text: 'Tekst', dataIndex: 'text', flex: 1 },
     ],
     viewConfig: {
         enableTextSelection: true
     }
 }
 ]
}

The variable enableTextSelection is responsible for text selection in grid panel. Please set true and you reach your goal. Have fun, and see you soon.

Comments:
mkalafior
Reply
02/10/2013 at 2:39 PM

Great post man, I’m w8 for more!

Łukasz Sudoł To reply on comment
Reply
02/10/2013 at 2:41 PM

Thanks ;)

Templar
Reply
29/10/2013 at 1:43 PM

you’re awsome!

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send