Combobox в ExtJS. Установка автоматической ширины выпадающего списка

При работе с интерфейсной частью (на frontend`е), часто бывает, что функциональный элемент, такой как combobox, например, не должен стилистически зависеть от данных, с которыми он работает. Но при этом пользователя нельзя ограничивать в usability.

При работе на frontend`е с фреймворком ExtJS (v4.2.2) возникла необходимость разделить определение ширины самого комбобокса (которая может быть как фиксированной, так и зависеть от соседних элементов в рамках одного блока) от ширины выпадающего списка, который появляется при нажатии на combobox. Ширина должна всегда иметь максимальное значение по содержимому, т.е. зависеть от самого длинного значения в store combobox`а. Казалось бы ничего сложного в этой задаче нету: гугл + офф. документация (а лучше наоборот) должны решить этот вопрос. Но в случае с ExtJS не все так просто :)


Читать дальше

Работа с интерфейсом грид-панели при обработке событий его стора в ExtJS

В данной статье предоставляется один из способов получить управление интерфейсной частью грид-панели при обработке событий стора данного грида в рамках фреймворка ExtJS (v 4.2.2).
Конкретная задача состоит в том, чтобы получить доступ к управлению кнопкою в тулбаре грида при добавлении и удалении данных из его стора.


Читать дальше

Экспорт данных из таблицы ExtJS Grid в таблицу Excel

Как сделать экспорт данных из таблицы ExtJS Grid в таблицу Excel?

Данное решение экспериментальное и имеет место для небольших, одностраничных, таблиц типа xtype:'grid' с хранилищем типа xtype:'store'.

Для реализации функционала, нам понадобится:
  • Библиотека ExtJS — JavaScript фреймворк. Если вы слышите это впервые, статья не будет полезна.
  • PHP сервер весрии 5+
  • PHPExcel — библиотека для создание Excel документа. Ссылка на сайт производителя.


Grid таблица
Для примера берём простейшую таблицу с тремя колонками ID, Имя, Дата. В данном примера поля имеют тип string (текст).


Так как статья получилась длинная, читайте продолжение под катом...

ExtJS как передать дополнительные параметры proxy используя pagingtoolbar

Задача очень простая, есть внешний набор фильтров данных в DataGrid, который передаёт свои параметры при обращении к серверу.

Как реализовать передачу этих параметров при переключении страниц в pagingtoolbar?
Решение для ExtJS 4, на других версиях не проверялось.
Допустим, у нас есть Store
var DataStore = Ext.create('Ext.data.Store', {
      proxy: {
          type: 'ajax',
          url: '/?r=getParamResults',
          reader: {
              type: 'json',
              root: 'Data',
              totalProperty: 'totalCount'
          }
      }
  });

Нужно повесить обработчик на событие beforeload.
DataStore.on('beforeload', function () {
    DataStore.getProxy().extraParams.PARAM_NAME = 'PARAM_VALUE';
});

Где:
  • PARAM_NAME — имя дополнительного параметра.
  • PARAM_VALUE — значение дополнительного параметра

ExtJS как изменить интервал автозакрытия Tooltip (QuickTips)?

Как в ExtJS изменить интервал закрытия (автоскрытия) tooltip (QuickTips), всплывающего окна?

Задача
Есть элемент, при наведении на который всплывает окно с дополнительной информацией xtype: tooltip. Нужно сделать так, чтоб оно не закрывалось автоматически, а как известно, по умолчанию, оно автоматически закроется через 5000 мс (5 секунд).

Решение
В момент инициализации, после загрузки дерева DOM и всех скриптов, нужно выполнить установку параметров Ext.QuickTips. Для этого требуется написать следующий код:
Ext.onReady(function(
    Ext.QuickTips.init();
    Ext.apply(Ext.QuickTips.getQuickTip(), {
        dismissDelay: 0, // параметр задержки до закрытия QuickTips в миллисекундах 
        showDelay: 100   // параметр задержки до открытия QuickTips в миллисекундах.
        // в данном случае ускоряем его открытие до 100 миллисекунд
    });
));