PDA

View Full Version : Parent panel not scrolling itself when dragging or moving child window inside it



Manoj.Aggarwal
21 Aug 2012, 10:20 AM
Hello All,

I have a Ext.panel. my panel has height of 400 and its autoScroll is true . with in the panel I add 2 windows as shown below . 1st window(big window) has height 700 . because of this height scroll comes on panel . height of second window(small window) in just 200. now when I drag second window, panel does not auto scroll itself towards down or up.

I want Panel to scroll itself automatically up or down when I drag or move small window inside it. I would request somebody to help me in this.




var pane = null;
Ext.require(['*']);
Ext.onReady(function () {
pane = Ext.create('Ext.panel.Panel', {
region: 'center',
height: 400,
width: 800,
title: 'Hello',
id: 'pane',
renderTo: Ext.getBody(),
autoScroll: true
});

var window = Ext.create('Ext.Window', {
title: 'big window for scroll',
width: 400,
height: 700,
constrain: true
, renderTo: pane.body

}).show();

window = Ext.create('Ext.Window', {
title: 'small window',
width: 400,
height: 200,
constrain: true
, renderTo: pane.body
}).show();

});


hoping for little help and thanks in advance.

scottmartin
21 Aug 2012, 3:48 PM
You are trying to place a window 'inside' a panel? Window is topmost.

Scott

slemmon
21 Aug 2012, 9:37 PM
I tried and can't really figure out how to do it either. I set a mousemove listeners on Ext.getBody() and console.logged pane.el.getBottom() - window.el.getBottom() as I would drag the window and guess the window is hidden via offsets when it's dragged and instead you'd have to watch the drag proxy's el's bottom/top to see where it's at, not the window.

Sorry. Tried. :(

Manoj.Aggarwal
22 Aug 2012, 4:05 AM
Hi Scott,

As per your suggestion ,did the reverse now.
As container I am using window and inside that I am containing panels. But with this too , the behavior is same.
when I drag panels inside window , window does not scroll itself automatically. with this , I am also not getting how should I constrain panels because I do not see any constrain property with panels and they are freely moving in my case now .

below is the updated code -:


Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

var pane = null;

Ext.require(['*']);

Ext.onReady(function () {
pane = Ext.create('Ext.window.Window', {
region: 'center',
height: 400,
width: 800,
title: 'Hello',
id: 'pane',
renderTo: Ext.getBody(),
autoScroll: true,
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}
,autoShow:true
});

var window = Ext.create('Ext.panel.Panel', {
title: 'big panel for scroll',
width: 400,
height: 700,
id: 'panel1',
draggable: true

});

pane.items.add(window);

window = Ext.create('Ext.panel.Panel', {
title: 'small panel',
width: 400,
height: 200

, id: 'panel2'
, draggable: true


// , renderTo: pane.body
});

pane.items.add(window);
pane.doLayout();

});