PDA

View Full Version : [CLOSED] Simple ComboBox



cwolcott
Apr 30, 2012, 6:33 PM
What am I missing? All I needed was just a simple combobox that a user can select a pre-defined reason or type in a new one. I am receiving a JSON error when I press my submit button.



<ext:ComboBox ID="ReasonComboBox" runat="server" FieldLabel="Reason" LabelWidth="45" IndicatorIcon="BulletRed" IndicatorTip="Required Field" ForceSelection="false" QueryMode="Local" EmptyText="Type in a reason or select from list ...">
<Items>
<ext:ListItem Text="Reason1" />
<ext:ListItem Text="Reason2" />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" Qtip="Clear Entry" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue(); #{SubmitButton}.setDisabled(true);" />
<DirtyChange Handler="#{SubmitButton}.setDisabled((this.getRawValue().le ngth == 0));" />
</Listeners>
</ext:ComboBox>


In the behind code I was calling ReasonComboBox.Text to retrieve the value either typed or selected in the combobox.

Daniil
Apr 30, 2012, 7:27 PM
Hi,

Could you provide a full sample? I am unable to reproduce the problem with the following one.

Example

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

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

<script runat="server">
protected void Submit(object sender, DirectEventArgs e)
{
X.Msg.Alert("Submit", this.ComboBox1.Text).Show();
}
</script>

<!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>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox
ID="ComboBox1"
runat="server"
FieldLabel="Reason"
LabelWidth="45"
ForceSelection="false"
EmptyText="Type in a reason or select from list ...">
<Items>
<ext:ListItem Text="Reason1" />
<ext:ListItem Text="Reason2" />
</Items>
</ext:ComboBox>
<ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
</form>
</body>
</html>



I am receiving a JSON error when I press my submit button.

Do you mean a JavaScript error? Well, I can't say anything concrete, because I can't see that button.

cwolcott
May 01, 2012, 5:38 PM
I was able to get your test case working just fine.

I stripped down my code as much as possible and still get an error. The code below is actually called as a popup window.

TestUserInactivate.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestUserInactivate.aspx.cs"
Inherits="WAM.Section_User.TestUserInactivate" %>

<%@ 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></title>
</head>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<body>
<ext:FormPanel ID="UserInactivateForm" runat="server" BodyPadding="10" DefaultAnchor="100%"
Border="false" Width="480" Layout="Form">
<Items>
<ext:ComboBox ID="ReasonComboBox" runat="server" FieldLabel="Reason" IndicatorIcon="BulletRed"
ForceSelection="false" IndicatorTip="Required Field" QueryMode="Local" EmptyText="Type in a reason or select from dropdown list ..."
LabelWidth="45">
<Items>
<ext:ListItem Text="Last login more than 2 years ago." />
<ext:ListItem Text="Account Creation and Last Login within days of each other." />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" Qtip="Clear entry" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue(); #{SubmitButton}.setDisabled(true);" />
<DirtyChange Handler="#{SubmitButton}.setDisabled((this.getRawValue().le ngth == 0));" />
</Listeners>
</ext:ComboBox>
</Items>
<Listeners>
<AfterRender Handler="var win = parentAutoLoadControl;
size = this.getSize();
size.height += 34;
size.width += 12;
win.setSize(size);
win.center();" Delay="100" />
</Listeners>
<Buttons>
<ext:Button ID="SubmitButton" runat="server" Text="Submit" Disabled="true" Icon="Accept" OnDirectClick="SubmitButton_Click" />
<ext:Button ID="ClearButton" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="var win = parentAutoLoadControl; win.hide();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</body>
</html>


TestUserInactivate.aspx.cs


using System;
using System.Collections.Generic;
using System.Linq;

using Ext.Net;

namespace WAM.Section_User
{
public partial class TestUserInactivate : System.Web.UI.Page
{
protected void SubmitButton_Click(object sender, DirectEventArgs e)
{
X.Msg.Alert("Submit", this.ReasonComboBox.Text).Show();
}
}
}

