Results 1 to 7 of 7

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default 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 User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    114
      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 Premium Member
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default 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 Premium Member
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default we use Extjs 4.1

    does the extjs 4.1 need to be updated?

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default 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 User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    114
      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)
                    }
                }
            }
        });
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •