Mar 28, 2018, 1:27 PM
[CLOSED] ext.net window with frame renderer and bootstrap
Hello,
I have a page with a button. this button will open an Ext.net Window with component loader and frame renderer. the page that will open inside this window is an aspx page that contains html elements and bootstrap. I have a problem that when opening this page inside the window the styling is not applied. and if I open it independently it is working fine.
Please find the sample code:
Parent Page: (Home.aspx):
Child Page: (Test.aspx)
N.B: I don't want to use resource manager and ext.net viewport in child page, I want to use bootstrap styling and html tags. is there anything in the creation of the window that is causing this problem?
Thank you
I have a page with a button. this button will open an Ext.net Window with component loader and frame renderer. the page that will open inside this window is an aspx page that contains html elements and bootstrap. I have a problem that when opening this page inside the window the styling is not applied. and if I open it independently it is working fine.
Please find the sample code:
Parent Page: (Home.aspx):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function OpenWindow()
{
var loadingMSG = "Loading";
var windowID = "QED";
var height = 500;
var width = 700;
var win1 = new Ext.Window({
id: windowID,
closeAction: 'destroy',
constrain: true,
width: 500,
height: 350,
resizable: false,
draggable: true,
closable: true,
modal: false,
layout: 'fit',
plain: true,
maximizable: true,
minimizable: true,
listeners: {
afterrender: function () {
setTimeout(function () {
eval("App." + windowID + ".getLoader().load();");
}, 500);
}
},
tools: [{
type: 'toggle',
}],
loader: {
url: 'Test.aspx',
loadMask: { showMask: true, msg: loadingMSG },
autoLoad: false,
renderer: 'frame',
},
});
win1.show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:Button runat="server" ID="Button1" Text="Open" OnClientClick="OpenWindow" />
</div>
</form>
</body>
</html>
Child Page: (Test.aspx)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/font-awesome.min.css"/>
<script src="../Scripts/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" >
<p style="text-align:center;"><label>Allocate/Deallocate Tasks</label></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6" >
<label class="radio-inline"><input type="radio" value="Allocate" name="AllocateDeallocateGroup" />Allocate</label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6" >
<label class="radio-inline"><input type="radio" value="Deallocate" name="AllocateDeallocateGroup" />Deallocate</label>
</div>
</div>
</div>
</form>
</body>
</html>
N.B: I don't want to use resource manager and ext.net viewport in child page, I want to use bootstrap styling and html tags. is there anything in the creation of the window that is causing this problem?
Thank you
Last edited by fabricio.murta; Jul 28, 2018 at 3:28 AM.
Reason: no feedback from the user in 7+ days