[CLOSED] FormPanel, Validation of a Grid's Component Column

  1. #1

    [CLOSED] FormPanel, Validation of a Grid's Component Column

    Hi all

    See this Code

            <ext:FormPanel ID="pnlPackaging" runat="server" Header="false" Layout="FitLayout">
              <Items>
                <ext:GridPanel runat="server" ID="gridPackaging" AutoScroll="true">
                  <Store>
                    <ext:Store ID="storePackaging" runat="server">
                      <Model>
                        <ext:Model ID="modelPackaging" runat="server">
                          <Fields>
                            <ext:ModelField Name="Id" />
                            <ext:ModelField Name="Quantity" />
                          </Fields>
                        </ext:Model>
                      </Model>
                    </ext:Store>
                  </Store>
                  <ColumnModel>
                    <Columns>
                      <ext:Column ID="colId" runat="server" DataIndex="Id" Text="Id" Width="100" Hidden="True" Groupable="False" Sortable="False" MenuDisabled="True" />
    
                      <ext:ComponentColumn ID="colQuantity" runat="server" Editor="true" DataIndex="Quantity" Text="Quantity" Width="125" Hidden="False" Groupable="true" Sortable="False" MenuDisabled="False">
                        <Component>
                          <ext:TextField ID="fldPackageQuantity" runat="server" RegexText="Number (5)" Regex="^\d{0,5}$"  />
                        </Component>
                        <Listeners>
                          <BeforeBind Handler="e.config[0].readOnly = !!this.grid.readOnly;" />
                        </Listeners>
                      </ext:ComponentColumn>
    
                    </Columns>
                  </ColumnModel>
                  <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModelPackaging" runat="server" Mode="Single" />
                  </SelectionModel>
                </ext:GridPanel>
              </Items>
            </ext:FormPanel>
    I check the FormPanels Validity:

    Ext.getCmp('pnlPackaging').getForm().isValid()
    and the result is 'true' even if a Grid Row 'Quantity' (fldPackageQuantity) has a Validation Error...

    Is there a way to 'include' the Grid Rows in the validity Check ?

    Thanks
    Peter
    Last edited by Daniil; Dec 10, 2014 at 9:56 AM. Reason: [CLOSED]
  2. #2
    Hi Peter,

    A FormPanel can validate only its Items. A ComponentColumn's Component is not considered an item of FormPanel, it is out of the FormPanel's hierarchy.

    I don't see any other way rather than checking validity of rows along with a FormPanel's .isValid() call.
    Last edited by Daniil; Dec 04, 2014 at 3:22 PM.
  3. #3
    Well, I'll do this - but how ? Are there any Examples available ?

    Peter
    Last edited by sisa; Dec 05, 2014 at 7:07 AM.
  4. #4
    I think we have no such an example in our Examples Explorers, but it might exist in the forums. You might try to search.

    Generally, I see two different approaches.

    1. Validating on the Store level. Please read the "Validations" section here:
    http://docs.sencha.com/extjs/4.2.1/#!/guide/data

    2. Validating fields itself in rows. If you prefer this approach, here is an example for you which, I hope, helps you to start.

    Example
    <%@ Page Language="C#" %>
    
    <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[] { "test", "test" },
                    new object[] { "test", "test" },
                    new object[] { "test", "test" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            var validate = function () {
                var column1 = App.GridPanel1.headerCt.items.get(0),
                    column2 = App.GridPanel1.headerCt.items.get(1),
                    len = App.GridPanel1.getStore().getCount(),
                    i,
                    valid = true;
    
                for (i = 0; i < len; i++) {
                    if (!column1.getComponent(i).isValid() ||
                        !column2.getComponent(i).isValid()) {
        
                        valid = false;
                        break;
                    }
                }
    
                alert(valid ? "Valid" : "Invalid");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <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" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:ComponentColumn runat="server" Text="Test 1" DataIndex="test1" Editor="true">
                            <Component>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Component>
                        </ext:ComponentColumn>
                        <ext:ComponentColumn runat="server" Text="Test 2" DataIndex="test2" Editor="true">
                            <Component>
                                <ext:TextField runat="server" AllowBlank="false" />
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
    
            <ext:Button runat="server" Text="Validate" Handler="validate" />
        </form>
    </body>
    </html>
  5. #5
    Thanks Daniil

    Works fine !

    Peter

Similar Threads

  1. Replies: 2
    Last Post: Aug 21, 2014, 8:55 AM
  2. Replies: 3
    Last Post: Apr 16, 2014, 4:53 PM
  3. Replies: 2
    Last Post: Jun 27, 2013, 10:18 PM
  4. Replies: 12
    Last Post: Sep 07, 2012, 2:42 PM
  5. [CLOSED] MVC Grid Component Column
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 11, 2012, 8:00 PM

Posting Permissions