1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    84
    Vote Rating
    0
    prajeesh_bs is on a distinguished road

      0  

    Default get size and position of child panels

    get size and position of child panels



    i have an extjs panel container. each time i click on a button a child panel is created inside panel container. I can drag/drop , resize the child panels anywhere in the container. My issue is to get width,height,position of all the child panels and pass them to server side when i click on a save button. Since these child panels are created dynamically i dont know how to retrieve the size and position of child panels. how this can be done? any help would be appreciated.
    This is what i have created so far


    Code:
    Ext.override(Ext.Panel, {
                        // private
                        initEvents : function(){
    
                            if(this.draggable){
                                this.initDraggable();
                            }
                            this.resizer = new Ext.Resizable(this.el, {
                                animate: true,
                                duration: '.6',
                                easing: 'backIn',
                                handles: 'all', // handles:'s' gives vertical resizing only
                                // minHeight: this.minHeight || 100,
                                // minWidth:this.minWidth || 100,
                                pinned: false,
                                transparent:true
                            });
                            this.resizer.on("resize", this.onResizer, this);
                        },
                        onResizer : function(oResizable, iWidth, iHeight, e) {
                            this.setHeight(iHeight);
                            this.setWidth(iWidth);
                            //alert(iHeight);
                        }
                        
                    });
                    var p = new Ext.Panel({
                        border: false,
                        layout: 'absolute',
                        autoScroll:true,
                        margins:'0 0 5 0',
                        ref: 'containerPanel',
                        resizable: true,
                        title: 'Container Panel',
                        buttons: [{
                                text: 'Add Panel',
                                handler: function() {
                                    var childPanelCount = w.containerPanel.items.length;
    
                                    var startYPosition = 10;
                                    startYPosition = startYPosition * childPanelCount;
    
                                    var childPanel = new Ext.Panel({
                                        draggable: dragMeToHeckAndBack,
                                        layout: 'fit',
                                        height: 100,
                                        title: 'New Panel ' + (childPanelCount + 1),
                                        resizable: true,
                                        width: 200,
                                        x: 10,
                                        y: startYPosition,
                                        tools: tools
    
                                    });
    
                                    w.containerPanel.add(childPanel);
                                    w.containerPanel.doLayout();
                                }
                            },
                            {
                                text: 'save',
                                handler: function() {}
                            }
                            ]
                    });
            
                    var dragMeToHeckAndBack = {
                        insertProxy: false,
                        onDrag : function(e){
                            var pel = this.proxy.getEl();
                            this.x = pel.getLeft(true);
                            this.y = pel.getTop(true);
                            var s = this.panel.getEl().shadow;
                            if (s) {
                                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                            }
                        },
                        endDrag : function(e){
                            this.panel.el.setX(this.x);
                            this.panel.el.setY(this.y);
                        }
                    };
            
                    w = new Ext.Window({
                        height: 600,
                        autoScroll:true,
                        layout: 'fit',
                        resizable: false,
                        width: 800,
                        items: [p]
                        
                    });
            
                    w.show();
                });

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    84
    Vote Rating
    0
    prajeesh_bs is on a distinguished road

      0  

    Default


    Code:
    var box = childPanel.getBox();
    
                    alert(
                        'Box dimensions: '
                        +' width='+ box.width
                        +' height='+ box.height
                        +' x='+ box.x
                        +' y='+ box.y
                        );
    If this is wirtten on click event i can get the required properties. But i will be dragging/resizing child panels and finally when save button is clicked i need to get the dimensions. Can anybody help?

  3. #3
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    You can walk the list of child panels thusly:

    Code:
    var childPanelCount = yourParentPanel.items.length;
    var childPanel = null;
    
    for(var i = 0; i < childPanelCount; i++)
    {
      childPanel = yourParentPanel.items.get(i);
      // call childPanel.getWidth(), getHeight(), etc.
      // and store to an Array/JSON collection for later submit.
    }

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    84
    Vote Rating
    0
    prajeesh_bs is on a distinguished road

      0  

    Default


    thanks friend. I saved the dimensions and position of all the child panels and saved it as a json array which could be passed to server side through ajax call. Thanks for your solution

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    84
    Vote Rating
    0
    prajeesh_bs is on a distinguished road

      0  

    Default


    Now when i click on the button child panels are added one below the other inside the container panel. Each time i click on the button i want the child panels to be displayed at a predefined position say x:20,y:20. How this can be done?

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    84
    Vote Rating
    0
    prajeesh_bs is on a distinguished road

      0  

    Default


    The default position of child panel is relative. Each time a new child panel is added positioning is done relative to the previous child panel. Now i have changed the position to absolute which solves my problem.

Similar Threads

  1. how to get panel width, height, position of child panels
    By prajeesh_bs in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 25 Apr 2011, 11:43 AM
  2. Replies: 0
    Last Post: 7 Apr 2011, 7:26 AM
  3. FormPanel validation with child Panels
    By EagleEye666666 in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 19 Jan 2009, 3:43 AM
  4. Position Anchor Layout (anchor your component's position and size to their container)
    By tiago.silva in forum Ext 2.x: User Extensions and Plugins
    Replies: 1
    Last Post: 12 Jan 2009, 7:29 PM

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."