[CLOSED] DatePickerField and SelectField from mobile examples is not working

  1. #1

    [CLOSED] DatePickerField and SelectField from mobile examples is not working

    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>
    Last edited by fabricio.murta; Apr 21, 2019 at 1:04 PM.
  2. #2
    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
    - Grid -in Panel which has layout- couldnt show records

    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.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for the explanation. Really appreciated.
  4. #4
    Hello again, @ffg30!

    Glad it helped and thanks for the feedback! We'll be marking this as closed, then.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. How to use SelectField in Formpanel
    By rickywu in forum Mobile Help
    Replies: 0
    Last Post: Mar 28, 2017, 6:13 AM
  2. Replies: 9
    Last Post: Jan 14, 2017, 8:35 PM
  3. Replies: 3
    Last Post: Dec 02, 2016, 2:01 PM
  4. [CLOSED] TabBar Config examples in Examples Explorer not working
    By anup in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 26, 2012, 9:32 AM
  5. Rowcommand from examples is not working
    By Dorababu in forum 2.x Help
    Replies: 1
    Last Post: Mar 10, 2012, 4:16 PM

Tags for this Thread

Posting Permissions