Results 1 to 6 of 6

Thread: Make A Panel Resizable Example request

  1. #1

    Default Make A Panel Resizable Example request

    Can you give me please an example of a resizable Panel?

    The code of my panel is the following:
    PHP Code:
    function getRFICartPanel(){
        var 
    rfiCartPanel = new Ext.Panel({
            
    title'RFI Cart',
            
    id'rfiCartPanel',
            
    collapsibletrue,
            
    height200,
            
    autoScrolltrue,
            
    bodyStyle'padding: 5px',
            
    contentEl'rfiCart',
            
    iconCls'rfiCart'
        
    });
        
        return 
    rfiCartPanel;

    Thanks in advance.

  2. #2

    Default

    Do you mean a panel with a thin resizable, dragable border around it like the example photo application showing Jack's children or a panel that will auto fit to its parent container?

  3. #3

    Default

    I would like a panel that can be resizable.
    The panel's content is a jsp page if that plays any role

  4. #4

    Default Example of making a panel resizable

    As originally posted by hendricd on thread http://extjs.com/forum/showthread.ph...esizable+panel:


    "Check out the source for Ext.Window.initEvents. It demonstrates how to setup a Resizer for a panel."
    After studying the mentioned source code, I was able to add resizability to the ColumnTree from the extjs 2.0 examples:

    http://extjs.com/deploy/dev/examples...lumn-tree.html

    When looking at the Ext.Window source, pay particular attention to two things:
    1. the undocumented (as of this writing) config property resizeElement (for Resizable)
    2. note that the proxy object is simply the thin bar that appears during resizing (after clicking and beginning to drag to resize a thin rectangle represents the new size (rather than dynamically updating the panel while you size, which many times would not be performant).
    Last edited by bullfrog; 7 Dec 2007 at 7:42 AM. Reason: fixed formatting

  5. #5
    Ext User
    Join Date
    Apr 2007
    Location
    Melbourne, Australia
    Posts
    169

    Default Ext overrides for resizable panel

    I put this in some of my JS to get the resizing working:

    PHP Code:
    Ext.override(Ext.Panel, {
        
    // private
        
    initEvents : function(){        
            if(
    this.keys){
                
    this.getKeyMap();
            }
            if(
    this.draggable){
                
    this.initDraggable();
            }
            if(
    this.resizable){
                
    this.proxy this.el.createProxy("x-window-proxy");
                
    this.proxy.enableDisplayMode('block');        
                
    this.resizer = new Ext.Resizable(this.el, {
                    
    minWidththis.minWidth,
                    
    minHeight:this.minHeight,
                    
    handlesthis.resizeHandles || "all",
                    
    pinnedtrue,
                    
    resizeElement this.resizerAction
                
    });
                
    this.resizer.window this;
                
    this.resizer.on("beforeresize"this.beforeResizethis);
                
    this.resizable false;
            }        
        },
        
    // private
        
    beforeDestroy : function(){
            
    Ext.destroy(
                
    this.resizer,
                
    this.dd,
                
    this.proxy
            
    );
            
    Ext.Element.uncache(
                
    this.header,
                
    this.tbar,
                
    this.bbar,
                
    this.footer,
                
    this.body
            
    );
        },    
        
    // private
        
    resizerAction : function(){
            var 
    box this.proxy.getBox();
            
    this.proxy.hide();
            
    this.window.handleResize(box);
            return 
    box;
        },
        
        
    // private
        
    beforeResize : function(){
            
    this.resizer.minHeight Math.max(this.minHeightthis.getFrameHeight() + 40); // 40 is a magic minimum content size?
            
    this.resizer.minWidth Math.max(this.minWidththis.getFrameWidth() + 40);
            
    this.resizeBox this.el.getBox();
        },

        
    // private
        
    updateHandles : function(){
            if(
    Ext.isIE && this.resizer){
                
    this.resizer.syncHandleHeight();
                
    this.el.repaint();
            }
        },    
        
        
    // private
        
    handleResize : function(box){
            var 
    rz this.resizeBox;
            if(
    rz.!= box.|| rz.!= box.y){
                
    this.updateBox(box);
            }else{
                
    this.setSize(box);
            }
            
    this.focus();
            
    this.updateHandles();
            
    this.saveState();
            if (
    this.ownerCt) {
                
    this.ownerCt.doLayout();
            }
            
    this.fireEvent("resize"thisbox.widthbox.height);
        }
    }); 

  6. #6

Posting Permissions

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