[CLOSED] FormPanel ValidityChange

**cwolcott** · Jun 13, 2016, 4:53 PM

How do I make the GridPanel play with the FormPanel validity? The form is not valid unless the textfield is populated and atleast one row is selected from the gridpanel.

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
        }
    }
</script>
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Window ID="FormPanelValidation" runat="server" ClientIDMode="Static" Title="FormPanel Validation"
        Width="300" BodyPadding="5" Border="false" Layout="FitLayout" DefaultRenderTo="Body">
        <Items>
            <ext:FormPanel ID="FormData" runat="server" DefaultAnchor="100%"
                AutoScroll="true">
                <Items>
                    <ext:TextField runat="server" FieldLabel="Test" AllowBlank="false" EmptyText="Enter text ..." />
                    <ext:GridPanel ID="GridPanel1" runat="server">
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="test1" />
                                            <ext:ModelField Name="test2" />
                                            <ext:ModelField Name="test3" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="Column 1" DataIndex="test1" />
                                <ext:Column runat="server" Text="Column 2" DataIndex="test2" />
                                <ext:Column runat="server" Text="Column 3" DataIndex="test3" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" Mode="Multi" AllowDeselect="true" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
                <Listeners>
                    <ValidityChange Handler="#{ApplyBtn}.setDisabled(!valid);" />
                </Listeners>
            </ext:FormPanel>
        </Items>
        <Buttons>
            <ext:Button ID="ApplyBtn" runat="server" Text="Apply" FormBind="true" Disabled="true"
                Icon="BulletGo" OnClientClick="App.FormPanelValidation.close()" />
        </Buttons>

    </ext:Window>
</body>
</html>

**fabricio.murta** · Jun 13, 2016, 7:13 PM

Hello Chris!

Thanks for the sample, I could run it here, and I believe I can give you a good advice on this.

To the sample you provided, you can bind the ValidityChange event to the text field and reflect the validity status of the field in the grid panel.

You may want to either force an initial validation on the text field on load or load the page with the panel disabled -- but it wouldn't be the case if there's chances to load the screen with the textfield with valid data initially.

Here, a sample validity handler JavaScript you can add to the example above:

<script type="text/javascript">
    var handleValidity = function (item, isValid) {
        var gp = App.GridPanel1;
        if (isValid && gp.isDisabled()) {
            App.GridPanel1.enable();
        } else if (!(isValid || gp.isDisabled())) {
            // The above test is: if the form is not valid and the grid panel is not disabled
            App.GridPanel1.disable();
        }
    }
</script>

And here's how you set up the listener on the text field:

<ext:TextField runat="server" FieldLabel="Test" AllowBlank="false" EmptyText="Enter text ...">
    <Listeners>
        <ValidityChange Fn="handleValidity" />
    </Listeners>
</ext:TextField>

I hope this helps!

**cwolcott** · Jun 13, 2016, 7:34 PM

I don't need to associate the two controls (textfield and gridpanel) together.

What I am try to do is enable the Apply button only when the form is valid. The form is valid when:

The textfield is populated;
The gridpanel has atleast one selection

**fabricio.murta** · Jun 14, 2016, 5:53 AM

Hello again Chris!

Sorry for the mistake... So, is this what you need your form to do?

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

<!DOCTYPE html>

<html>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
        }
    }
