Question

I’m rendering a window containing a chart to a div, so that it appears in a certain place on my web page. When I click on the maximise button on the window, I want it maximise to take up the whole screen. Currently it just maximises to the dimensions of the div it is residing in.

I understand that if I render the window to the body, then when the window maximises it takes up the whole screen however the problem with this approach is that then I lose control over where the window is displayed on the page hence I render it to a div. If anyone knows an alternative way of positioning the window on the page, I’d be happy to try this out.

Appreciate any help,

Answer 1

This might not be suitable depending on how strict the placement of the window is and the layout of your app, but you can use x and y config properties to tell the Ext.Window where to render…

EDIT: You can also use window.setPosition(x, y); to tell the window to move to a specific position also. You could hook into the resize event of the window, or… just trigger it manually from the code that is maximizing/minimizing your window.

Ext.create('Ext.window.Window', {
   title: 'Hello',
   height: 200,
   width: 400,
   layout: 'fit',
   x: 20,
   y: 20,
   items: {
      xtype: 'grid',
      border: false,
      columns: [{header: 'World'}],
      store: Ext.create('Ext.data.ArrayStore', {})
   }
}).show();