[CLOSED] Copy CompomentColumn combobox value to Componentcolumn TextBox

  1. #1

    [CLOSED] Copy CompomentColumn combobox value to Componentcolumn TextBox

    Hi,
    based on the example (ComponentColumn - Editor) (https://examples2.ext.net/#/GridPane...Column/Editor/), I need the following behavior:

    - when a Combobox value is selected, the Text value is copied to the Text cell of the same line.

    Especially I would need that a particular filed of the store bound to the Combobox to be copied.

    Please, can you show me the best way to accomplish that?

    It would be great if you could provide an example.

    Thanks in advance.
    Marco
    Last edited by Daniil; Mar 12, 2013 at 5:44 AM. Reason: [CLOSED]
  2. #2
    Hi Marco,

    Please set up the following for the ComboBox ComponentColumn.

    SilentSave="false"
    and
    <Listeners>
        <Edit Handler="e.record.data.TextField = e.value;" />
    </Listeners>
  3. #3
    Hi Daniil,
    the first time I select a value nothing happens.
    The second time the texbox shows the value I selected the first time. And so on...
    It seems it is missing a trip...

    Moreover, my real combobox is bound to a store; and I would like to copy a specific store field of the selected record.

    M

    <%@ 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)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 2, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 3, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 4, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 5, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 6, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 7, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 8, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 9, 9, "Text 9", DateTime.Now.Date }
                };
    
                this.Store1.DataBind();
            }
        }
    
    
        protected void SelectTitle(object sender, DirectEventArgs e)
        {
            string json = e.ExtraParams["tasks"];
            Dictionary<string, string>[] tasks = JSON.Deserialize<Dictionary<string, string>[]>(json);
            string Valore = e.ExtraParams["Valore"];
    
            ModelProxy record = Store1.GetById(Valore);
            record.BeginEdit();
    
            record.Set("new_Descrizione", Valore);
    
            record.EndEdit();
    
            record.Commit();
    
    
            X.Msg.Alert("Test", "Edit" + Valore).Show();
        }
        
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComponentColumn Editor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>ComponentColumn as Editor</h1>
    
            <ext:GridPanel 
                runat="server" 
                Title="ComponentColumn Editor" 
                Width="600" 
                Height="300">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="IntField" Type="Int" />
                                    <ext:ModelField Name="ComboField" Type="Int" />
                                    <ext:ModelField Name="TextField" Type="String" />
                                    <ext:ModelField Name="DateField" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="IntField"
                            Flex="1"
                            Text="Integer">
                            <Component>
                                <ext:NumberField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="ComboField"
                            Flex="1"
                            Text="ComboBox"
                            SilentSave="false"
                            >
                            <Component>
                                <ext:ComboBox runat="server">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                        <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                        <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                        <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                        <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                        <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                        <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                        <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                        <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                                    </Items>
                                </ext:ComboBox>
                            </Component>
                            <Listeners>
                                <Edit Handler="e.record.data.TextField = e.value;" />
                            </Listeners>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="TextField"
                            Flex="1"
                            Text="Text">
                            <Component>
                                <ext:TextField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="DateField"
                            Flex="1"
                            Text="Date">
                            <Component>
                                <ext:DateField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>          
            </ext:GridPanel>  
        </form>
    </body>
    </html>
  4. #4
    Here is a working example nearer to what I want to accomplish.

    When I select a state I wish the "slogan" field to be copied to the textbox column.

    Please, remember the problem of the "missing roundtrip".

    Thanks in advance.
    M

    <%@ 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)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1, "AL", "Text 1", DateTime.Now.Date },
                    new object[] { 2, "AL", "Text 2", DateTime.Now.Date },
                    new object[] { 3, "AL", "Text 3", DateTime.Now.Date },
                    new object[] { 4, "AL", "Text 4", DateTime.Now.Date },
                    new object[] { 5, "AL", "Text 5", DateTime.Now.Date },
                    new object[] { 6, "AL", "Text 6", DateTime.Now.Date },
                    new object[] { 7, "AL", "Text 7", DateTime.Now.Date },
                    new object[] { 8, "AL", "Text 8", DateTime.Now.Date },
                    new object[] { 9, "AL", "Text 9", DateTime.Now.Date }
                };
    
                this.Store1.DataBind();
            }
        }
    
    
        private object TestData
        {
            get
            {
                return new object[]
                {
                    new object[] { "AL", "Alabama", "The Heart of Dixie" },
                    new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                    new object[] { "AZ", "Arizona", "The Grand Canyon State" },
                    new object[] { "AR", "Arkansas", "The Natural State" },
                    new object[] { "CA", "California", "The Golden State" },
                    new object[] { "CO", "Colorado", "The Mountain State" },
                    new object[] { "CT", "Connecticut", "The Constitution State" },
                    new object[] { "DE", "Delaware", "The First State" },
                    new object[] { "DC", "District of Columbia", "The Nation's Capital" },
                    new object[] { "FL", "Florida", "The Sunshine State" },
                    new object[] { "GA", "Georgia", "The Peach State" },
                    new object[] { "HI", "Hawaii", "The Aloha State" },
                    new object[] { "ID", "Idaho", "Famous Potatoes" },
                    new object[] { "IL", "Illinois", "The Prairie State" },
                    new object[] { "IN", "Indiana", "The Hospitality State" },
                    new object[] { "IA", "Iowa", "The Corn State" },
                    new object[] { "KS", "Kansas", "The Sunflower State" },
                    new object[] { "KY", "Kentucky", "The Bluegrass State" },
                    new object[] { "LA", "Louisiana", "The Bayou State" },
                    new object[] { "ME", "Maine", "The Pine Tree State" },
                    new object[] { "MD", "Maryland", "Chesapeake State" },
                    new object[] { "MA", "Massachusetts", "The Spirit of America" },
                    new object[] { "MI", "Michigan", "Great Lakes State" },
                    new object[] { "MN", "Minnesota", "North Star State" },
                    new object[] { "MS", "Mississippi", "Magnolia State" },
                    new object[] { "MO", "Missouri", "Show Me State" },
                    new object[] { "MT", "Montana", "Big Sky Country" },
                    new object[] { "NE", "Nebraska", "Beef State" },
                    new object[] { "NV", "Nevada", "Silver State" },
                    new object[] { "NH", "New Hampshire", "Granite State" },
                    new object[] { "NJ", "New Jersey", "Garden State" },
                    new object[] { "NM", "New Mexico", "Land of Enchantment" },
                    new object[] { "NY", "New York", "Empire State" },
                    new object[] { "NC", "North Carolina", "First in Freedom" },
                    new object[] { "ND", "North Dakota", "Peace Garden State" },
                    new object[] { "OH", "Ohio", "The Heart of it All" },
                    new object[] { "OK", "Oklahoma", "Oklahoma is OK" },
                    new object[] { "OR", "Oregon", "Pacific Wonderland" },
                    new object[] { "PA", "Pennsylvania", "Keystone State" },
                    new object[] { "RI", "Rhode Island", "Ocean State" },
                    new object[] { "SC", "South Carolina", "Nothing Could be Finer" },
                    new object[] { "SD", "South Dakota", "Great Faces, Great Places" },
                    new object[] { "TN", "Tennessee", "Volunteer State" },
                    new object[] { "TX", "Texas", "Lone Star State" },
                    new object[] { "UT", "Utah", "Salt Lake State" },
                    new object[] { "VT", "Vermont", "Green Mountain State" },
                    new object[] { "VA", "Virginia", "Mother of States" },
                    new object[] { "WA", "Washington", "Green Tree State" },
                    new object[] { "WV", "West Virginia", "Mountain State" },
                    new object[] { "WI", "Wisconsin", "America's Dairyland" },
                    new object[] { "WY", "Wyoming", "Like No Place on Earth" } 
                };
            }
        }
        
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComponentColumn Editor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>ComponentColumn as Editor</h1>
    
            <ext:GridPanel 
                runat="server" 
                Title="ComponentColumn Editor" 
                Width="600" 
                Height="300">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="IntField" Type="Int" />
                                    <ext:ModelField Name="ComboField" Type="String" />
                                    <ext:ModelField Name="TextField" Type="String" />
                                    <ext:ModelField Name="DateField" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="IntField"
                            Flex="1"
                            Text="Integer">
                            <Component>
                                <ext:NumberField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="ComboField"
                            Flex="1"
                            Text="ComboBox"
                            SilentSave="false"
                            >
                            <Component>
                                <ext:ComboBox runat="server"  DisplayField="name" ValueField="abbr"
                                    QueryMode="Local" TypeAhead="true">
                                    <Store>
                                        <ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
                                            <Model>
                                                <ext:Model runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="abbr" />
                                                        <ext:ModelField Name="name" />
                                                        <ext:ModelField Name="slogan" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                            <Reader>
                                                <ext:ArrayReader />
                                            </Reader>
                                        </ext:Store>
                                    </Store>
                                </ext:ComboBox>
                            </Component>
                            <Listeners>
                                <Edit Handler="e.record.data.TextField = e.value;" />
                            </Listeners>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="TextField"
                            Flex="1"
                            Text="Text">
                            <Component>
                                <ext:TextField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
    
                        <ext:ComponentColumn 
                            runat="server" 
                            Editor="true"
                            DataIndex="DateField"
                            Flex="1"
                            Text="Date">
                            <Component>
                                <ext:DateField runat="server" />
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>          
            </ext:GridPanel>  
        </form>
    </body>
    </html>
  5. #5
    Quote Originally Posted by marco.morreale View Post
    When I select a state I wish the "slogan" field to be copied to the textbox column.
    Example
    <Edit Handler="e.record.data.TextField = e.cmp.findRecordByValue(e.cmp.getValue()).data.slogan;" />
    Quote Originally Posted by marco.morreale View Post
    Please, remember the problem of the "missing roundtrip".
    Does the example reproduce it? If no, please provide a sample to reproduce.
  6. #6
    I'm getting a "null object" error.

    Yes, the example reproduces the round trip error (nothing happens at first edit).
    M
  7. #7
    Reproduced with the v2.1 release, but not with SVN trunk.

    Please update from SVN trunk.

Similar Threads

  1. Replies: 1
    Last Post: Dec 10, 2013, 10:42 AM
  2. Replies: 0
    Last Post: Feb 22, 2013, 2:24 PM
  3. [CLOSED] Display ComboBox.Text in ComponentColumn
    By CPA1158139 in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 17, 2013, 3:37 PM
  4. [CLOSED] Combobox resize in ComponentColumn Chrome
    By prost in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 28, 2013, 2:58 PM
  5. Replies: 1
    Last Post: Dec 25, 2008, 6:32 AM

Tags for this Thread

Posting Permissions