[CLOSED] Fill combobox in gridpanel from behind

  1. #1

    [CLOSED] Fill combobox in gridpanel from behind

    Hi,
    I have made a poup window with some gridpanels. One of the gridpanels contains a combobox. The contents of the combobox should be filled on the basis of some selections by the user. This means that the contents of the combobox is only known at the moment that the panel is shown.

    I made a simplified example that shows the problem. The example is based on one of the ext.net examples (Form/Combobox/Items actions).
    I get an error message: You have to set widget's ID to call its methods (IScriptable.cs). ID's are all set, so what could be the problem?

    Thanks, Hans Wapenaar

    Imports Ext.Net
    Imports Ext.Net.Utilities
    Imports ExtX = Ext.Net.X
    
    Partial Class Default7
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If (Not ExtX.IsAjaxRequest) Then
                Me.StoreStructure.DataSource = New Object() {
                    New Object() {"id 1", "Text 1", "none"},
                    New Object() {"id 2", "Text 2", "none"},
                    New Object() {"id 3", "Text 3", "none"},
                    New Object() {"id 4", "Text 4", "none"},
                    New Object() {"id 5", "Text 5", "none"},
                    New Object() {"id 6", "Text 6", "none"},
                    New Object() {"id 7", "Text 7", "none"},
                    New Object() {"id 8", "Text 8", "none"},
                    New Object() {"id 9", "Text 9", "none"}
                }
                Me.StoreStructure.DataBind()
            End If
        End Sub
    
        Protected Sub btn1_OnChange(ByVal sender As Object, ByVal e As DirectEventArgs)
            ImportDetailsWindow.Show()
        End Sub
    
        Protected Sub InsertRecord(ByVal sender As Object, ByVal e As DirectEventArgs)
            Dim values As Dictionary(Of String, Object) = New Dictionary(Of String, Object)
            values.Add("Text", "Text0")
            values.Add("Value", "0")
            Me.ComboBox1.InsertRecord(1, values)
        End Sub
    
        Protected Sub InsertRecord2(ByVal sender As Object, ByVal e As DirectEventArgs)
            Me.ComboBox2.InsertItem(0, "Text0", "0")
        End Sub
    End Class
    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default7.aspx.vb" Inherits="Default7" %>
    
    <!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 runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
           <ext:Panel ID="pnlImport" runat="server"  
                Header="false" 
                FrameHeader="false"
                Border="false"
                MarginSpec="0 0 0 0"
                PaddingSpec="0 0 0 0">
                <Items>
                    <ext:Button ID="btn1" runat="server" Text="test" >
                        <DirectEvents>
                            <Click OnEvent="btn1_OnChange"  ></Click>
                        </DirectEvents>
                    </ext:Button>
                </Items>
            </ext:Panel>
    
             <ext:Window 
                ID="ImportDetailsWindow" 
                runat="server" 
                Icon="Group" 
                Title="Import"
                Width="600" 
                Height="600" 
                AutoShow="false" 
                Modal="true" 
                Hidden="true"
                Layout="BorderLayout" >
                <Items>
                <ext:Panel ID="panelStructure" runat="server"  
                    Region="Center" 
                    Header="true"  Title="Kolommen"
                    FrameHeader="false"
                    Border="false"
                    MarginSpec="0 0 0 0"
                    PaddingSpec="0 0 0 0" >
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Insert: server side (1)">
                                <DirectEvents>
                                    <Click OnEvent="InsertRecord" />
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Text="Insert: server side (2)">
                                <DirectEvents>
                                    <Click OnEvent="InsertRecord2" />
                                </DirectEvents>
                            </ext:Button>
                            <ext:GridPanel 
                                ID="GridPanelStructure"  
                                runat="server"
                                Border="false"
                                HideHeaders="false"
                                MarginSpec="0 0 0 0"
                                PaddingSpec="0 0 0 0"
                                StyleSpec="background-color: transparent;" 
                                Hidden="false"  
                                AutoScroll="false" 
                                ForceFit="true" >
                                <Store>
                                    <ext:Store ID="StoreStructure"  runat="server" >
                                        <Model>
                                            <ext:Model ID="ModelStructure" runat="server" IDProperty="ColumnName" >
                                                    <Fields>
                                                        <ext:ModelField  Name="columnname" Type="String" />
                                                        <ext:ModelField  Name="columntype" Type="String" />
                                                        <ext:ModelField  Name="match" Type="String" />
                                                    </Fields>
                                            </ext:Model>
                                        </Model> 
                                    </ext:Store>
                                </Store>
                                <ColumnModel ForceFit="true" >
                                    <Columns>
                                        <ext:Column ID="ColumnColumnName" ColumnID="ColumnColumnName" runat="server" DataIndex="columnname" Text="columnname" Visible="true" />
                                        <ext:Column ID="ColumnColumnType" ColumnID="ColumnColumnType" runat="server" DataIndex="columntype" Text="columntype" Visible="true" />
                                        <ext:ComponentColumn ID="ComponentColumn1" 
                                            runat="server" 
                                            Editor="true"
                                            DataIndex="match"
                                            Flex="1"
                                            Text="ComboBox1">
                                            <Component>
                                                <ext:ComboBox ID="ComboBox1" runat="server"
                                                    DisplayField="Text" 
                                                     ValueField="Value" Mode="Local">
                                                    <Store>
                                                        <ext:Store ID="Store1" runat="server">          
                                                            <Model>
                                                                <ext:Model ID="Model1" runat="server" IDProperty="Value">
                                                                    <Fields>
                                                                        <ext:ModelField Name="Text" />
                                                                        <ext:ModelField Name="Value" />
                                                                    </Fields>
                                                                </ext:Model>
                                                            </Model>
                                                        </ext:Store>
                                                    </Store>
                                                    <Items>
                                                    </Items>
                                                 </ext:ComboBox>
                                            </Component>
                                        </ext:ComponentColumn> 
                                       <ext:ComponentColumn ID="ComponentColumn2" 
                                            runat="server" 
                                            Editor="true"
                                            DataIndex="match"
                                            Flex="1"
                                            Text="ComboBox2">
                                            <Component>
                                                <ext:ComboBox ID="ComboBox2" runat="server">
                                                    <Items>
                                                        <ext:ListItem Text="Text2" Value="2" />
                                                        <ext:ListItem Text="Text3" Value="3" />
                                                        <ext:ListItem Text="Text4" Value="4" />
                                                        <ext:ListItem Text="Text5" Value="5" />                
                                                    </Items>
                                                 </ext:ComboBox>
                                            </Component>
                                        </ext:ComponentColumn> 
                                    </Columns>
                                </ColumnModel>
                            </ext:GridPanel>
                        </Items> 
                    </ext:Panel>
                </Items> 
            </ext:Window> 
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 12, 2013 at 6:37 PM. Reason: [CLOSED]
  2. #2
    Hi Hans,

    A ComponentColumn clones its Component for each row and it applies some dynamic ids for an individual component in each row.

    Please clarify do you want to bind to a ComboBoxes the same data for each row or the data can be different for different rows?
  3. #3
    Hi Daniil,

    Data in combobox will be the same for all records. But it should be possible to switch the contents of the comboboxes to an other list of options (switch with a button). Also then: all records the same contents.

    Hans
  4. #4
    I can suggest the following solution.

    Example
    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" }
                };
            }
        }
    
        protected void LoadData1(object sender, DirectEventArgs e)
        {
            this.Store1.DataSource = new object[] 
                { 
                    new object[] { "1", "Item 1" },
                    new object[] { "2", "Item 2" },
                    new object[] { "3", "Item 3" }
                };
    
            this.Store1.DataBind();
        }
    
        protected void LoadData2(object sender, DirectEventArgs e)
        {
            this.Store1.DataSource = new object[] 
                { 
                    new object[] { "4", "Item 4" },
                    new object[] { "5", "Item 5" },
                    new object[] { "6", "Item 6" }
                };
    
            this.Store1.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Load Data 1" OnDirectClick="LoadData1" />
    
            <ext:Button runat="server" Text="Load Data 2" OnDirectClick="LoadData2" />
    
            <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" />
                                    <ext:ModelField Name="test3" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                        <ext:ComponentColumn runat="server" Editor="true">
                            <Bin>
                                <ext:Store ID="Store1" runat="server">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="value" />
                                                <ext:ModelField Name="text" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                    <Reader>
                                        <ext:ArrayReader />
                                    </Reader>
                                </ext:Store>
                            </Bin>
                            <Component>
                                 <ext:ComboBox 
                                    ID="ComboBox1" 
                                    runat="server" 
                                    DisplayField="text" 
                                    ValueField="value"
                                    StoreID="Store1"
                                    AutoLoad="false" />
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>        
        </form>
    </body>
    </html>
  5. #5
    Wow....

    I implemented your suggestion in my aspx/aspx.vb sourcecode and got it working: switching the contents of the combobox works. Great!

    I will now continue linking the combox to the gridpanel data and adding a directevent to the combox.
    Thanks a lot.

    Hans
  6. #6
    Quote Originally Posted by HansWapenaar View Post
    and adding a directevent to the combox.
    I guess you will have to use a ComboBox's Listeners + DirectMethods. It is not possible to use DirectEvent of a ComponentColumn's Component due to this same reason.

    Quote Originally Posted by Daniil View Post
    A ComponentColumn clones its Component for each row and it applies some dynamic ids for an individual component in each row.
  7. #7
    Ok,

    I did apply a combobox listener and a directmethod. Got that working. Passing the selected option in the combobox and the record (index and data) of the dataset/store which contains the combobox.

    So you can close this thread. Thanks a lot for the support.

    Hans Wapenaar

        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var testMatch = function(combo, record, index) {
                    var indx = combo.record.index;
                    var colname = combo.record.data.columnname;
                    var coltype = combo.record.data.columntype;
                    var colmatch = combo.record.data.match;
                   // alert(combo.getValue()+" "+indx+": "+colname+"  "+coltype+"  "+colmatch);
                    App.direct.setData(indx, colname, combo.getValue());
                }
            </script>
        </ext:XScript>
  8. #8
    Here is a related thread.
    http://forums.ext.net/showthread.php?32041

Similar Threads

  1. Fill Calendar Panel on combobox selection
    By Rupesh in forum 1.x Help
    Replies: 7
    Last Post: Mar 29, 2012, 2:14 PM
  2. Problem to fill a combobox with store
    By feanor91 in forum 1.x Help
    Replies: 1
    Last Post: Nov 22, 2011, 1:12 PM
  3. [CLOSED] Fill a combobox with an enum.
    By capecod in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 22, 2010, 2:06 PM
  4. combobox fill dynamically uing enum
    By Prasad in forum 1.x Help
    Replies: 0
    Last Post: Aug 19, 2010, 12:29 PM
  5. Replies: 1
    Last Post: Jul 02, 2010, 1:08 AM

Posting Permissions