Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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