Results 1 to 5 of 5

Thread: Window layout problem

  1. #1
    Sencha User
    Join Date
    Oct 2016
    Posts
    3
    Vote Rating
    0
      0  

    Default Answered: Window layout problem

    Hello,

    I try to implement a simple window with relative size ( like "30%") but expand window didn't work, could you give me some advice, thanks.

    Code:

    Ext.onReady(function() {
    Ext.create('Ext.window.Window', {
    height: "30%",
    width: "30%",
    minimizable: true,
    title: 'Test Minimize',
    listeners: {
    "minimize": function(window, opts) {
    window.collapse();
    window.setWidth(150);
    window.alignTo(Ext.getBody(), 'bl-bl')
    }
    },
    tools: [
    {
    type: 'restore',
    handler: function(evt, toolEl, owner, tool) {
    var window = owner.up('window');
    window.setWidth("30%");
    window.expand('', false);
    window.center();

    }}
    ]


    }).show()
    });

  2. Yes, Lee is great! Glad to see you found your solution, and thanks for sharing with the community.

  3. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,501
    Answers
    484
    Vote Rating
    279
      0  

    Default

    The problem seems to be due to your using a percentage for the window height/width, as you've no doubt noticed. The docs for window sizing indicate that this value must be a integer representing the pixels.
    http://docs.sencha.com/extjs/4.2.6/#...dow-cfg-height

    No way to meet your requirements using fixed dimensions? If not, you might be able to calculate the width of the screen, take 30% and apply it to your window width.

    Lifecycle management for your web apps

  4. #3
    Sencha User
    Join Date
    Oct 2016
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Thanks a lot for your response, yes the percentage of window is the problem, suddenly I can't change it, but Madame Lee Boonstra gave me the solution, that's the new code:

    Ext.onReady(function() {


    Ext.create('Ext.window.Window', {
    height: "30%",
    width: "40%",
    closable: true,
    constrain: true,
    resizable: true,
    maximizable: true,
    minimizable: true,


    windhide: false,
    setWindhide: function(values) {
    this.windhide = values;
    },
    getWindhide: function() {
    return this.windhide;
    },
    minimizable: true,
    title: 'windows',
    listeners: {
    "minimize": function(window, opts) {
    var windstat = window.getWindhide();
    console.log(windstat);
    if (windstat == true) {
    window.setWidth(300);
    window.setHeight("40%");
    //window.setSize(w, h);
    window.expand('', false);
    window.isCollapsingOrExpanding = 0;
    window.setWindhide(false);
    window.center();
    window.tools['maximize'].setVisible(true);


    } else {
    window.collapse();
    window.setWidth(20);
    window.setWindhide(true);
    window.tools['maximize'].setVisible(false);
    window.alignTo(Ext.getBody(), 'bl-bl');


    }
    }
    },
    tools: []


    }).show()
    });

  5. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,501
    Answers
    484
    Vote Rating
    279
      0  

    Default

    Yes, Lee is great! Glad to see you found your solution, and thanks for sharing with the community.

    Lifecycle management for your web apps

  6. #5
    Sencha User
    Join Date
    Oct 2016
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Yes, she is great, thanks for you, for your response .

Similar Threads

  1. help need to identify this window layout problem
    By extremed in forum Ext: Q&A
    Replies: 7
    Last Post: 27 Mar 2012, 4:02 AM
  2. Window layout problem
    By thughes in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 8 Mar 2010, 2:11 PM
  3. Layout problem in Ext.Window
    By mayras in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 17 Dec 2008, 3:26 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •