What's New?

[CLOSED] Form items property implementation

  1. #1
    Aug 12, 2015, 2:54 PM

    [CLOSED] Form items property implementation

    Hi,

    I need to port the following DocumentReady handler code from 1.7:

            var onDocumentReady = function () {
            App.FormPanel1.getForm().reset = function (ctlsToExclude) {
                this.items.each(function (f) {
                    if (!ctlsToExclude[f.id])
                        f.reset();
                });
                return this;
            };
        };
    There're two problems with this code. Firstly, the "this" variable doesn't contain the same form object prototype that worked well in 1.7. Is my syntax off? Secondly, even if "this" reference is replaced with App.FormPanel1, the items property that used to return a collection of meaningful form elements like text fields, combo boxes, check boxes, etc, doesn't do it any longer. This behavior has been apparently altered in ExtJs 5.0 so the items are populated with the top level controls in the form controls tree, e.g., Container, ToolbarSpacer, etc. How can one arrive at the collection of the "true" form elements?
    Last edited by Daniil; Aug 14, 2015 at 2:18 PM. Reason: [CLOSED]
  2. #2
    Aug 12, 2015, 6:19 PM
    Hi Vadym,

    Difficult to say what to change without investigating. I would much appreciate if you provide a working v1 test case that I would try to convert to v3.
  3. #3
    Aug 13, 2015, 12:20 PM
    Hi Daniil, here's the code sample that used to work under v1.7:

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">     
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            var list = new List<object>
            {
                new {CountryName = "Canada", CountryID = 1},
                new {CountryName = "Great Britain", CountryID = 2},
                new {CountryName = "United States", CountryID = 3}
            };

            this.Store1.DataSource = list;
            this.Store1.DataBind();

            ComboBox1.SelectedItems.Clear();
            ComboBox1.SelectedItems.Add(new Ext.Net.ListItem(2));

            TextField1.Text = "Anything goes here";

            DateField1.Value = DateTime.Now;
        }
    }
</script>

<script type="text/javascript">
    var onDocumentReady = function () {
        App.FormPanel1.getForm().reset = function (ctlsToExclude) {
            this.items.each(function (f) {
                if (!ctlsToExclude[f.id])
                    f.reset();
            });
            return this;
        };
    };

    var resetForm = function () {
        var ctlsToExclude = [];
        ctlsToExclude[App.ComboBox1.id] = App.ComboBox1.id;
        ctlsToExclude[App.TextField2.id] = App.TextField2.id;
        App.FormPanel1.getForm().reset(ctlsToExclude);
    };
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net 3.x</title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
            <Listeners>
                <DocumentReady Fn="onDocumentReady"></DocumentReady>
            </Listeners>
        </ext:ResourceManager>
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:FormPanel runat="server" ID="FormPanel1">
                    <Items>
                        <ext:Container runat="server" Layout="HBoxLayout" FieldLabel="Country">
                            <Items>
                                <ext:ToolbarSpacer Width="10">
                                </ext:ToolbarSpacer>
                                <ext:ComboBox ID="ComboBox1" runat="server" DisplayField="CountryName" ValueField="CountryID"
                                    TypeAhead="true" Editable="true" MinChars="2" SelectOnFocus="true" EmptyText="Select Country..."
                                    QueryMode="Local">
                                    <Store>
                                        <ext:Store ID="Store1" runat="server">
                                            <Model>
                                                <ext:Model ID="Model1" runat="server" IDProperty="CountryID">
                                                    <Fields>
                                                        <ext:ModelField Name="CountryName" />
                                                        <ext:ModelField Name="CountryID" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                </ext:ComboBox>
                                <ext:ToolbarSpacer Width="20">
                                </ext:ToolbarSpacer>
                                <ext:TextField runat="server" ID="TextField1" FieldLabel="Description">
                                </ext:TextField>
                                <ext:ToolbarSpacer Width="20">
                                </ext:ToolbarSpacer>
                                <ext:CheckboxGroup ID="CheckboxGroup1" runat="server" Width="300" FieldLabel="Some Options">
                                    <Items>
                                        <ext:Checkbox runat="server" BoxLabel="Option 1" InputValue="1" Checked="true">
                                        </ext:Checkbox>
                                        <ext:Checkbox runat="server" BoxLabel="Option 2" InputValue="2">
                                        </ext:Checkbox>
                                    </Items>
                                </ext:CheckboxGroup>
                                <ext:DateField ID="DateField1" runat="server"></ext:DateField>
                            </Items>
                        </ext:Container>
                        <ext:ToolbarSpacer Height="10">
                        </ext:ToolbarSpacer>
                        <ext:FieldSet runat="server" Border="true" Title="Field Set">
                            <Items>
                                <ext:ToolbarSpacer Height="10"></ext:ToolbarSpacer>
                                <ext:TextField runat="server" ID="TextField2" FieldLabel="Something">
                                </ext:TextField>
                                <ext:ToolbarSpacer Width="40">
                                </ext:ToolbarSpacer>
                            </Items>
                        </ext:FieldSet>
                    </Items>
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Reset Form" Icon="Cancel">
                                    <Listeners>
                                        <Click Fn="resetForm">
                                        </Click>
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
  4. #4
    Aug 14, 2015, 12:50 PM
    Thank you. It looks like you can use this.getFields() intead of this.iems.
    http://docs.sencha.com/extjs/5.1/5.1...thod-getFields
  5. #5
    Aug 14, 2015, 1:03 PM
    Thanks, that seems to be working. On an unrelated note, when I run my code sample under the latest build of Google Chrome 44.0.2403.155, the layout appears distorted. Is it just me or can you also reproduce it? The screenshot is attached below.
    Click image for larger version.  Name: Layout in Google.png  Views: 92  Size: 5.0 KB  ID: 24149
  6. #6
    Aug 14, 2015, 1:28 PM
    Tested with Chrome 44 and reproduced the issue.

    Not reproducible in Firefox and IE, so appears to be Chrome issue only.

    Tested with Chrome Canary which is currently Chrome 46 and no issue. So, the issue has been fixed by Chrome and will go to their release. I am not sure - 45 or 46.
  7. #7
    Aug 14, 2015, 1:52 PM
    Thanks, Daniil. Please mark this thread as closed.

Similar Threads

  1. Can't find the property 'Items' in class 'TextField'
    By rendongsc in forum 1.x Help
    Replies: 1
    Last Post: Apr 30, 2012, 7:34 AM
  2. Disable form Items
    By Kipetcoff in forum 1.x Help
    Replies: 1
    Last Post: Mar 26, 2012, 6:16 PM
  3. [CLOSED] Items not showing as part of Ext.form.CompositeField
    By joeRobee in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 10, 2010, 7:27 PM
  4. The property 'Items' cannot be setted in declarative mode
    By paganinip in forum 1.x Help
    Replies: 2
    Last Post: Jun 11, 2010, 2:29 PM

Tags for this Thread

Posting Permissions