[CLOSED] FormPanel ValidityChange

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.

Code:

<%@ 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>

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:

Code:

<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:

Code:

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

I hope this helps!

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

Hello again Chris!

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

Code:

<%@ 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!

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.

Code:

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.

Code:

<%@ 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>

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.