PDA

View Full Version : How to re-config resizer's widthIncrement for one component?



happyoliver
17 Nov 2012, 2:00 AM
At the beginning, I created a component with resizer configuration


var newPortlet = new Ext.create('Portals.view.portal.PortletContainer', {
// renderTo: me.body,
// floating:true,
id: portlet.id,
title: moduleCfg.title,
x: snapBox.x,
y: snapBox.y,
icon: moduleCfg.icon,
moduleClass: moduleClass,
minWidth:moduleSize[0],
minHeight: moduleSize[1],
maxWidth: grid.width,
maxHeight: grid.height,
width: moduleSize[0],
height: moduleSize[1],
resizable: {
handles: 's e se',
widthIncrement: grid.gridW,
heightIncrement: grid.gridH - 2,
transparent: true,
pinned: true
}
});

After resize window, I try to reconfig resizer's widthIncrement and heightIncrement with new value,

I try the following approach:



module.resizable.widthIncrement = newWidth; // not work
module.resizer.widthIncrement = newWidth ; // not work
module.resizable.heightIncrement = newWidth; // not work
module.resizer.resizeTracker.widthIncrement = newWidth ; // not work



I tried to re-create resizer with new configuration, it doesn't work, it always try to use the old widthIncrement value.



module.resizer.destroy();
delete module.resizer;
module.resizer.destory();
module.resizer = new Ext.create('Ext.resizer.Resizer',
{
target: module.id,
handles: 's e se',
widthIncrement: newWidth,
heightIncrement: newHeight,
transparent: true,
pinned: true,
dynamic:true

});




Can you help me to re-config resizer's widthIncrement dynamically?

Thanks in advance.

vietits
17 Nov 2012, 5:32 AM
FYI: The following example works fine with Ext 4.1.1 & Chrome.


Ext.onReady(function(){
var win = Ext.create("Ext.window.Window", {
title: "Test Ext.layout.container.Anchor",
autoShow: true,
width: 200,
height: 100,
tbar: {
items: [{
text: 'Change Increment',
handler: function(){
win.resizer.resizeTracker.widthIncrement = 100;
win.resizer.resizeTracker.heightIncrement = 50;
}
}]
},
resizable: {
handles: 's e se',
widthIncrement: 10,
heightIncrement: 10,
transparent: true,
pinned: true
}
});
});

happyoliver
17 Nov 2012, 1:44 PM
Thanks for your quickly reply,

My module is an Ext.panel.Panel with postion of absolute.

after resize my floating Panel, I want to re-config my panel's resizer with new widthIncrement value, but it doesn't work. it always try to use the original widthIncrement.

By the way, how to customize the event handler for resizer's "resizeEnd" or "resize" after panel resize?

My user case is:

1. when window (browser) change the size
2. I will resize my floating panel with the resizer
3. after window resize, I need to update panel's resizer.

Thanks

happyoliver
17 Nov 2012, 1:46 PM
does the extjs 4.1 need to be updated?

happyoliver
17 Nov 2012, 3:21 PM
Because I set the minWidth and minHeight for panel, I need to reset resizer.resizeTracker.minWidth and resizer.resizeTracker.minHeight also.

Can anyone show me how to bind the customized "resizeEnd" and "resize" event handler for panel's resizer?

Thanks.

vietits
17 Nov 2012, 4:28 PM
Try this:


Ext.onReady(function(){
var win = Ext.create("Ext.window.Window", {
title: "Test Ext.layout.container.Anchor",
autoShow: true,
width: 200,
height: 100,
tbar: {
items: [{
text: 'Change Increment',
handler: function(){
win.resizer.resizeTracker.widthIncrement = 100;
win.resizer.resizeTracker.heightIncrement = 50;
}
}]
},
resizable: {
handles: 's e se',
widthIncrement: 10,
heightIncrement: 10,
transparent: true,
pinned: true,
listeners: {
resize: function(){
console.log('resize', arguments)
}
}
}
});
});

happyoliver
19 Nov 2012, 11:35 AM
thank you very much, vietits !