extjs применяет форматирование к столбцу сетки

Question

В extjs, если у меня есть определение сетки, подобное этому:

xtype: 'grid',
store: 'someStore',
flex: 1,
frame: true,
loadMask: true,
titleCollapse: true,
cls: 'vline-on',
ref: '../someGrid',
id: 'someGrid',
columns: [
           {
             xtype: 'gridcolumn',
             header: 'ID',
             dataIndex: 'someID',
             sortable: true,
              width: 100
            }

Есть ли способ применить некоторое форматирование к этому столбцу?Например, это поле является числом, и если я хочу установить десятичную точность .. я могу это сделать?Или мне нужно применить форматирование, когда хранилище загружается в мой файл Java?Я думаю, что последний ??

Answer 1

Используйте опцию «рендерер». Вы можете определить свою функцию там. Например, я хочу показать someID, завернутый в какой-то тег:

columns: [
       {
         xtype: 'gridcolumn',
         header: 'ID',
         dataIndex: 'someID',
         sortable: true,
         width: 100,
         renderer: function(value) {
             // your logic here
             return "<b>" + value + "</b>";
         }
        }

Answer 2

Если вы хотите показать десятичную точность внутри столбца сетки, вы должны определить индекс данных в вашем магазине типа "float":

...
, {name: 'column_data_name', type: 'float'}
...

Затем внутри определения столбца сетки вы должны указать средство визуализации, как это предлагает KomarSerjio, и использовать его.

function floatRenderer(value) {
    if (value) {
        var val = value.toFixed(2);

        return addSeparatorsNF(val, '.', ',', '.');
    }
    else return "";
}
...
, { id:'column_data_name', header: 'label', dataIndex: 'column_data_name' , renderer: floatRenderer ,  align: 'right' }
...

Была предложена функция addSeparatorsNF здесь .

Answer 3

Я попробовал конфигурацию рендерера, предложенную KomarSerjio, и она отлично сработала для меня при использовании Sencha Ext JS 6. Я использовал его для обнуления некоторых получаемых данных, в которых отсутствовал префикс ноль, чтобы сделать его 24-часовым. Поэтому я попробовал следующее, и это сработало отлично! Спасибо.

Ext.define('ViewLL.view.main.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'mainlist',
    reference: 'mainList',
    flex: 1,


    requires: [
        'ViewLL.store.Datastore'
    ],

    title: 'Records',

    store: {
        type: 'datastore'

    },

    columns: 
        { text:'Pln On Site Time', 
          dataIndex:'plnOnSiteTime', 
          renderer: function (number) {
          if (number<=2400) { number = ("000"+number).slice(-4); }
          return number;
          }
        }

});

До настройки рендерера моя сетка отображала значения, например, 926, 800, 1000. Функция добавления постов через рендерер. 0926, 0800, 1000

Answer 4

Для форматирования десятичного значения вашей сетки, чтобы ограничить после точки двумя числами или пока вы не захотите просто использовать приведенный ниже код для вашего столбца: renderer: Ext.util.Format.numberRenderer ('00 .00 ')