Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    happyoliver is on a distinguished road

      0  

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

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


    At the beginning, I created a component with resizer configuration
    PHP Code:
                   var newPortlet = new Ext.create('Portals.view.portal.PortletContainer', {
    //                  renderTo: me.body,
    //                        floating:true,
                              
    idportlet.id,
                              
    titlemoduleCfg.title,
                              
    xsnapBox.x,
                              
    ysnapBox.y,
                              
    iconmoduleCfg.icon,
                              
    moduleClassmoduleClass,
                              
    minWidth:moduleSize[0],
                              
    minHeightmoduleSize[1],
                              
    maxWidthgrid.width,
                              
    maxHeightgrid.height,
                              
    widthmoduleSize[0],
                              
    heightmoduleSize[1],
                              
    resizable: {
                                
    handles's e se',
                                
    widthIncrementgrid.gridW,
                                
    heightIncrementgrid.gridH 2,
                                
    transparenttrue,
                                
    pinnedtrue
                              
    }
      }); 
    After resize window, I try to reconfig resizer's widthIncrement and heightIncrement with new value,

    I try the following approach:

    PHP Code:
                 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.

    PHP Code:
            module.resizer.destroy();
                    
    delete module.resizer;
            
    module.resizer.destory();
            
    module.resizer =  new Ext.create('Ext.resizer.Resizer'
                        {
                                    
    targetmodule.id,
                            
    handles's e se',
                            
    widthIncrementnewWidth,
                            
    heightIncrementnewHeight,
                            
    transparenttrue,
                            
    pinnedtrue,
                            
    dynamic:true

                     
    }); 

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

    Thanks in advance.

  2. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    114
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    FYI: The following example works fine with Ext 4.1.1 & Chrome.
    Code:
    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
            }
        });
    });

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    happyoliver is on a distinguished road

      0  

    Default Thanks, Panel doesn't work properly

    Thanks, Panel doesn't work properly


    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

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    happyoliver is on a distinguished road

      0  

    Default we use Extjs 4.1

    we use Extjs 4.1


    does the extjs 4.1 need to be updated?

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    happyoliver is on a distinguished road

      0  

    Default Reconfig Problem is solved

    Reconfig Problem is solved


    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.

  6. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    114
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Try this:
    Code:
    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)
                    }
                }
            }
        });
    });

Thread Participants: 1