PDA

View Full Version : [CLOSED] Callout: Creating HeaderToolbar in Behind Code



cwolcott
Dec 15, 2014, 4:51 PM
I have created a Callout in behind code and was attempting to add some items to the HeaderToolbar when I was at a loss on how to define them.

I need to call directEvents for the Previous and Next button and pass an ExtraParameter Tag, associated with the Callout control.



X.Msg.Callout (aControl, new Callout)
{

HeaderToolbar = {
new Et.Net.Toolbar {
Flat = true,
Items = {
new Ext.Net.Button {Icon = Ext.Net.Icon.BulletLeft, ToolTip = "Previous", ... DirectEvent Click with ExtraParms ...}
new Ext.Net.Button {Icon = Ext.Net.Icon.BulletRight, ToolTip = "Next", ... DirectEvent Click with ExtraParms ...}
new Ext.Net.Button {Icon = Ext.Net.Icon.BulletCross, ToolTip = "Close", Handler = "this.up('toolbar').closeout.hide();"}
}
}
}
});


I begin to type the following, but could not figure out the attribute to define the method (like OnEvent) and how to define Ext:Parameter:



new Ext.Net.Button {Icon = Ext.Net.Icon.BulletLeft, ToolTip = "Previous", DirectEvents = { Click = { ExtraParams = { } } } }

Daniil
Dec 16, 2014, 12:21 PM
Hi Chris,

There is some information.
http://stackoverflow.com/questions/3993601/assigning-events-in-object-initializer

Though, it is not going to work anyways. A Callout is created dynamically and DirectEvents are not going to work. You can use DirectMethods instead.

cwolcott
Dec 16, 2014, 3:38 PM
Thanks for the hint about using DirectMethods. A much better approach. Please close the thread.

Below is a simple sample of a Help "Tip" system. The Callout has previous and next buttons to allow the user to cycle through the various tips defined within the system. The last tip visited is held in the hidden control so if Options --> Tips is clicked it starts were you left off.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<script runat="server">

protected void Page_Load(Object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
hLastTipId.SetValue(1);
}
protected void ShowTip(Object sender, DirectEventArgs e)
{
int tipId = Convert.ToInt32(e.ExtraParams["TipId"]);
CreateTip(tipId);
}

[DirectMethod]
public void NextTip(int currentTipId)
{
CreateTip(currentTipId + 1);
}

[DirectMethod]
public void PreviousTip(int currentTipId)
{
CreateTip(currentTipId - 1);
}

private void CreateTip(int requestedTipId)
{
int currentTips = 4;
int tipId = requestedTipId;

if (requestedTipId == 0) tipId = currentTips;
if (requestedTipId > currentTips) tipId = 1;

Ext.Net.AbstractComponent tipControl = null;
string tipTitle = "";
string tipHtml = null;
AnchorPoint tipAlignment = AnchorPoint.Center;


switch (tipId)
{
case 1:
tipControl = CreateBtn;
tipTitle = "Create";
tipAlignment = AnchorPoint.BottomLeft;
tipHtml = "Create blah blah blah ...";
break;

case 2:
tipControl = ViewBtn;
tipTitle = "View";
tipAlignment = AnchorPoint.BottomRight;
tipHtml = "View blah blah blah ...";
break;

case 3:
tipControl = PrintBtn;
tipTitle = "Print";
tipAlignment = AnchorPoint.TopLeft;
tipHtml = "Print blah blah blah ...";
break;

case 4:
tipControl = FilterBtn;
tipTitle = "Filter";
tipAlignment = AnchorPoint.TopRight;
tipHtml = "Filter blah blah blah ...";
break;

default:
break;

}

X.Msg.Callout(tipControl, new Callout
{
Tag = tipId,
ID = "CalloutTip",
Title = "Tip: " + tipTitle,
Icon = Ext.Net.Icon.Help,
Html = tipHtml,
Alignment = tipAlignment,
CloseAction = CloseAction.Destroy,
UI = Ext.Net.UI.Warning,
Width = 200,
HeaderToolbar =
{ new Ext.Net.Toolbar
{ Flat = true,
Items = { new Ext.Net.Button {Icon = Ext.Net.Icon.BulletLeft, ToolTip = "Previous", Handler = "previousTip(this.up('toolbar').callout.tag);"},
new Ext.Net.Button {Icon = Ext.Net.Icon.BulletRight, ToolTip = "Next", Handler = "nextTip(this.up('toolbar').callout.tag);"},
new Ext.Net.Button {Icon = Ext.Net.Icon.BulletCross, ToolTip = "Close", Handler = "this.up('toolbar').callout.hide();"}}
}
}
}).Show(true);
hLastTipId.SetValue(tipId);

}
</script>

<head runat="server">
<title>Tip System via Callout</title>
<style type="text/css">
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<form runat="server">
<ext:Panel
runat="server"
Width="400"
Layout="Fit">
<Defaults>
<ext:Parameter Name="Margin" Value="10" />
</Defaults>
<HtmlBin>
<script type="text/javascript">
function closeCallout(id) {
var cmp = Ext.getCmp(id);
if (cmp) cmp.hide();
}
function nextTip(tipId) {
closeCallout('CalloutTip');
App.direct.NextTip(tipId);
}
function previousTip(tipId) {
closeCallout('CalloutTip');
App.direct.PreviousTip(tipId);
}
</script>
</HtmlBin>
<Items>
<ext:Hidden ID="hLastTipId" runat="server" ClientIDMode="Static" />
<ext:Container runat="server" Layout="Absolute">
<Items>
<ext:Button ID="CreateBtn" runat="server" Text="Create" X="10" Y="10" />
<ext:Button ID="ViewBtn" runat="server" Text="View" X="300" Y="10" />
<ext:Button ID="PrintBtn" runat="server" Text="Print" X="10" Y="300" />
<ext:Button ID="FilterBtn" runat="server" Text="Filter" X="300" Y="300">
<DirectEvents>
<Click OnEvent="ShowTip" Before="closeCallout('CalloutTip');">
<ExtraParams>
<ext:Parameter Name="TipId" Value="4" Mode="Value" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Container>
</Items>
<TopBar>
<ext:Toolbar runat="server" Border="false">
<Items>
<ext:Button ID="OptionsBtn" runat="server" UI="Info" Text="Options" Icon="WrenchOrange" Width="100" Flat="false">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem ID="TipsMn" runat="server" Text="Tips" Icon="Help">
<DirectEvents>
<Click OnEvent="ShowTip" Before="closeCallout('CalloutTip');">
<ExtraParams>
<ext:Parameter Name="TipId" Value="App.hLastTipId.getValue()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</form>
</body>
</html>