PDA

View Full Version : Draggable Window Issue



DOOMitru
30 Apr 2015, 7:18 AM
52307

I have an interesting problem with draggable windows. I can drag them and move them easily within their parent container but if I drag it too far up or too far to the left, it snaps back to the position shown in the screenshot attached. Essentially, there's a horizontal strip (as wide as the arrows pointing down in the screenshot) where I cannot drop the window. If I move the window there, it will snap to a lower position. The same thing happens to the left side as well.

I do have a mix of EXT.NET and EXT.JS in the project. The EXT.NET sets up the main layout and I use the EXT.JS to create the draggable windows.

EXT.NET code:


@(
X.Viewport()
.Layout(LayoutType.Border)
.ID("ViewPort")
.Items(


//West Panel
X.Panel()
.Region(Region.West)
.ItemsFromPage(this, "~/Views/Shared/_Explorer.cshtml")
.Title("Explorer")
.ID("ExplorerPanel")
.Width(300)
.Frame(true)
.Layout(LayoutType.Column)
.Resizable(false)
.Collapsible(true)
.Collapsed(true)

//Mid Panel Region
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.Items(
X.TabPanel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.ID("TabPanel")
.Items(tabs =>
{
tabs.Add(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.Title("Tab1")
.ID("Tab1")
);

tabs.Add(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.Title("Dashboard")
.ID("DashboardTab")
.ItemsFromPartial("~/Views/Shared/_DashboardTab.cshtml")
);


tabs.Add(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.Title("Tab3")
.ID("Tab3")
);


tabs.Add(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.Title("Tab4")
.ID("Tab4")
);


tabs.Add(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.Title("Tab5")
.ID("Tab5")
);
})
)
)
)


EXT.JS Code:



function BuildWindow(config) {
var chartPanelId = 'chart' + config.id;
return new Ext.window.Window({
height: config.height,
width: config.width,
x: config.xpos,
y: config.ypos,
id: config.id + '',
layout: 'fit',
constrain: true,
initCenter: false,
listeners: {
beforeClose: function () {
var userConfirm = confirm("Are you sure ?");

if (userConfirm) {
App.direct.DeleteChart(config.id);
return true;
}

return false;
}
},
items: [{
xtype: 'panel',
id: chartPanelId
}],
renderTo: Ext.Element.get(config.parentId),
draggable: true,
collapsible: true,
title: config.title
});
}


window = BuildWindow(config);
window.show();
App.DashboardPanel.items.add(window);


I have tried to use 'constrain', 'constrainTo' and variations of it to make it work but it does not work like I want it to. I want to be able to drag the windows anywhere within the parent container. If I set constrain to false, it does allow me to move it everywhere but if I move it too far up, the header of the draggable window hides behind the parent panel so once you let go, you cannot grab it again to bring it back down.

Any help would be appreciated.

Gary Schlosberg
4 May 2015, 3:53 PM
With which specific version of Ext JS 4 are you seeing this? Are you able to recreate this in a Fiddle?
https://fiddle.sencha.com/#home