</script>
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var handleFormValidity = function (item, isValid) {
            var sel = App.GridPanel1.getSelectionModel(),
                hasSelection = sel.hasSelection(),
                btn = App.ApplyBtn;

            if (isValid && btn.disabled && hasSelection) {
                App.ApplyBtn.enable();
            } else if (!((isValid && hasSelection) || btn.disabled)) {
                App.ApplyBtn.disable();
            }
        }

        var handlePanelSelection = function (item, selected) {
            var form = App.FormData,
                btn = App.ApplyBtn;

            if (form.isValid() && btn.disabled && selected.length > 0) {
                btn.enable();
            } else if (!((form.isValid() && selected.length > 0) || btn.disabed)) {
                btn.disable();
            }
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Window ID="FormPanelValidation" runat="server" ClientIDMode="Static" Title="FormPanel Validation"
        Width="300" BodyPadding="5" Border="false" Layout="FitLayout" DefaultRenderTo="Body">
        <Items>
            <ext:FormPanel ID="FormData" runat="server" DefaultAnchor="100%"
                AutoScroll="true">
                <Items>
                    <ext:TextField runat="server" FieldLabel="Test" AllowBlank="false" EmptyText="Enter text ..." />
                    <ext:GridPanel ID="GridPanel1" runat="server">
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="test1" />
                                            <ext:ModelField Name="test2" />
                                            <ext:ModelField Name="test3" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="Column 1" DataIndex="test1" />
                                <ext:Column runat="server" Text="Column 2" DataIndex="test2" />
                                <ext:Column runat="server" Text="Column 3" DataIndex="test3" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" Mode="Multi" AllowDeselect="true" />
                        </SelectionModel>
                        <Listeners>
                            <SelectionChange Fn="handlePanelSelection" />
                        </Listeners>
                    </ext:GridPanel>
                </Items>
                <Listeners>
                    <ValidityChange Fn="handleFormValidity" />
                </Listeners>
            </ext:FormPanel>
        </Items>
        <Buttons>
            <ext:Button ID="ApplyBtn" runat="server" Text="Apply" FormBind="true" Disabled="true"
                Icon="BulletGo" OnClientClick="App.FormPanelValidation.close()" />
        </Buttons>

    </ext:Window>
</body>
</html>

I hope so! If not, let us know why this does not fulfill your needs and we'll try to sort it out!

**cwolcott** · Jun 14, 2016, 10:04 AM

Please close the thread.
Thank you for the code suggestion. I changed it around a little bit.

I added the following function to determine the forms validity and to enable/disable the Apply button.

var determineFormValidity = function () {
    var isFormValid = App.FormData.isValid() && App.gp1Selection.hasSelection();
    App.ApplyBtn.setDisabled(!isFormValid);
}

The FormPanel ValidityChange listener and the GridPanel SelectionChange listener call the function.

<%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
        }
    }
</script>
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Window ID="FormPanelValidation" runat="server" ClientIDMode="Static" Title="FormPanel Validation"
        Width="300" BodyPadding="5" Border="false" Layout="FitLayout" DefaultRenderTo="Body">
        <HtmlBin>
            <script type="text/javascript">
                var determineFormValidity = function () {
                    var isFormValid = App.FormData.isValid() && App.gp1Selection.hasSelection();
                    App.ApplyBtn.setDisabled(!isFormValid);
                }

            </script>

        </HtmlBin>
        <Items>
            <ext:FormPanel ID="FormData" runat="server" ClientIDMode="Static" DefaultAnchor="100%"
                AutoScroll="true">
                <Items>
                    <ext:TextField runat="server" FieldLabel="Test" AllowBlank="false" EmptyText="Enter text ..." />
                    <ext:GridPanel ID="GridPanel1" runat="server">
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="test1" />
                                            <ext:ModelField Name="test2" />
                                            <ext:ModelField Name="test3" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="Column 1" DataIndex="test1" />
                                <ext:Column runat="server" Text="Column 2" DataIndex="test2" />
                                <ext:Column runat="server" Text="Column 3" DataIndex="test3" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="gp1Selection" runat="server" ClientIDMode="Static" Mode="Multi" AllowDeselect="true" />
                        </SelectionModel>
                        <Listeners>
                            <SelectionChange Fn="determineFormValidity" />
                        </Listeners>
                    </ext:GridPanel>
                </Items>
                <Listeners>
                    <ValidityChange Fn="determineFormValidity" />
                </Listeners>
            </ext:FormPanel>
        </Items>
        <Buttons>
            <ext:Button ID="ApplyBtn" runat="server" ClientIDMode="Static" Text="Apply" FormBind="true" Disabled="true"
                Icon="BulletGo" OnClientClick="App.FormPanelValidation.close()" />
        </Buttons>

    </ext:Window>
</body>
</html>

**fabricio.murta** · Jun 14, 2016, 8:46 PM

Hello Chris! Glad it helped!

Thanks for sharing your polished version of the validation. My sample was really long but I wanted to show the details, your simplification is brilliant and very concise! But my 'if' expressions were really hard to read in their negative form.

Thread: [CLOSED] FormPanel ValidityChange

Thread Tools

Search Thread

Display

[CLOSED] FormPanel ValidityChange

Similar Threads

[CLOSED] Formpanel dynamically change 'AllowBlank' and ValidityChange

[CLOSED] GridPanel, through the "ValidityChange" FormPanel

[CLOSED] How can I get ValidityChange event to trigger when selecting radio group

[CLOSED] [Bug 2.2] ValidityChange not triggering when radio button prechecked and other input nested inside panel or container

FormPanel ValidityChange Listener is not calling

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] FormPanel ValidityChange

[CLOSED] FormPanel ValidityChange

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us