How to re-config resizer's widthIncrement for one component?

[happyoliver]

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]

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]

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]

does the extjs 4.1 need to be updated?

[happyoliver]

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]

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]

thank you very much, vietits !