[CLOSED] Combobox submit value in RowExpander

  1. #1

    [CLOSED] Combobox submit value in RowExpander

    Hi,please consider the following example code:

    I have a GridPanel with RowExpander.
    In the RowExpander there is a ComboBox and two textfield.
    I would submit a substring of the selected value (the part of the text after the character '-') from the ComboBox to the field with id ExpFieldSpare.
    In the example I submit the whole value of the Combo but it doesnt'work
    It seems simple but sure I miss something ...

    can you please try it and give me a tip ?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyClass.aspx.cs" Inherits="MyClass" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Cluster Management</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <script type="text/javascript">
    
            var myFilter = function (filters, value) {
                if (Ext.isString(filters)) {
                    filters = {
                        property: filters,
                        value: value
                    };
                }
    
                var me = this,
                    decoded = me.decodeFilters(filters),
                    i = 0,
                    length = decoded.length;
    
                for (; i < length; i++) {
                    me.filters.replace(decoded[i]);
                }
    
                if (me.filters.getCount()) {
                    me.filterBy(me.filters.get(0).filterFn);
                }
            };
    
            var submitValue = function (destfield, format) {
                destfield.setValue(format);
            };
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" DirectMethodNamespace="Julia" runat="server" />
        <ext:Store ID="Store1" runat="server"  PageSize="20">
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" />
                        <ext:ModelField Name="Field1" />
                        <ext:ModelField Name="Field2" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
        <ext:Store ID="Store3" runat="server" OnReadData="Store_ReadData" PageSize="5" RemotePaging="false"
            IsPagingStore="true">
            <CustomConfig>
                <ext:ConfigItem Name="filter" Value="myFilter" Mode="Raw" />
            </CustomConfig>
            <Model>
                <ext:Model ID="Model5" runat="server">
                    <Fields>
                        <ext:ModelField Name="value" />
                        <ext:ModelField Name="text" />
                    </Fields>
                </ext:Model>
            </Model>
            <Proxy>
                <ext:PageProxy>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:PageProxy>
            </Proxy>
        </ext:Store>
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="North" runat="server" Split="true" Region="Center" Layout="BorderLayout"
                    Border="False">
                    <Items>
                        <ext:Panel ID="Panel1" runat="server" Split="true" Resizable="true" Region="Center"
                            Layout="BorderLayout" Border="False">
                            <Items>
                                <ext:GridPanel ID="GridPanel1" StateID="GridCluster" Stateful="true" runat="server"
                                    StoreID="Store1" Region="Center" Frame="true" Title="Clusters" Height="300" Layout="FitLayout"
                                    Margins="0 0 0 0">
                                    <SelectionModel>
                                        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" AllowDeselect="true" runat="server"
                                            Mode="Multi" />
                                    </SelectionModel>
                                    <ColumnModel ID="ColumnModel1" runat="server">
                                        <Columns>
                                            <ext:Column ID="Column1" runat="server" Text="Id" Visible="true" Width="50" DataIndex="ID" />
                                            <ext:Column ID="Column2" runat="server" Text="Cluster Id" Width="400" DataIndex="Field1" />
                                            <ext:Column ID="Column3" runat="server" Text="Cluster Name" Width="400" DataIndex="Field2" />
                                        </Columns>
                                    </ColumnModel>
                                    <Plugins>
                                        <ext:RowExpander ID="RowExpander1" runat="server" SingleExpand="false">
                                            <Component>
                                                <ext:FormPanel ID="FormPanel3" Icon="User" Visible="true" Frame="true" runat="server"
                                                    Region="West" Split="true" Title="Cluster fields" Width="350" BodyPadding="5"
                                                    ButtonAlign="Left">
                                                    <Items>
                                                        <ext:FieldSet ID="FieldSet1" runat="server" Title="Cluster Query Fields" Collapsible="true"
                                                            DefaultAnchor="100%">
                                                            <Defaults>
                                                                <ext:Parameter Name="labelWidth" Value="89" Mode="Raw" />
                                                            </Defaults>
                                                            <Items>
                                                                <ext:ComboBox ID="ComboBox1" StoreID="Store3" runat="server" FieldLabel="Field X"
                                                                    Name="Field23" DisplayField="text" ValueField="value" Width="600" MinChars="1"
                                                                    PageSize="5" QueryMode="Local">
                                                                    <Listeners>
                                                                        <Select Handler="submitValue(#{ExpFieldSpare}, #{ComboBox1}.getValue());" />
                                                                    </Listeners>
                                                                </ext:ComboBox>
                                                                <ext:TextField ID="ExpField2" runat="server" Name="Field2" Width="600" FieldLabel="Field 2" />
                                                                <ext:TextField ID="ExpFieldSpare" runat="server" Name="FieldSpare" Width="600" FieldLabel="FieldSpare" />
                                                            </Items>
                                                        </ext:FieldSet>
                                                    </Items>
                                                    <Listeners>
                                                        <AfterRender Handler="this.getForm().loadRecord(this.record);" />
                                                    </Listeners>
                                                    <TopBar>
                                                        <ext:Toolbar ID="Toolbar4" runat="server">
                                                            <Items>
                                                                <ext:Button ID="btnSave" runat="server" Text="Save DE" Icon="Disk">
                                                                    <Listeners>
                                                                        <Click Handler="var grid = this.up('grid'), form = this.up('form');
                                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));
                                                            form.getForm().updateRecord(form.record);" />
                                                                    </Listeners>
                                                                </ext:Button>
                                                                <ext:Button ID="btnCancel" runat="server" Text="Cancel" Icon="Decline">
                                                                    <Listeners>
                                                                        <Click Handler="var grid = this.up('grid'), form = this.up('form');
                                                            grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));" />
                                                                    </Listeners>
                                                                </ext:Button>
                                                            </Items>
                                                        </ext:Toolbar>
                                                    </TopBar>
                                                </ext:FormPanel>
                                            </Component>
                                        </ext:RowExpander>
                                    </Plugins>
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    behind code

    using System;
    using Ext.Net;
    
    public partial class MyClass: MainInherit
    {
        public object[] data = new object[]
        {
            new object[] { 1, "Test 1",  "my data description 1"},
            new object[] { 2, "Test 2",  "my data description 2"},
            new object[] { 3, "Test 3",  "my data description 3"},
        };
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest) // avoid direct events requests
            {
                    this.Store1.DataSource = data;
                    this.Store1.DataBind();
            }
        }
    
        protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
        {
            Store store = sender as Store;
    
            object[] dcombo = new object[]
                {
                    new object[] { "3m Co",  "Manufacturing - FieldSpareValue"},
                    new object[] { "Alcoa Inc",  "Manufacturing - FieldSpareValue"},
                    new object[] { "Altria Group Inc",  "Manufacturing - FieldSpareValue"},
                };
    
            store.DataSource = dcombo;
        }
    }
    Last edited by Daniil; Jan 24, 2013 at 1:56 PM. Reason: [CLOSED]
  2. #2
    Hi @tanky65,

    It could be helpful for us if you leave just
    <%@ Page Language="C#" %>
    and put the code behind directly on the ASXP page within
    <script runat="server">
    It allows to run samples without any changes from our side. It is actual, because we commonly runs a huge amount of examples every day:)

    Thanks.

    Regarding the problem.

    There is a JavaScript error occurred here:
    <Select Handler="submitValue(#{ExpFieldSpare}, #{ComboBox1}.getValue());" />
    If you use SingleExpand="false", it means that a new Component will be rendered for each row. So, we have to generate some different ids to avoid ids conflict.

    So, it doesn't make sense to set up ids for FieldSet, ComboBox, etc.

    There is another way to get the fields you want.
    <Select Handler="submitValue(this.up('fieldset').child('textfield:last'), this.getValue());" />
    Hope this helps.
  3. #3
    In effect, in this case, i will use SingleExpand="true" and it works without any other changes.
    It is anyway clear what you write about ids.
    Thanks and good job
    you can close the thread

Similar Threads

  1. [CLOSED] Form Submit
    By watteeuw in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 28, 2012, 4:36 PM
  2. Replies: 1
    Last Post: Jul 25, 2012, 9:52 AM
  3. [CLOSED] Submit combobox value within an editable gridview
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 18, 2012, 8:50 AM
  4. submit?
    By marco.amusquivar in forum 1.x Help
    Replies: 0
    Last Post: Mar 25, 2012, 7:37 PM
  5. [CLOSED] Submit gridpanel data in form submit
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 14, 2010, 7:25 PM

Tags for this Thread

Posting Permissions