Как: автоматическое изменение ширины столбца GridPanel + чтение всех значений столбца в сетке в Ext JS4

Как: автоматическое изменение ширины столбца GridPanel + чтение всех значений столбца в сетке в Ext JS4

Проблема 1: Могу ли я в любом случае автоматически установить ширину столбца gridpanel на основе длины значений данных столбца с повторным запуском (ширина столбца = максимальная длина строки значения данных)

Проблема 2: Чтобы достичь вышеизложенного (и по другим причинам), мне нужно знать, как я могу получить значения определенного столбца сетки? Как только я узнаю логику, следует ли реализовать ее как функцию рендеринга столбцов? Будет ли функция рендеринга столбцов вызываться каждый раз, когда считывается запись данных (тогда это будет излишним)? В этом случае есть ли какая-либо другая функция, которую я могу переопределить?

Большинство решений (калькулятор ширины столбца сетки, autoResizeColumns и т. д.), которые я нахожу в Интернете, относятся к предыдущим версиям, я использую версию EXTJS 4.

Заранее спасибо Скотт


person Dushyanth    schedule 30.08.2011    source источник


Ответы (3)


  1. К сожалению нет. Лучше всего было бы установить определенную ширину для данных, которые обычно были фиксированными, а затем установить другие столбцы, используя flex. (или написать/ждать плагин).

  2. Значения не хранятся в grid, они находятся в store grid. Вам просто нужно зациклить рассматриваемый store и получить все значения из указанного столбца. Например:

    Ext.Array.each(Ext.StoreManager.get('myStore').getRange(0), function(record){
        console.log(record.get("myColumnName")); 
    });
    
person LittleTreeX    schedule 31.08.2011

На самом деле существует плагин Extjs 4 для автоматического изменения размера столбцов сетки в зависимости от ширины содержимого, а также заголовка.

Вот ссылка: плагин автоматического изменения размера столбца Extjs 4

person Sasha Brocato    schedule 20.02.2013

Я нашел временное исправление для переноса столбцов с помощью CSS, как описано здесь: ExtJS 4 - Перенос заголовков столбцов в сетку

Добавьте следующее в ext js css

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}

.x-column-header-inner .x-column-header-text {
    white-space: normal;
}
person Dushyanth    schedule 22.09.2011