PDA

View Full Version : MDI windows layout



icemanovich
9 Mar 2013, 9:41 AM
Hi!
I'm build an MDI window application that contains multiple windows (Ext.window.Window) inside parend window component. I use Ext 4.0.7.
My question is, how to make windows (children inside) to stick to each other like a corner of parent window?

Can anyone help with this issue?

mitchellsimoens
11 Mar 2013, 7:08 AM
So you don't want the inner window to be draggable?

slemmon
11 Mar 2013, 9:15 AM
Something like this?



Ext.define('MyWindow', {
extend: 'Ext.window.Window'

, initComponent: function () {
var me = this;

me.callParent(arguments);

me.on({
afterrender: function () {
var c = Ext.widget('window', {
title: 'child'
, draggable: false
, resizable: false
, height: 100
, width: 100
});
me.add(c);
c.showAt(0, 0);
}
});
}
});


Ext.create('MyWindow', {
autoShow: true
, title: 'Parent'
, width: 200
, height: 200
});

icemanovich
11 Mar 2013, 9:14 PM
Let me clarify requirements. All child windows are draggable. I need to limit this grag. When windows grad very close to each oher they should not overlay. They should stick to each other at one side.

Here is my code.
Parent window:


Ext.define('NetworkAnalytics.view.mainField',{

extend: 'Ext.panel.Panel',
alias: 'widget.mainField',
id: 'app-mainField',

requires:['NetworkAnalytics.model.HorizontalLine',
'NetworkAnalytics.view.chartPreviewWindow',
'NetworkAnalytics.view.dialogs.dialog',
],
layout: 'fit',
maximizable: true,
maximized: true,
bodyStyle: {position: 'relative'},

currentItems: [],
...
});


Child window:



Ext.define('NetworkAnalytics.view.chartPreviewWindow',{

extend: 'Ext.window.Window',
alias: 'widget.chartPreviewWindow',

cls: 'my-chartWindow',
iconCls: 'icon-chart-window',

height: 200,
width: 250,
layout: 'fit',
constrain: true,
floating: true,

minimizable: true,
});



Init child window (add to parent):


var cmp = Ext.getCmp('app-mainField'),
child = Ext.create('NetworkAnalytics.view.chartPreviewWindow', {
title: title,
id: 'chart-window-' + number,
renderTo: cmp.body,
internalNumber: number
});
cmp.add(child);

icemanovich
20 Mar 2013, 3:31 AM
May be this video will help to understand what i'm want to do...


http://www.youtube.com/watch?feature=player_embedded&v=sxMBUmqAhJw