PDA

View Full Version : HOW TO: Auto resize window in an HTML div



ben.gillis
27 Jan 2012, 1:14 PM
...I see (lots of) various knobs to turn, no luck yet, hoping it's faster to ask on the forum.

I have a plain ol' HTML div containing an Ext.Window. Then, I create an xtype of 'chart' which I place in the Ext.Window via .add().

PROBLEM: the containing HTML div resizes itself and now I need the graph to resize, too.

(a) The graph can resize after the HTML containing div resizes, or
(b) The graph can resize *as* the HTML containing div resizes (to give a smoother look-n-feel).

I *might* not have control over getting an event notification of resize by the containing div (looking into that) so that I can redraw the Window. So, I'm hoping some way of using autoSize with a layout of 'fit' or simple like that works.

27 Jan 2012, 1:46 PM
ben,

What do you mean by "containing an Ext.Window". Window is designed to be floated above the rest of the page and absolutely positioned.

That said, are you using the "fit" layout on the window?

ben.gillis
27 Jan 2012, 2:21 PM
> What do you mean by "containing an Ext.Window"
I am creating Ext.Window with a renderTo to that containing div:

winMyGraphWindow = Ext.create('Ext.Window', {
...
renderTo: myContainingDiv,
layout: 'fit',
...

In another routine at some point in time, I stuff a chart inside the window via

var items = { .... }
then, winMyGraphWindow.add. (And, .remove / .add calls to keep changing the chart inside the window. This may be irrelvant, just letting you know in case I need to do something at the window or chart level to fix this).

So, my DOM looks like this:

<div id="_myContainingDiv" class="container-div">
<div id="window-1146" class="x-window x-window-default x-closable x-window-closable x-window-default-closable x-layer" style="position: absolute; width: 100%; height: 100%; ...

Again, the containing div is going to dynamically resize, both height and width, but the graph remains the size of the containing div at the time it was rendered.

I'm not sure I have a way to call render after the containing div resizes itself so I can call .redraw on the Window (which I think would resize it, again, to the size of the containing div due to the 'fit' layout. Even if I did, ideally I would like the chart inside the window to shrink/expand as the containing div changes size - it's smoother than waiting 'til it's done resizing then redraw.

27 Jan 2012, 2:46 PM
You should be using panel instead. Window does not buy you anything in this case.

I am replying from my phone, hence no code.

You must listen to the window resize event, then tell your panel instance to set its size based on the container element's (where it is rendered to) dimensions.

ben.gillis
27 Jan 2012, 3:16 PM
The window bought me a way to move it around on the page, panel did not.

I'm not sure I can listen to a window resize event, because it's not resizing! (It will resize if I grab the window's resize handles, but that's manual). The containing div resizes and I need something equivalent to the window, with chart inside, always filling up the div. That works on initial render via height and width set to 100% and 'fit' as the layout. Now, I need it to stay that way in-sync with the containing div.

Any help much appreciated. I'm still looking with trial & error, but no success.

27 Jan 2012, 3:56 PM
I'm very confused now. You render the window to the div, the div gets resized, and you want resize the window, yet move the window?

:-\

any way you could provide a screenshot and post example code?

ben.gillis
27 Jan 2012, 7:51 PM
Answer to your question: yes. Whatever the initial size of the containing <div> is when the window is initially rendered is the size of the chart inside the window. The user can drag-and-drop <div> elements and in the process, those <div> elements can change size (height and/or width). It's pretty much a drag-n-drop desktop design.

I can't put screenshots up, but just picture your desktop divided by four (four <div>) and you render four windows, one into each div. Then, you render charts inside each window. Now, say you want a six-by-six arrangement of div's...the original four must shrink in size. Or, the inverse, you divide the desktop into two halfs, the div's increase in size. The windows and charts inside each div must grow/shrink accordingly.

DOM-wise, it's a simple <div> with any CSS styling I want on it to make this work. And, the window inside via the renderTo of the Ext.Window. Build any ol' chart and .add() it to the window. Now, resize the containing <div> (manually or programmatically) and make the window + chart grow/shrink with its containing div.

My code above plus whatever is available in Ext JS 4 plus CSS3 has to do the job. It can be done plain ol' CSS/HTML/jQuery, for example. But, how to add Ext JS 4 to the mix to get charts to do this, too.

ben.gillis
28 Jan 2012, 2:52 PM
???

Did you give up on me? :-)

ben.gillis
30 Jan 2012, 9:52 PM
No reply???

Anybody out there???

JExtJS
22 Jul 2013, 5:04 AM
Have you got an answer to this problem? I experienced the same issue when I rendered a panel to a <div> template generated in a data view (Ext.view.View). The panel does not automatically resize itself when the view is resized.

Is it a bug or we are supposed to do something here? I understand Ext.view.View is not a container. Resizing could be an issue. I tried to call 'doComponentLayout' of the view after the 'resize' event of the view. It does not seem to do anything. Here is the code snippet. It dynamically create panel widgets and render it to the <div> template based on data in the binding store:

Ext.create('Ext.view.View', {
tpl: ['<tpl for=".">',
'<div id="widget{column}-{row}:{type}-{widgetId}" style="position:relative; width:auto;"
class="widgetsColumn">',
'</div>',
'</tpl>'
],

listeners: {
refresh: function(me) {
var widgetStore = me.getStore();
var count = widgetStore.getCount();
if (count == 0) {
return;
}
widgetStore.each(function(rec) {
var columnIdx = rec.get('column');
var rowIdx = rec.get('row');
var type = rec.get('type');
var widgetId = rec.get('widgetId');
var widgetName = rec.get('name');
var height = rec.get('height');
var isExpanded = rec.get('isExpanded');
var widgetTpl = me.getWidgetTpl(columnIdx, rowIdx, type, widgetId);
var widgetWin = Ext.create('Ext.panel.Panel', {
renderTo: widgetTpl,
autoRender: true,
autoShow: true,
//m_widgetModel: rec,
title: widgetName,
height: height,
collapsed: !isExpanded
});
});
},

resize: function(me) {
me.doComponentLayout();
}

},

getWidgetTpl: function(column, row, type, widgetId) {
var tplId = "widget" + column + "-" + row + ":" + type + "-" + widgetId;
var widgetTpl = Ext.get(tplId);
return widgetTpl;
}


}

.