[CLOSED] adding listitems dynamically in a combobox

  1. #1

    [CLOSED] adding listitems dynamically in a combobox

    Hi,

    I am attempting to add list items dynamically to a combobox located within a gridpanel column. I am attempting to do so using the listener event AfterRender. However it always results in an error eg

    <Editor>
        <ext:ComboBox ID="_options" runat="server" EmptyText="Options" TriggerAction="All">
            <Listeners>
                <AfterRender Fn="addItem" />
            </Listeners>
        </ext:ComboBox>
    </Editor>
    
    var addItem = function(combo, record, index) {
        combo.insertRecord(1, { Text: 'Text1', Value: '1' });
    }
    Any help in fixing this would be greatly appreciated

    Kind Regards

    Lee
  2. #2

    RE: [CLOSED] adding listitems dynamically in a combobox

    Hi,

    Please provide full sample. What are 'record' and 'index' arguments? Where it comes from? Also I think Text and Value names should be lower case ({ text: 'Text1', value: '1' })

    Why do inserting to the '1' position but '0'? Do you have one record in the combo already?
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [CLOSED] adding listitems dynamically in a combobox

    Hi,

    Below is a sample. Answering your question, 'record' and 'index' arguments were added to the javascript function because i had seen it on a forum sample. Most likely i got it completely wrong. I was inserting a record after the first listitem, but this could have easily been before the firstitem.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = 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"} 
            };
            
            this.Store1.DataBind();
            
            }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Comboboxes</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
        <script type="text/javascript">
    
            var addItem = function(combo, record, index) {
                    combo.insertRecord(0, { Text: 'New Option', Value: '4' });
            }
    
        </script>
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="abbr" />
                            <ext:RecordField Name="state" />
                            <ext:RecordField Name="nick" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>            
            </ext:Store>
    
        <ext:GridPanel ID="_gridPanel1" runat="server" Frame="true" StoreID="Store1" Height="258" Width="726" SelectionMemory="Enabled" StripeRows="true">
                 <ColumnModel ID="ColumnModel1" runat="server">
                     <Columns>
                        <ext:Column ColumnID="abbr" DataIndex="abbr" Header="abbr" Width="68" />
                            <ext:Column ColumnID="state" DataIndex="state" Header="state" Width="68" />
                            <ext:Column ColumnID="nick" DataIndex="nick" Width="92" Align="Left" Fixed="true" Sortable="false" MenuDisabled="true" Resizable="false">
                                <Editor>
                                        <ext:ComboBox ID="_options" runat="server" EmptyText="Options" TriggerAction="All">
                                                <Items>
                                                        <ext:ListItem Text="Option 1" Value="1" />
                                                            <ext:ListItem Text="Option 2" Value="2" />
                                                            <ext:ListItem Text="Option 3" Value="3" />
                                                    </Items>
                                                    <Listeners>
                                                        <addItem Handler="onSelect" />
                                                    </Listeners>
                                            </ext:ComboBox>
                                    </Editor>
                             </ext:Column>
                     </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="_gridView1" runat="server" ForceFit="false" />
                </View>
                <BottomBar>
                    <ext:PagingToolBar ID="_pagingToolBar1" runat="server" PageSize="8" StoreID="_store1" DisplayInfo="true" DisplayMsg="Displaying {0} - {1} of {2} records" EmptyMsg="Nothing to display" Visible="true" />
                </BottomBar>
                <LoadMask ShowMask="true" />
                <Plugins>
                    <ext:EditableGrid ID="_editableGrid1" runat="server" />
                </Plugins>
        </ext:GridPanel>
    
        </form>
    </body>
    </html>
  4. #4

    RE: [CLOSED] adding listitems dynamically in a combobox

    Hi,

    Please note that all combos in grid's column will use one shared store. Therefore you add item during combo AfterRender event then it will be called for each combo and the store will contain 'n' same records.
    Use AfterRender event of the grid to initialize the store of combos


    Why you do not add required records in code behind?


    P.S. That js error (which you mentioned) is fixed. Please update from SVN
    Vladimir Shcheglov
    Sr. Developer
  5. #5

    RE: [CLOSED] adding listitems dynamically in a combobox

    Hi,

    I would add the records in codebehind if i knew how, lol.

    I have grabbed the updated copy from svn however now when i attempt to add an item to the combobox with the afterrender event, it adds the listitem 8 times.

    Also is there a way to pass or retrieve the row index on a listitem select?

    Cheers

    Lee


  6. #6

    RE: [CLOSED] adding listitems dynamically in a combobox

    Hi,

    As I said all combos will use one shared store. Therefore you should use AfterRender of the GridPanel. But I think it is better fill Items collection of the Combo in the codebehind (by ListItems)
     _options.Items.Add(new ListItem("text", "value"));

    Also is there a way to pass or retrieve the row index on a listitem select?
    Use AfterEdit (grid's event) event to perform required actions
    <AfterEdit Handler="if(e.field == 'nick'){...}" />

    afteredit : ( Object e )
    Fires after a cell is edited.
    grid - This grid
    record - The record being edited
    field - The field name being edited
    value - The value being set
    originalValue - The original value for the field, before the edit.
    row - The grid row index
    column - The grid column index
    Listeners will be called with the following arguments:
    e : Object
    An edit event (see above for description)

    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. [CLOSED] Adding portlets dynamically
    By GmServizi in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Aug 31, 2012, 8:14 PM
  2. [CLOSED] Can't add ListItems to ComboBox in codebehind [1.0]
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 18, 2012, 6:05 PM
  3. [CLOSED] ListItems / ComboBox - value is always a String?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 31, 2011, 4:46 PM
  4. adding tabs dynamically
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 3
    Last Post: Nov 16, 2009, 8:29 AM
  5. [CLOSED] Dynamically adding controls to a tav
    By riccardosarti in forum 1.x Help
    Replies: 3
    Last Post: Sep 24, 2008, 10:49 AM

Posting Permissions