PivotGrid.

“Первый компонент, который мы хотели бы представить это PivotGrid. Это компонент является инструментом обобщения данных, он идеально подходит для удобной организации больших объемов данных. PivotGrid поможет вам и вашим пользователям суммировать данные любого количества полей, а также легко разбить даннные, например, по параметрам город, год квартал. Посмотрите на пример по ссылке, там мы суммируем данные о продажах. PivotGrid легко интегрируются в уже существующие магазины, а создаются всего с помощью нескольких строк кода. Мы создали ряд примеров, демонстрирующих различные возможности компонента. Вот небольшой пример как можно создать таблицу из примера.”

Личное мнение: Акцентрируется внимание на том, что компонент работает с большими объемами данных, но в примере компонент грузит данные довольно продолжительное время, отсюда возникает вопрос, а есть ли заявленный profit ?

var pivotGrid = new Ext.grid.PivotGrid({
    title     : 'PivotGrid example',
    store     : myStore,
    aggregator: 'sum',
    measure   : 'value',

    leftAxis: [
        {dataIndex: 'person',  width: 80},
        {dataIndex: 'product', width: 90}
    ],

    topAxis: [
        {dataIndex: 'year'},
        {dataIndex: 'city'}
    ]
});

Компонент Календарь.

“Многие разработчики просили нас сделать официальную поддержку компонента Calendar. Календари это открытый вопрос: Есть много способов их реализации и много функций, которые можно добавить. Мы рады вам представить новый компонент для отображения событий за день, неделю и месяц, все они представлены в примере компонента. Также как и с компонентом PivotGrid, новый компонент Calendar предназначен для работы с уже готовым набором данных, что означает легкую интеграцию с уже существующим кодом. Мы пока не включили компонент Calendar в ext-all.js, но включили рабочие версии этих компонентов в examples/calendar директории SDK.”

Личное мнение: по функционалу календарь пока значительно уступает проприетарному компоненту sheduler, но решение по разработке собственного компонента, очень хороший шаг, его не хватало.

Еще кое-что.

“В дополение к этим двум компонентам в новой версии в Grid появился новый тип столбца ActionColumn. В этом типе столбцов рисуются иконки, к которым можно приписать любые функции для манипуляции с Grid. Например, как показано в примере, на двух кнопках работают функции покупки \ продажи. Как и в предыдущий версиях, обратная совместимость является для нас приоритетной задачей. Для нормальной работы нового компонента PivotGrid были внесены изменения в GridView, который, как известно, являлся причиной некорректного поведения в некоторых ситуациях, но все эти проблемы буду исправлены в финальной версии.”

Источник http://www.sencha.com/blog/2010/07/28/announcing-ext-js-3-3-beta-pivotgrids-calendars-and-more/

Теперь о задачи которая передо мной встала. Нужно было в компонент Ext.grid добавить в каждую строчку (создать колонку) кнопок при нажатии на которую происходит вызов окна с параметрами. Опционально можно сделать в этом поле любой объект, допустим кнопку которая удаляет текущую строку.

Создадим класс который расширит возможности Ext.grid.RowSelectionModel класса строк Ext.grid. Я назвал этот класс Ext.ux.grid.Goto

Ext.ns('Ext.ux.grid');

Ext.ux.grid.Goto = Ext.extend(Ext.grid.RowSelectionModel, {
width: 30,
sortable: false,
dataIndex: 0, // Нужно задать полю, потому как в родителе этот параметр не может быть пустым

menuDisabled: true,
fixed: true,
id: 'deleter',

initEvents: function(){
Ext.ux.grid.Goto.superclass.initEvents.call(this);
this.grid.on('cellclick', function(grid, rowIndex, columnIndex, e){
//Проверяем, что нажали именно на нашу ячейку Ext.grid
if(columnIndex==grid.getColumnModel().getIndexById('deleter')) {
var record = grid.getStore().getAt(rowIndex);
//Получаем параметры для вызова окна, это данные из текущей строки Ext.grid
var CampaignStepID = record.get('CampaignStepID');
var SourceID = record.get('SourceID');
var StepName = record.get('CampaignStepName');
//Вызываем функцию которая создаст окно с параметрами
getCampaignStepCard(CampaignStepID, SourceID, StepName, this.desktop);
}
});
},

//Этот метод позволяет нам нарисовать  в каждой ячейке нашей колонки, что мы хотим
renderer: function(v, p, record, rowIndex){
return '<div class="silk-goto" type="button" style="width: 16px; height: 16px;cursor:pointer;"></div>';
}
});

Далее нам необходимо прицепить к Ext.grid наш плагин.
Создаем новый объект

//Добавляем плагин который активирует кнопку перехода в гриде
var GotoButton = new Ext.ux.grid.Goto();

var CampaignListCm = new Ext.ux.grid.LockingColumnModel({
// specify any defaults for each column
columns:
[
{
id: 'id',
header: 'ID',
dataIndex: 'ID',
menuDisabled: false,
hideable: false,
hidden: true,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'SourceID',
header: 'SourceID',
dataIndex: 'SourceID',
menuDisabled: false,
hideable: false,
hidden: true,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
GotoButton //Наша дополнительная колонка
]
});

А в сам Ext.grid добавляем наш плагин как selModel

var grid = new Ext.grid.EditorGridPanel({
id: 'CampaignSourceID',
store: CampaignSourceList,
cm: CampaignListCm,
selModel: GotoButton,
stripeRows: true,
columnLines:true,
region: 'center'
});

Смотрим на полученный результат

Row in Grid