1. #1
    Ext JS Premium Member anton.dimitrov's Avatar
    Join Date
    Nov 2011
    Location
    The Netherlands
    Posts
    123
    Vote Rating
    2
    anton.dimitrov is on a distinguished road

      0  

    Default [Ext:4.1 Beta] Window, renderTo with constrain bug

    [Ext:4.1 Beta] Window, renderTo with constrain bug


    In the following example you can observe how a window is rendered to, and constrained to a tab panel within viewport.
    Unfortunately, When `renderTo` is used some strange abnormal activity is observed with the window positioning. If we change the position of the window, then the 'constrain property' is applied (i suppose) with the X and Y coordinates of the viewport rather than the tab. This results in rendering the window.

    Howeer, if we use 'constrainTo', the window is constrained properly, but not rendered within the tab.

    To reproduce, just go to : http://localhost/ext-4.1.0-beta-1/docs/index.html#!/api/Ext.container.Viewport (there are no online beta docs so you will have to test on localhost)
    and change the 'live example' code with this one :


    Code:
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Page Title</h1>',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 150
            // could use a TreePanel or AccordionLayout for navigational items
        }, {
            region: 'south',
            title: 'South Panel',
            collapsible: true,
            html: 'Information goes here',
            split: true,
            height: 100,
            minHeight: 100
        }, {
            region: 'east',
            title: 'East Panel',
            collapsible: true,
            split: true,
            width: 150
        }, {
            region: 'center',
            xtype: 'tabpanel', // TabPanel itself has no title
            activeTab: 0,      // First tab active by default
            items: {
                title: 'Default Tab',
                html: 'The first tab\'s content. Others may be added dynamically',
                listeners: {
                    afterrender: function (tab){
                         Ext.create('Ext.window.Window', {
                            title: 'Hello',
                            height: 200,
                            width: 400,
                            layout: 'fit',
                            constrain: true,
                             renderTo: tab.getEl(),
                            items: {  // Let's put an empty grid in just to illustrate fit layout
                                xtype: 'grid',
                                border: false,
                                columns: [{header: 'World'}],                 // One header just for show. There's no data,
                                store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
                            }
                        }).show();           
                    }
                }
                
            }
        }]
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    750
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Apparently the way to properly do this is to add the window as an item, so I have been told:

    Code:
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Page Title</h1>',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 150
            // could use a TreePanel or AccordionLayout for navigational items
        }, {
            region: 'south',
            title: 'South Panel',
            collapsible: true,
            html: 'Information goes here',
            split: true,
            height: 100,
            minHeight: 100
        }, {
            region: 'east',
            title: 'East Panel',
            collapsible: true,
            split: true,
            width: 150
        }, {
            region: 'center',
            xtype: 'tabpanel', // TabPanel itself has no title
            activeTab: 0,      // First tab active by default
            items: {
                title: 'Default Tab',
                html: 'The first tab\'s content. Others may be added dynamically',
                listeners: {
                    afterrender: function (tab){
                         var win = Ext.create('Ext.window.Window', {
                            title: 'Hello',
                            height: 200,
                            width: 400,
                            layout: 'fit',
                            constrain: true
                        });
    
                        tab.add(win);
    
                        win.show();
                    }
                }
    
            }
        }]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member anton.dimitrov's Avatar
    Join Date
    Nov 2011
    Location
    The Netherlands
    Posts
    123
    Vote Rating
    2
    anton.dimitrov is on a distinguished road

      0  

    Default


    10x for the response Indeed it does the job.

    If this is the case, and the right way is 'adding the component' then the docs must be updated, because the info there is wrong, at least for 4.1 Beta. In 4.0.7 the `renderTo` worked fine.

    Cheers

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    750
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There was a lot of work done in 4.1.0 on this.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    796
    Vote Rating
    37
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Hi Mitchell,

    Sorry for butting in here, but spotted the thread whilst looking for mine in this forum whilst filling out the survey...

    Whilst I've also heard the answer the "proper" way to do this is the add the component as a child of the container, I don't buy it.

    I use contrainTo for a reason; it can be set at config time before the component exists!
    Yes, I managed to work around it for some things, but it's still not right in my opinion, and feel that the issue is being fobbed off a little quickly. More here, with my example...

    I use it to keep windows and tooltips on their own viewport card, so they do not follow you when changing page... If it was a acknowledged bug in 4.0.2a then it's still a bug in 4.1.0!

    Cheers,
    Westy
    Last edited by westy; 18 Jan 2012 at 1:39 AM. Reason: Clarity
    Product Architect
    Altus Ltd.

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    5
    Vote Rating
    0
    BStramke is on a distinguished road

      0  

    Default Still exists in 4.1beta2

    Still exists in 4.1beta2


    This issue still exists in 4.1beta2. It also happens when you define it inside the Items of the container. If you constrain it and use autoShow: true it wont be constrained. Even if you do it inside the afterrender event:

    Code:
    listeners: {
       afterrender: function(component) {
          var w1 = Ext.create('Ext.Window', {
             title: 'Window 1',
             height: 200,
             width: 400,
             constrain: true,
             autoShow: true
          });
          component.add(w1);
       }
    }
    This will work:
    Code:
    listeners: {
       afterrender: function(component) {
          var w1 = Ext.create('Ext.Window', {
             title: 'Window 1',
             height: 200,
             width: 400,
             constrain: true/*,
             autoShow: true*/
          });
          component.add(w1);
          w1.show();
       }
    }

  7. #7
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    5
    Vote Rating
    0
    BStramke is on a distinguished road

      0  

    Default


    Also exists in 4.1b3.

  8. #8
    Sencha User
    Join Date
    Oct 2013
    Location
    Bangalore
    Posts
    2
    Vote Rating
    0
    Jagadeesh2013 is on a distinguished road

      0  

    Default Drag Zone of the parent element will not return true

    Drag Zone of the parent element will not return true


    Hi


    I have a panel where I can drop the window widgets. The panel is a droppable area. The problem I am facing is, if I drop a window in the panel it works and the window size will be set to the width,height of panel. Now If I want to drop another window and swap the previous one I am not able to do it. Because Already a window is in the panel and I will not be able to trigger the drop event of the panel. Can some one help me please . Also have a look at the screen shot to understand my problem
    Picture1.jpg

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