1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Answers
    1
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default Answered: Moving absolutely positioned components

    Answered: Moving absolutely positioned components


    I am working on a page where I am trying to move components which belong to a panel which has an absolute layout. It kind of works if I manipulate the component's element top/left, but as it is manipulated further, and as more items are added to the container dynamically, the layout gets screwed up. I thought I'd try setting the x and y properties on the component itself and letting the layout manager worry about positioning, but I can't seem to get it to work. It looks as if calls to the container's doLayout() does not update positioning.

    Here's a code sample which shows a symptom of what I am running into:
    Code:
    <html>
    <head>
    <title>Area Chart Tips Bug</title>
    <link rel="stylesheet" type="text/css" href="ext-4.0.5/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-4.0.5/bootstrap.js"></script>
    <script type="text/javascript">
        Ext.require(['*']);
    Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {
            width: 1000,
            height: 1000,
            title: 'Border Layout',
            layout: 'border',
            items: [{
                title: 'Center Region',
                region: 'center',     // center region is required, no width/height specified
                xtype: 'panel',
                layout: 'absolute',
                items:[{
                    xtype: 'button',
                    text: 'Click me',
                    x: 50,
                    y: 50,
                    handler: function(){
                        if(this.moved === true){
                            this.panel.x = 800;
                            this.panel.y = 800;
                            this.ownerCt.doLayout();
                        }
                        else{
                            this.panel = {
                                xtype: 'panel',
                                x: 300,
                                y: 300,
                                movable: true,
                                width: 95,
                                height: 105,
                                title: 'adsf'
                            };
                            this.moved = true;
                            this.ownerCt.add(this.panel);
                        }
                    }
                }]
            }],
            renderTo: Ext.getBody()
        });
    });
    </script>
    </head>
    <body>
        
    </body>
    </html>
    This little example has a button that when clicked the first time will spawn an absolutely positioned panel. Clicking it a second time will change the panel's x and y values and call doLayout on the parent container. I'd expect this to move the panel to its new coordinates but it does not work. Am I doing something wrong, or is this a bug?

  2. I figured out the issue. I am not sure whether it's a bug or by design, but a container with an absolute layout is not tagging its child components with position:absolute. In my real page, which consists of a table of draggable and resizeable panels that are created when a user drags in a leaf from a tree (think dashboard designer, snap-to-grid, etc.) the panel was doing its top/left calculations on its child components as if they were absolutely positioned. But because they were not given that style, they were moving around relative to one another as things were added/removed/resized.

    The combination of setting the container's layout to absolute and adding 'position:absolute' to each child component during their instantiation has resolved this issue, and they are all now being positioned absolutely again.

  3. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Answers
    101
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Your first issue is that this.panel points to a plain object, not an instance of Ext.panel.Panel.

    var panel = this.items.items[0];
    panel.x = 100;
    panel.y = 300;
    this.ownerCt.doLayout();

  4. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Answers
    1
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default


    I modified the example to explicitly create panel as an Ext.panel.Panel, but I'm still unable to get it to move on the second mouse click. I am able to move the panel if I call panel.el.setX/setY/etc. but in my real application, this does not play nicely with the layout manager. I'm pretty stumped at this point and am beginning to think this is a bug, since you'd think that by having the parent container recalculate its layout, it would take into account new x and y values for its children.

    Code:
    <html>
    <head>
    <title>Area Chart Tips Bug</title>
    <link rel="stylesheet" type="text/css" href="ext-4.0.5/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-4.0.5/bootstrap.js"></script>
    <script type="text/javascript">
        Ext.require(['*']);
    Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {
            width: 1000,
            height: 1000,
            title: 'Border Layout',
            layout: 'border',
            items: [{
                title: 'Center Region',
                region: 'center',     // center region is required, no width/height specified
                xtype: 'panel',
                layout: 'absolute',
                items:[{
                    xtype: 'button',
                    text: 'Click me',
                    x: 50,
                    y: 50,
                    handler: function(){
                        if(this.moved === true){
                            var panel = this.ownerCt.items.items[1]; // 0 is the button, 1 is the panel.
                            panel.x = 800;
                            panel.y = 800;
                            this.ownerCt.doLayout();
                        }
                        else{
                            this.panel = Ext.create('Ext.panel.Panel', {
                                x: 300,
                                y: 300,
                                width: 95,
                                height: 105,
                                title: 'adsf'
                            });
                            this.moved = true;
                            this.ownerCt.add(this.panel);
                        }
                    }
                }]
            }],
            renderTo: Ext.getBody()
        });
    });
    </script>
    </head>
    <body>
        
    </body>
    </html>

  5. #4
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Answers
    1
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default


    I figured out the issue. I am not sure whether it's a bug or by design, but a container with an absolute layout is not tagging its child components with position:absolute. In my real page, which consists of a table of draggable and resizeable panels that are created when a user drags in a leaf from a tree (think dashboard designer, snap-to-grid, etc.) the panel was doing its top/left calculations on its child components as if they were absolutely positioned. But because they were not given that style, they were moving around relative to one another as things were added/removed/resized.

    The combination of setting the container's layout to absolute and adding 'position:absolute' to each child component during their instantiation has resolved this issue, and they are all now being positioned absolutely again.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar