PDA

View Full Version : [CLOSED] Direct event + multiple forms on page



aisi_it_admin
Sep 05, 2012, 1:48 PM
Hello

Hope it's ok to open new thread when the question chagnes even the sample is similar

I have dynamic tabpanel, each tab has form tag in the root, inside the tab I have button with DirectEvent and Direct method call.
Direct event works fine, Direct method does not, I guess I need to say somehow to direct event to send the data of the form with the request, but I don't know how.

Here is the sample:



<%@ Import Namespace="Newtonsoft.Json" %>
<%@ Import Namespace="Newtonsoft.Json.Linq" %>
<script runat="server">
protected void Button1_Click(object sender, DirectEventArgs e)
{
int key = -1;
var configStr = Request["submitDirectEventConfig"];
if (string.IsNullOrEmpty(configStr) == false)
{
JsonObject obj = JsonConvert.DeserializeObject<JsonObject>(configStr);
JObject configObj = (JObject)obj["config"];
var val = configObj["extraParams"];
if (string.IsNullOrEmpty(val["hid"].Value<string>()) == false)
key = val["hid"].Value<int>();

hid.Value = key;
}

hid.Value = (key).ToString();
if (string.IsNullOrEmpty(hid.Value as string))
{
hid.Value = "0";
}
else
{
hid.Value = (int.Parse(hid.Value as string) + 1).ToString();
}

UserControl uc1 = (UserControl)this.LoadControl("~/WindowsApp/UserControls/TextControll.ascx");
uc1.ID = "UC" + hid.Value;

var pnl = new Ext.Net.Panel()
{
ID = "dynamicPanel" + hid.Value,
Title = "Tab" + hid.Value,
CloseAction = CloseAction.Destroy,
Closable = true


};
pnl.ContentControls.Add(uc1);

pnl.Render("tabPanel", RenderMode.AddTo);



}

protected override void OnInit(EventArgs e)
{
var key = Request.Form.AllKeys.FirstOrDefault(item => item.Contains("hiddenField"));


if (string.IsNullOrEmpty(key) == false)
{
var countStr = Request[key];

if (countStr != null && countStr != "")
{
int count = int.Parse(countStr);


UserControl uc1 = (UserControl)this.LoadControl("~/WindowsApp/UserControls/TextControll.ascx");
uc1.ID = "UC" + count;

var pnl = new Ext.Net.Panel()
{
ID = "dynamicPanel" + count,

};
pnl.ContentControls.Add(uc1);
tabPanel.Controls.Add(pnl);

}

}
base.OnInit(e);
}



</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Update Controls and Content during a DirectEvent - Ext.NET Examples</title>
</head>
<body>
<script src="http://ala-test.allynintl.eu/ALAJavaScripts.ashx" type="text/javascript"></script>
<script>


function test(con, options, eOpts, params) {
params.hid = hid.getValue();
params.yyy = 'xxx';
}
Ext.onReady(function () {



})
</script>
<form id="aspnetForm">
</form>
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="">
<Listeners>
<BeforeAjaxRequest Fn="test">
</BeforeAjaxRequest>
</Listeners>
</ext:ResourceManager>

<ext:Hidden runat="server" ID="hid" />


<ext:TabPanel ID="tabPanel" runat="server" Title="Tab with dynamic controls" Width="1000"
Height="800" BodyPadding="5">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button runat="server" Text="Add" OnDirectClick="Button1_Click">
<DirectEvents>
<Click>
<ExtraParams>
<ext:Parameter Name="hid" Value="#{hid}.getValue()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:TabPanel>
</body>
</html>



<form>
<script>
function directEvent() {
Ext.net.DirectMethods.<%= ClientID %>.DirectMethod({
// smthing to be added here?
});
}
</script>
<ext:Hidden runat="server" ID="hiddenField" />
<ext:FormPanel runat="server">
<Items>
<ext:TextField runat="server" ID="txt1">
</ext:TextField>
<ext:Button runat="server" ID="btn" OnDirectClick="btnVoidTR_click" Text="Click me Direct Event">

</ext:Button>
<ext:Button runat="server" ID="btnMethod" Text="Click me Direct Method">
<Listeners>
<Click Fn="directEvent"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:FormPanel>
</form>

Daniil
Sep 05, 2012, 2:33 PM
Hi,



Hope it's ok to open new thread when the question chagnes even the sample is similar


Yes, it is good. Please always start a new forum thread for another issue (if it is not tightly related to an initial one) even if you will use the same sample.

Regarding the problem.

Yes, DirectEvent automatically tries to find a parent FormPanel starting from a control which this DirectEvent is associated to. But DirectMethod doesn't do that, because it is not associated to any control.

Please set the "formId" config for the DirectMethod.

Example

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

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

<script runat="server">
[DirectMethod]
public void Test()
{
X.Msg.Alert("DirectMethod", this.Request["TextField1"]).Show();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:FormPanel ID="FormPanel1" runat="server">
<Items>
<ext:TextField ID="TextField1" runat="server" Text="Hello!" />
</Items>
</ext:FormPanel>

<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="DirectMethod">
<Listeners>
<Click Handler="App.direct.Test({
formId: 'FormPanel1'
});" />
</Listeners>
</ext:Button>
</body>
</html>


Also I think that you can remove the <form> tag from the user control.

By the way, if you place the Hidden into the FormPanel it will be submitted as well.

aisi_it_admin
Sep 05, 2012, 7:18 PM
Thanks

Even the answer is clear, I'm bit confused now
What is the relation of the FormPanel - Form - Post Data

so far I found following from my observations:
- FormPanel is never rendered using From attribute
- if the page has root <form runat="server"/>, post data always contains data from all fields
- if the page does not have root <form runat="server"/> and directEvent is caused by control under <form> tag or FormPanel class, only data from this form are send
- if the page does not have root <form runat="server"/> direct method needs to have formId parameter set in order to get data from respective form

Am I missing something or is it like that?

Thanks

Daniil
Sep 06, 2012, 7:29 AM
- FormPanel is never rendered using From attribute


Yes, it is correct. It is automatically created a <form> if needed. It is needs for upload and if standardSubmit is true.

By default, a FormPanel is submitted via XHR (AJAX).

Here are the related Docs article.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-submit
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-cfg-standardSubmit
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-cfg-api
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.action.StandardSubmit
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.action.Submit
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.action.DirectSubmit



- if the page has root <form runat="server"/>, post data always contains data from all fields


Yes, it is by default. You can change it specifing FormID for DirectEvent or formId for DirectMethod.



- if the page does not have root <form runat="server"/> and directEvent is caused by control under <form> tag or FormPanel class, only data from this form are send


Yes, it is by default. Again you can change it specifying FormID for DirectEvent.



- if the page does not have root <form runat="server"/> direct method needs to have formId parameter set in order to get data from respective form


Yes, correct. DirectMethod doesn't automatically search for a parent form, because it is not related to any control, i.e. no start point for searching.

Please ask if you have any questions more.