Printable View
jbum,can you provide the actual code?
By the way, anyone can explain to me what the variable newTools in following code means? (I think it is not necessary!)
Code:Ext.ux.MaximizeTool = function() {
this.init= function(ct) {
var maximizeTool = {
id: 'maximize',
handler: handleMaximize,
scope: ct,
qtip: 'Maximize'
};
ct.tools = ct.tools || [];
var newTools = ct.tools.slice();
ct.tools =newTools;
...
Hi,
This is really useful. Thanks!
How would I call the minimize function? I have a grid in the portlet and when I click on a row I need to do an action and minimize the max window.
I am calling the plugin like:
plugins : new Ext.ux.MaximizeTool()
Thanks, Marty
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.
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.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);
};
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:">
Anyone?
Thanks, Marty
Quote:
Originally Posted by moegal
Did someone test this plugin on ExtJS 3.0?
Thanks Ram Krishna, It worked for me. I was doing maximizing in another way, but this is nice. I am switching to it. And thanks again.
Worked for me on ExtJS 2.2 and 3.0 :)Quote:
Originally Posted by Chemist
In the below pulgin, when I minimize the panel , I also want to destroy the dummy panel component. I have added this line to minimize handler, this.dummyComponent.destroy();
But i still get an object in panel.dummyComponent when i try to maximize the panel for second time. is there any way i can get rid of this dummy component and recreate it everytime I maximize the panel.
Code:Ext.ux.MaximizeTool = function() {
this.init= function(ct) {
var maximizeTool = {
id: 'maximize',
handler: handleMaximize,
scope: ct,
qtip: 'Maximize'
};
ct.tools = ct.tools || [];
var newTools = ct.tools.slice();
ct.tools =newTools;
for(var i=0, len=ct.tools.length;i<len;i++) {
if (ct.tools[i].id=='maximize') return;
}
ct.tools[ct.tools.length] = maximizeTool;
};
function handleMaximize(event, toolEl, panel){
panel.originalOwnerCt = panel.ownerCt;
panel.originalPosition = panel.ownerCt.items.indexOf(panel);
panel.originalSize=panel.getSize();
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);
}
//alert(panel.dummyComponent);
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);
};
function handleMinimize(window) {
this.dummyComponent.getEl().unmask();
this.dummyComponent.setVisible(false);
this.originalOwnerCt.insert(this.originalPosition, this);
this.originalOwnerCt.doLayout();
this.setSize(this.originalSize);
this.tools['maximize'].setVisible(true);
if (this.tools['toggle']) this.tools['toggle'].setVisible(true);
this.dummyComponent.destroy();
}
};
Has anyone had success with this UX in a tab panel? Out of the box implementation inserts a new blank tab on minimize instead of adding the maximized grid back into the tab it was originally contained in.
hi,
Panel maximize is working for me. but If I click the close button the panel . panel closed and the data are missing.
Thanks,
Raja S