|
Subscribe
|
Referring to the following example on the Examples Explorer:#/Element/Basic/Layer/
I would request an example with Layers being used/shown/hidden on the client-side in javascript. Also, can we create Layers in markup? There is no <ext:Layer> element in Intellisense.
Lastly, is it possible to use regular Ext.Net/ExtJs controls in Layers?
--
http://www.rahulsingla.com
|
|
|
Hi,
I would request an example with Layers being used/shown/hidden on the client-side in javascript.
Please see the sample below
Also, can we create Layers in markup?
No, Layer is not control
is it possible to use regular Ext.Net/ExtJs controls in Layers?
Below sample demosntrates panel in the Layer (Show bottom)
<%@ Page Language="C#" %>
<%@ Import Namespace="Panel=Ext.Net.Panel" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Layer Overview - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.layer {
width : 100px;
height : 250px;
padding : 5px;
border : solid 1px silver;
}
.layer div {
height : 238px;
background-color : silver;
padding : 5px;
}
</style>
<script type="text/javascript">
function showRight(){
var layer = new Ext.Layer({
id: "Layer1",
dh: {
cls: "layer",
cn: [{
cn: [{
tag: "h3",
html: "Hello"
},
{
tag: "hr"
},
{
tag: "a",
html: "Close",
href: "#",
onClick: "closeRight(); return false;"
}]
}]
}
});
layer.alignTo(Panel1.el, "tl-tr", [5, 0]);
layer.slideIn("l");
Button1.setDisabled(true);
}
function closeRight(){
var layer = Ext.get("Layer1");
layer.slideOut("l", {
callback: function () {
layer.remove();
}
});
Button1.setDisabled(false);
}
function showBottom(){
new Ext.Panel({
id: "Panel2",
cls: "x-hidden",
renderTo: Ext.getBody(),
height: 100,
width: 300,
html: "Ext.Net Panel",
padding: 5,
title: "Panel in Layer",
tools: [{
id: "close",
handler: closeBottom
}]
});
var layer = new Ext.Layer({
id: "Layer2"
}, Panel2.el);
layer.alignTo(Panel1.el, "tl-bl", [0, 5]);
layer.slideIn("t");
Button2.setDisabled(true);
}
function closeBottom(){
var layer = Ext.get("Layer2");
layer.slideOut("t", {
callback: function () {
layer.remove();
}
});
Button2.setDisabled(false);
}
</script>
</head>
<body>
<ext:ResourceManager runat="server"/>
<ext:Panel
ID="Panel1"
runat="server"
Title="Panel"
Width="300"
Height="300">
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Show Right" OnClientClick="showRight();" />
<ext:Button ID="Button2" runat="server" Text="Show Bottom" OnClientClick="showBottom();" />
</Buttons>
</ext:Panel>
</body>
</html>
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
Hi vlad, thanx for the example. That helped, except for those cryptic abbreviations (dh, cn etc.).
--
http://www.rahulsingla.com
|
|
|
Hi,
dh - DomHelper object
http://www.extjs.com/deploy/dev/docs/source/Layer.html#cfg-Ext.Layer-dh
cn - children
An array of the same kind of element definition objects to be created and appended. These can be nested as deep as you want.
http://www.extjs.com/deploy/dev/docs/source/DomHelper-more.html#cls-Ext.DomHelper
--
Vladimir Shcheglov
Coolite Inc.
Development Team
Forum Guidelines | Coolite Examples | Coolite API Docs | ExtJS API Docs | Twitter
|
|
|
|