1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    10
    Vote Rating
    0
    Manoj.Aggarwal is on a distinguished road

      0  

    Default Window not rendering properly in viewport in exts 4.2

    Window not rendering properly in viewport in exts 4.2


    Hi All,

    I updated my example to extjs 4.2 version and it did not run properly. It was working fine in the previous version.
    As a breif , In my example I have a viewPort. In the view port in the north region I have a toolbar. On clicking Note button (In toolbar) I add window to my viewPort (region center) using renderto functionality.

    Though it adds window to viewPort but it now has 2 problems-:

    1. rendered window does not show up at x,y points I mentioned in showAt(x,y) function. It has top margin. I

    2. I cannot take window to the bottom of viewport. It goes down up to a point. after that as I take it down it comes back again . Don't know why .

    Can somebody help me why it is happening so ?? Though it was working in earlier version.

    Please find attached my .zip file I have attached my solution in that. Just click on note button and will get the window.

    I have removed extjs files from my extjs folder to attach light folder .please add those in website.
    Attached Files

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Would suggest you put together a standalone test case, not everyone is going to have the environment setup to run that.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2012
    Location
    Montreal
    Posts
    46
    Vote Rating
    2
    Stephan Mercier is on a distinguished road

      0  

    Default


    The issue seem to be related to the "constrain" attribute of the window. When constrain=1, the window is initialized with a Y exactly equal to the size of the toolbar in the north region. Even if the Y is provided in the configs at window creation, the Y property is overwritten in the window creation process. When the window show up on the desktop, it shows up with a margin equal to the size of the north region. I have attach a small app that demonstrate that. All if you remove the "constrain" property in ScreenDesktop, the window show at the right place.
    Attached Files
    Last edited by Stephan Mercier; 24 Apr 2013 at 3:24 AM. Reason: Forgot zip

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    We've made great efforts to enable floating components as child items. Try using

    Code:
    myCenterPanel.add(myWindow);
    myWindow.show();
    Floating child items are managed separately, and not included in layouts, and manage their own visibility. That should work.

    It's how this example works: http://docs.sencha.com/extjs/4.2.0/e...ut/border.html

    There's a "Constrained window" button which adds a window to the center region. Take a look at the source.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2012
    Location
    Montreal
    Posts
    46
    Vote Rating
    2
    Stephan Mercier is on a distinguished road

      0  

    Default


    Thanks Animal. I tried your suggestion w/o success. The border example works because the floating window get created when the panel is initialized. But if you create the window programmatically after the panel is initialized, then the issue is still there. I modified and re-attached the test app to demonstrate that.
    Attached Files

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I don't know what to do with that.

    How about just a 10 liner which creates a Window and adds it to a Panel?

  7. #7
    Ext JS Premium Member
    Join Date
    Jan 2012
    Location
    Montreal
    Posts
    46
    Vote Rating
    2
    Stephan Mercier is on a distinguished road

      0  

    Default


    I found out what the issue was. If we add the renderTo attribute when we create the window, we get the margin issue:

    Code:
    var win = Ext.widget('window',{
    	constrain: true,
    //	renderTo: 'desktop',
    	y:1
    });
    var panel = Ext.getCmp('desktop');
    panel.add(win);
    win.show();

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, as with ordinary child items, you do not do the rendering if you add a child item. In the case of a floating child item, it is the first show that does it.

    Floaters are rendered to document.body, NOT their parent container's element. That would pollute the element as far as its layout is concerned, and also not allow unconstrained floaters to move outside the boundaries in all overflow configurations.