PDA

View Full Version : [CLOSED] DatePickerField and SelectField from mobile examples is not working


ffg30
Apr 18, 2019, 8:39 AM
hi,

i just copy and paste this sample code from https://mobile.ext.net/#demo/formpanel to my test environment http://testdemo.esiteview.com.my/ and seem this two controls datepickerfield and selectfield is not working.. did i missed any variables declaration for this sample?



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">

<ext:ResourceManager runat="server" Theme="Triton" />

<div>
<ext:FormPanel ID="basicform" runat="server">
<Items>
<ext:FieldSet
runat="server"
ID="fieldset1"
Title="Personal Info"
Instructions="Please enter the information above.">
<Defaults>
<ext:Parameter Name="labelWidth" Value="35%" />
</Defaults>
<Items>
<ext:TextField
runat="server"
Name="name"
Label="Name"
PlaceHolder="Tom Roy"
AutoCapitalize="true"
Required="true"
ClearIcon="true" />
<ext:PasswordField
runat="server"
Revealable="true"
Name="password"
Label="Password"
ClearIcon="true" />
<ext:EmailField
runat="server"
Name="email"
Label="Email"
PlaceHolder="me@ext.net"
ClearIcon="true" />
<ext:UrlField
runat="server"
Name="url"
Label="Url"
PlaceHolder="https://ext.net/"
ClearIcon="true" />
<ext:SpinnerField
runat="server"
Name="spinner"
Label="Spinner"
MinValue="0"
MaxValue="10"
StepValue="1"
Cycle="true">
</ext:SpinnerField>
<ext:Checkbox
runat="server"
Name="cool"
Label="Cool" />
<ext:DatePickerField
runat="server"
DestroyPickerOnHide="true"
Name="date"
Label="Start Date">
<Picker runat="server" YearFrom="2018" DateValue="2019-04-18" />
</ext:DatePickerField>
<ext:SelectField
runat="server"
Name="rank"
Label="Rank">
<Options>
<ext:ListItem Text="Master" Value="master" />
<ext:ListItem Text="Journeyman" Value="journeyman" />
<ext:ListItem Text="Apprentice" Value="apprentice" />
</Options>
</ext:SelectField>
<ext:Slider
runat="server"
Name="slider"
Label="Slider" />
<ext:ToggleField
runat="server"
Name="toggle"
Label="Toggle" />
<ext:TextArea
runat="server"
Name="bio"
Label="Bio" />
</Items>
</ext:FieldSet>
<ext:FieldSet
runat="server"
ID="fieldset2"
Title="Favorite color">
<Defaults>
<ext:Parameter Name="labelWidth" Value="35%" />
</Defaults>
<Items>
<ext:Radio
runat="server"
Name="color"
Label="Red">
<CustomConfig>
<ext:ConfigItem Name="value" Value="red" />
</CustomConfig>
</ext:Radio>
<ext:Radio
runat="server"
Name="color"
Label="Blue">
<CustomConfig>
<ext:ConfigItem Name="value" Value="blue" />
</CustomConfig>
</ext:Radio>
<ext:Radio
runat="server"
Name="color"
Label="Green">
<CustomConfig>
<ext:ConfigItem Name="value" Value="green" />
</CustomConfig>
</ext:Radio>
<ext:Radio
runat="server"
Name="color"
Label="Purple">
<CustomConfig>
<ext:ConfigItem Name="value" Value="purple" />
</CustomConfig>
</ext:Radio>
</Items>
</ext:FieldSet>
<ext:Container runat="server" Layout="HBoxLayout">
<Defaults>
<ext:Parameter Name="style" Value="margin: 1em" />
<ext:Parameter Name="flex" Value="1" Mode="Raw" />
<%-- Use the value 1 not string "1" --%>
</Defaults>
<Items>
<ext:Button
runat="server"
Text="Disable fields"
UI="Action"
Scope="this"
ID="formToggleBtn"
Handler="var fieldset1 = Ext.getCmp('fieldset1'),
fieldset2 = Ext.getCmp('fieldset2'),
btn = App.formToggleBtn;

if (btn.hasDisabled) {
fieldset1.enable();
fieldset2.enable();
btn.hasDisabled = false;
btn.setText('Disable fields');
} else {
fieldset1.disable();
fieldset2.disable();
btn.hasDisabled = true;
btn.setText('Enable fields');
}">
<CustomConfig>
<ext:ConfigItem Name="hasDisabled" Value="false" Mode="Raw" />
</CustomConfig>
</ext:Button>
<ext:Button
runat="server"
Text="Reset"
UI="Action"
Handler="Ext.getCmp('basicform').reset();" />
</Items>
</ext:Container>
</Items>
</ext:FormPanel>
</div>
</form>
</body>
</html>
fabricio.murta
Apr 18, 2019, 6:04 PM
Hello @ffg30, and welcome to Ext.NET forums!

Thanks for posting the test case the way you tried (and simplified). We could run it in our side and reproduce the problem!

The issue you're getting is because Ext.NET doesn't know where to show the modal. As a general rule of thumb, you should always give the page a ViewPort, or the outmost component the FullScreen="True" setting.

In your case, it would suffice to give the FormPanel the FullScreen setting and you should get it working.

Here are some threads where the same applies. We didn't find a definitive solution for this yet, but at some point this should at least be more straightforward.
- Ext.Net.Mobile Bottom-tabs (https://forums.ext.net/showthread.php?62315)
- Grid -in Panel which has layout- couldnt show records (https://forums.ext.net/showthread.php?61827)

You would find more threads about that if you search the forums for: mobile fullscreen.

The example works because it is based on a "single page application" approach, where it uses a viewport "shell". You can check the whole project by yourself here: Ext.NET Mobile Examples Explorer project on GitHub (https://github.com/extnet/mobile.ext.net/).

Hope this helps!
ffg30
Apr 20, 2019, 2:09 PM
Thank you for the explanation. Really appreciated.
fabricio.murta
Apr 21, 2019, 1:04 PM
Hello again, @ffg30!

Glad it helped and thanks for the feedback! We'll be marking this as closed, then.