ExtJS 6 : Multiline cell within a grid

In one app, some messages were displayed into a grid, quite a common stuff.
However, long messages were stripped and I needed to display the whole message.

Here is the approach:
1) Add the following style to your css/scss

.multiline-row {
  overflow: auto !important;
  white-space: normal !important;
  text-overflow: ellipsis;
  display: block;
}

2) Define a rendered for the multiline cell. For example, here is my column declaration ( I prefer to use a span instead of a div )

, columns: [
        {
            xtype: 'gridcolumn', align: 'left'
            , dataIndex: 'message_content', flex: 3, text: 'Msg'
            , renderer: function (value, metaData, record, rowIndex) {
                return '' + value + '';
        }
]

And that’s pretty all!

ExtJS 5/6 : Grid’s RowEditing Locale & Options

Within a Grid, RowEditing plugin is convenient to edit values directly. However, Locale (l10n, i18n) is  (sometimes) a mess with ExtJS 5 or 6, and that’s still the case with RowEditing.

However, one very simple way to solve this is to override button labels/messages while declaring/configuring the plugin:

Ext.define('MyApp.view.DataGrid',{
    extend: 'Ext.grid.Panel'
    ,requires: [
        'Ext.grid.plugin.RowEditing'
    ]
    ,plugins: [
        {
            ptype: 'rowediting',
            clicksToEdit: 2,  
            disabled: false, // disable RowEditing, tgrough binding for example
            saveBtnText: i18n('global.update'), // label for update/save btn
            cancelBtnText: i18n('global.cancel') // label for cancel btn
            errorsText: 'Errors', // errors text dirtyText: 'You need to commit or cancel...' // if record is dirty 
         } 
    ] /* ... */ });

And that’s all !!!  You could notice that I also declare “disabled” field as I bind it to enable/disable RowEditing plugin on the fly (for example, based on user profile).

For example, in the following screenshot, buttons are in french:

ExtJS Grid Row Editing in French