Какой самый простой способ отобразить значение NULL в виде пустой строки вместо «нулевой» строки в сетке ExtJS? - PullRequest
Новая
       17

Какой самый простой способ отобразить значение NULL в виде пустой строки вместо «нулевой» строки в сетке ExtJS?

3 голосов
/ 13 августа 2010

У меня есть серверный скрипт (PHP), возвращающий данные JSON для заполнения сетки ExtJS.

Эти данные получены из запроса MySQL, содержащего некоторые значения NULL.

Когда PHP кодирует его в нотацию JSON, он сохраняет NULL в неизменном виде: 

{"id":"33","name":"Test1","url":null,"cls":"x-tree-noicon","expanded":true}

Но ... когда эти данные отображаются в сетке ExtJS, вместо значения NULL отображается строка " null ".

Я не хочу, чтобы он отображал " null ". Я просто хочу, чтобы он был пустым (пустая строка).

Какой самый простой способ добиться этого?

Спасибо.

Ответы [ 5 ]

2 голосов
/ 16 августа 2012

Вы определили Ext.data.Model?если вы определите и Ext.data Model, и использовать ее в Ext.data.Store для чтения строки JSON очень просто ...

Вам просто нужно объявить тип поля: 'auto'

попробуйте это: 

Ext.define('testModel', {
        extend  : 'Ext.data.Model',
        fields  :[
                     {name: 'Id', type: 'int'},
                     {name: 'name', type: 'string'},
                     {name: 'url', type: 'auto'},
                     {name: 'cls', type: 'string'},                     
                     {name: 'expanded', type: 'boolean'}
                  ]     
    });


var testStore = Ext.create('Ext.data.Store', {
                         model  : 'testModel',
                         proxy  : {
                                      type   : 'memory',
                                      reader : {type:'json'}
                                  }
                });

и используйте testStore, чтобы заполнить данные в вашей сетке.

2 голосов
/ 13 августа 2010

WoLpH ответ правильный. Мой собственный вопрос был как-то "неверен" ...: -)

Фактически я имею дело с древовидной сеткой (Ext.ux.tree.TreeGrid), а не с обычной сеткой ExtJS (Ext.grid.GridPanel).

Столбцы древовидной сетки имеют тип , а не типа Ext.grid.Column , как общая сетка. Они имеют тип Ext.list.Column .

Это означает, что параметр конфигурации renderer не применяется (он существует и работает с Ext.grid.Column, но не с Ext.list.Column).

Для изменения рендеринга Ext.list.Column имеется опция конфигурации tpl , в которой используется механизм Ext.XTemplate .

Ниже я поделюсь конфигурацией моего древовидного столбца , который сделал то, что я хотел: 

tpl: '<tpl if="url === null"></tpl><tpl if="url !== null">{url}</tpl>'

Приведенная выше конфигурация заставила мой столбец отображать пустую строку для значений NULL вместо строки " null " в сетке дерева !

Последнее замечание: я проголосовал за ответ WoLpH, потому что он правильный. Мой вопрос вводил в заблуждение, и я предпочел не изменять / редактировать его, а поделиться своими собственными результатами в качестве другого ответа. Я также благодарю его, потому что это заставило меня сосредоточиться на правильных вещах. Спасибо.

2 голосов
/ 13 августа 2010

Другой вариант - обработать его с бэкенда.Вам нужно будет проверить в наборе результатов любые экземпляры NULL и преобразовать их в пустые строки, прежде чем вернуть их клиенту.

2 голосов
/ 13 августа 2010

Я не уверен, что самое простое, но первое, что приходит мне в голову, - это создание пользовательского renderer. Вы можете использовать что-то вроде этого: 

function render(value){
    if(value === null){
        value = '';
    }
    return value;
}
1 голос
/ 02 октября 2014

В ExtJS 3.4 есть свойство useNull, которое можно установить для числового поля (но не для строк).

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Field-cfg-useNull

(Необязательно) Используется при преобразовании полученных данных в тип числа (int или float).Если значение не может быть проанализировано, null будет использоваться, если useNull имеет значение true, в противном случае значение будет равно 0. По умолчанию установлено значение false

По умолчанию: false

Например 

{
    name: 'myId',
    type: 'int',
    useNull: true
},
...