Vladimir
May 01, 2012, 8:33 PM
Please clarify the version is used for testing your test sample? Is it Ext.Net v2?

cwolcott
May 01, 2012, 9:19 PM
Yes v2.0 Rev 3975

Daniil
May 02, 2012, 9:14 AM
Hi,

FormPanel doesn't create a <form> HTML element in Ext.NET v2.

So, please add a top level <form> on the page or set up

<AutoEl Tag="form" />
for the FormPanel.

It fixes the problem.

One note more.

There is no FormLayout in v2.

Layout="Form"

Please use AnchorLayout, which is default one of FormPanel. It functions the same way as FormLayout does previously.

Daniil
May 02, 2012, 11:24 AM
There is no FormLayout in v2.

Layout="Form"

Please use AnchorLayout, which is default one of FormPanel. It functions the same way as FormLayout does previously.

It is returned.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Form

Daniil
May 02, 2012, 11:31 AM
FormPanel doesn't create a <form> HTML element in Ext.NET v2.

So, please add a top level <form> on the page or set up

<AutoEl Tag="form" />
for the FormPanel.

It fixes the problem.


I've just discovered that DirectEvent creates a <form> for its parent FormPanel automatically and your example should work without any additional things.

We are investigating.

Daniil
May 02, 2012, 12:34 PM
Finally, please use

<AutoEl Tag="form" />



or

<form runat="server">
in WebForms.

cwolcott
May 02, 2012, 1:50 PM
I think that is the most conversations I seen you have with yourself (4 in a row). I just got into work and will integrate your suggestions. Sorry to through a monkey wrench into something that seemed so simple.

Daniil
May 02, 2012, 1:59 PM
There was no answer from you and I decided to speak with myself:)))

cwolcott
May 02, 2012, 2:21 PM
Thanks this was killing me. Please go ahead and close the thread. I added <AutoEl Tag="form" /> and removed the layout attribute from the ext:FormaPanel.

Is there a cleaner way to do this or is this the proper way?



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestUserInactivate.aspx.cs"
Inherits="WAM.Section_User.TestUserInactivate" %>

<%@ 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></title>
</head>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<body>
<ext:FormPanel ID="UserInactivateForm" runat="server" BodyPadding="10" DefaultAnchor="100%"
Border="false" Width="480">
<AutoEl Tag="form" />
<Items>
<ext:ComboBox ID="ReasonComboBox" runat="server" FieldLabel="Reason" IndicatorIcon="BulletRed"
ForceSelection="false" IndicatorTip="Required Field" QueryMode="Local" EmptyText="Type in a reason or select from dropdown list ..."
LabelWidth="45">
<Items>
<ext:ListItem Text="Last login more than 2 years ago." />
<ext:ListItem Text="Account Creation and Last Login within days of each other." />
</Items>
<Triggers>
<ext:FieldTrigger Icon="Clear" Qtip="Clear entry" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue(); #{SubmitButton}.setDisabled(true);" />
<DirtyChange Handler="#{SubmitButton}.setDisabled((this.getRawValue().le ngth == 0));" />
</Listeners>
</ext:ComboBox>
</Items>
<Listeners>
<AfterRender Handler="var win = parentAutoLoadControl;
size = this.getSize();
size.height += 34;
size.width += 12;
win.setSize(size);
win.center();" Delay="100" />
</Listeners>
<Buttons>
<ext:Button ID="SubmitButton" runat="server" Text="Submit" Disabled="true" Icon="Accept" OnDirectClick="SubmitButton_Click" />
<ext:Button ID="ClearButton" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="var win = parentAutoLoadControl; win.hide();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</body>
</html>

Daniil
May 02, 2012, 3:34 PM
Is there a cleaner way to do this or is this the proper way?


I would replace the DirtyChange listener with

<Change Handler="#{SubmitButton}.setDisabled(Ext.isEmpty(newValue)) ;" />
if I correctly understand your requirement.

The rest things looks fine.

cwolcott
May 02, 2012, 4:12 PM
Agreed with the suggestion. Please go ahead and close it out.