this plug-in has been very helpful. Many thanks!
Now I am trying to modify it a little bit to display some extra hidden columns in the maximized panel.
PHP Code:
function handleMaximize(event, toolEl, panel){
panel.originalOwnerCt = panel.ownerCt;
panel.originalPosition = panel.ownerCt.items.indexOf(panel);
panel.originalSize=panel.getSize();
// Display hidden Columns
var columns = panel.getColumnModel().getColumnsBy(function(c){
return c.hidden;
});
for(var i=0, len=columns.length;i<len;i++) {
columns[i].hidden = false;
}
panel.getView().fitColumns(false);
panel.getView().updateAllColumnWidths();
panel.doLayout();
// End of modifications
if (!toolEl.window) {
var defaultConfig = {
id: (panel.getId() + '-MAX'),
width: (Ext.getBody().getSize().width - 100),
height: (Ext.getBody().getSize().height - 100),
resizable: true,
draggable: true,
closable: true,
closeAction: 'hide',
hideBorders: true,
plain: true,
layout: 'fit',
autoScroll: false,
border: false,
bodyBorder: false,
frame: true,
pinned: true,
bodyStyle: 'background-color: #ffffff;'
};
toolEl.window = new Ext.Window(defaultConfig);
toolEl.window.on('hide', handleMinimize, panel);
}
if (!panel.dummyComponent) {
var dummyCompConfig = {
title: panel.title,
width: panel.getSize().width,
height: panel.getSize().height,
html: ' '
};
panel.dummyComponent = new Ext.Panel(dummyCompConfig);
}
toolEl.window.add(panel);
if (panel.tools['toggle']) panel.tools['toggle'].setVisible(false);
panel.tools['maximize'].setVisible(false);
panel.originalOwnerCt.insert(panel.originalPosition, panel.dummyComponent);
panel.originalOwnerCt.doLayout();
panel.dummyComponent.setSize(panel.originalSize);
panel.dummyComponent.setVisible(true);
panel.dummyComponent.getEl().mask('This is maximized.');
toolEl.window.show(this);
};
Unfortunately the panel does not seems to get refreshed (take the new columns into account) and the previously hidden columns are not visible because its width is 0 or close to it.
This is my panel grid code, which is inside a viewport with a fit layout:
PHP Code:
// create the Grid
var grid = new Ext.grid.GridPanel({
store: pagingProxyStore, //2.3
itemId: 'maxTable',
columns: [
{id:'procId', header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderSubtypeAndBasculement},
{header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderClassIcon},
{header: "Auteur", width: 50, sortable: true, dataIndex: 'auteur'},
{header: "Référence Interne", width: 150, sortable: true, dataIndex: 'refDg'},
{header: "Réceptionnée le", width: 100, sortable: true, dataIndex: 'modifDate', renderer: Ext.util.Format.dateRenderer('d/m/Y')},
{header: "State", width: 100, sortable: true, dataIndex: 'state', hidden: true},
{header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderPrintLink},
{header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderUseLink}
],
stripeRows: false,
collapsible: true,
autoHeight: true,
iconCls: 'icon-page',
border: false,
plugins: [
new Ext.ux.MaximizeTool(),
new Ext.ux.grid.AutoSizeColumns()
],
viewConfig: {
forceFit: true,
scrollOffset: 0,
getRowClass: function(record, index){
return (record.data.procType + '-row');
}
},
bbar: pagingToolBar
});
I have been searching in the forums and trying different suggestions but I did not find a solution.
Please, help me. I am a newbie and still have a lot to learn