PDA

View Full Version : Grid column header menu - sort columns alphabetically



Nagendrareddy
6 May 2014, 9:10 AM
Hi

Am trying to migrate my application from 3.4 version to 4.2. Am stuck up with few things

In 3.4 i used but in 4.2 its not working


Ext.override(Ext.grid.GridView, { beforeColMenuShow: function () {
// Copy necessary data for the column items to an array
var cm = this.cm, colCount = cm.getColumnCount();
var sortedColumns = new Ext.util.MixedCollection();
for (var i = 0; i < colCount; i++) {
if (cm.config[i].hideable !== false) {
var columnId = cm.getColumnId(i);
sortedColumns.add(columnId,
{
id: columnId,
header: cm.getColumnHeader(i),
isHidden: cm.isHidden(i)
});
}
}
// Sort the column data by column header texts
sortedColumns.sort('ASC',
function (a, b) {
var headerA = a.header.toLocaleLowerCase();
var headerB = b.header.toLocaleLowerCase();
return headerA.localeCompare(headerB)
});


this.colMenu.removeAll();


// finally create the menu items from the sorted column data
sortedColumns.each(function (columnData) {
this.colMenu.add(new Ext.menu.CheckItem({
itemId: 'col-' + columnData.id,
text: columnData.header,
checked: !columnData.isHidden,
hideOnClick: false
}));
}, this);
}


});

4.2 Grid Code is below


grid = Ext.create('Ext.grid.Panel', {
autoHeight: true,
width: gridWidth(),
store: store,
trackMouseOver: true,
stripeRows: true,
frame: true,
border: true,
enableColumnHide: true,
enableColumnMove: true,
enableColumnResize: true,
enableHdMenu: true,
columns: gridColumns,
loadMask: true,
autoScroll: true,
selModel: selectionModelChkBox,


viewConfig: {
forceFit: false,
scrollOffset: 0,
onLoad: Ext.emptyFn /*Note : Function to prevent scrollbar to re-initialize the position */
},


// paging bar on the bottom
tbar: topToolBar,
bbar: bottomToolBar,
listeners: {
cellclick: function (grid, cell, columnIndex, record, row, rowIndex, event) {
if (grid.headerCt.getGridColumns()[columnIndex].refWidth) {
popupDetails(grid, rowIndex, "indexID", "time_stamp", "dept_no", "Trade", "trade_blotter");
//UIServiceError.clearText();
}
},
columnresize: function (columnIndex, newSize) {
grid.headerCt.syncFx();
blotterView.saveBlotterSession(grid);
},
columnmove: function (oldIndex, newIndex) {
blotterView.saveBlotterSession(grid);
}
}
});

Can anyone please help me. Please post some sample code as am new to extjs.
Appreciate in advance.

Nagendrareddy
6 May 2014, 9:35 AM
Ext.grid.header.Container.addMembers({
sortColumns: function (items) {
var itemsLn = items.length,
columns = [],
i = 1,
j;
if (itemsLn > 0) {
columns[0] = items[0];
for (i; i < itemsLn; i++) {
j = Ext.each(columns, function (col) {
if (col.text > items[i].text) {
return false;
}
});


if (true === j) {
Ext.Array.push(columns, items[i]);
} else {
Ext.Array.insert(columns, j, [items[i]]);
}
}


return columns;
}
}
});




Ext.grid.header.Container.override({
getColumnMenu: function (headerContainer) {
var menuItems = [],
i = 0,
item,
items = headerContainer.query('>gridcolumn[hideable]'),
itemsLn = items.length,
menuItem;




items = this.sortColumns(items);
for (; i < itemsLn; i++) {
item = items[i];
menuItem = new Ext.menu.CheckItem({
text: item.menuText || item.text,
checked: !item.hidden,
hideOnClick: false,
headerId: item.id,
menu: item.isGroupHeader ? this.getColumnMenu(item) : undefined,
checkHandler: this.onColumnCheckChange,
scope: this
});
menuItems.push(menuItem);




// If the header is ever destroyed - for instance by dragging out the last remaining sub header,
// then the associated menu item must also be destroyed.
item.on({
destroy: Ext.Function.bind(menuItem.destroy, menuItem)
});
}
return menuItems;
}
});