[CLOSED] Combobox in Toolbar in TreePanel, issue

**ADV** · Jul 23, 2016, 8:11 PM

Hi,

If I add data to a treepanel with a toolbar, containing a combobox,
combobox loses data.

Below is an example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zz_TestPage.aspx.cs" Inherits="WEB_CITRACKER.zz_TestPage_aspx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script type="text/javascript">
        var StatusRenderer = function (value, st) {
            var ind = st.find("ID", value);
            var r = st.getAt(ind);

            if (Ext.isEmpty(r)) {
                return "";
            }
            return r.data.Value;
        };
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:Viewport ID="ViewportMain" runat="server" Layout="BorderLayout" StyleSpec="background-color: transparent;">
            <Items>
                <ext:TreePanel ID="TreePanelAssessment" ColumnLines="true" RowLines="true" Title="Assessments/Goals" Region="North" Flex="1" Icon="Plugin" MarginSpec="20 50 10 30" Frame="true" Stateful="false" StateID="CIT_TreePanelAssessment" BodyCls="css1"
                    runat="server"
                    Collapsible="true"
                    UseArrows="true"
                    RootVisible="false"
                    MultiSelect="false"
                    SingleExpand="false"
                    FolderSort="false">
                            
                    <Store>
                        <ext:TreeStore ID="StoreAssessment" runat="server">
                            <Model>
                                <ext:Model ID="ModelAssessment" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="ID" />
                                        <ext:ModelField Name="A" />
                                        <ext:ModelField Name="B" />
                                        <ext:ModelField Name="C" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:TreeStore>
                    </Store>

                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server" Height="30">
                            <Items>
<%--                                <ext:Button ID="cmdAssessmentCreate" ClientIDMode="Static" runat="server" Text="TEST" Icon="PluginEdit" Margins="0 0 0 2">
                                    <DirectEvents>
                                            <Click OnEvent="cmdAssessmentCreate_DirectClick" Buffer="250">
                                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{TreePanelAssessment}" MinDelay="2000" />
                                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{TreePanelX}" MinDelay="2000" />
                                            </Click>
                                        </DirectEvents>  
                                </ext:Button>--%>

                                <ext:ComboBox ID="cmbYears" runat="server" ValueField="ID" DisplayField="Value" FieldLabel="Year" Editable="false" RemoveClearTrigger="true" LabelWidth="30" Width="100" MarginSpec="0 35 0 0" QueryMode="Local" >
                                        <DirectEvents>
   <%--                                     <Select OnEvent = "cmbYear_OnDirectChange">
                                            <EventMask ShowMask="true" Msg="Changing reference year..." MinDelay="500" Target="CustomTarget" CustomTarget="#{PanelDX}" />
                                        </Select>--%>
                                    </DirectEvents>
                                </ext:ComboBox> 

                                <ext:Button ID="Button2" ClientIDMode="Static" runat="server" Text="Create assessments" Icon="PluginEdit" Margins="0 0 0 2">
                                    <DirectEvents>
                                        <Click OnEvent="cmdAssessmentCreate_DirectClick" Buffer="250" />
                                    </DirectEvents>  
                                    <Listeners>
                                        <Click Handler="App.TreePanelAssessment.setLoading('hold on, loading'); App.TreePanelX.setLoading('hold on, loading this too');" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>

                    <ColumnModel>
                        <Columns>
                            <ext:TreeColumn ID="TreeColumn1" runat="server" Width="250" Text="A" DataIndex="A" />

                            <ext:Column ID="Column9" runat="server" MinWidth="220" MaxWidth="350" Flex="1" Text="B" DataIndex="B" >
                                <Editor><ext:TextField ID="txtASSESSOR" runat="server" /></Editor>
                            </ext:Column>

                            <ext:Column ID="Column16" runat="server" Width="240" Text="Type" DataIndex="TYPE" Align="Left">
                                <Renderer Handler="return StatusRenderer(value, #{StoreAssessmentTypes});" />
                                <Editor>
                                    <ext:ComboBox ID="cmbAssessmentTYPE" runat="server" StoreID="StoreAssessmentTypes" ValueField="ID" DisplayField="Value" Width="240" MaxWidth="240" Editable="false" QueryMode="Local" />
                                </Editor>
                                <EditorOptions CompleteOnEnter="true" CancelOnEsc="true" RevertInvalid="true" />
                            </ext:Column>

                        </Columns>
                    </ColumnModel>

                    <Root>
                        <ext:Node Text="Initial Root" />                                                  
                    </Root>

                    <View>
                        <ext:TreeView ID="TreeGridViewAssessment_ROWS" runat="server" MarkDirty="true" />
                    </View>

                    <SelectionModel>
                        <ext:TreeSelectionModel ID="TreeSelectionModelAssesments" runat="server" Mode="Single">     
                        </ext:TreeSelectionModel>
                    </SelectionModel>
                            
                    <Plugins>
                        <ext:CellEditing ID="CellEditingAssessment" runat="server" ClicksToEdit="2">
                        </ext:CellEditing>
                    </Plugins>

                </ext:TreePanel>

                <ext:TreePanel ID="TreePanelX" ColumnLines="true" RowLines="true" Title="Assessments/Goals" Region="Center" Flex="1" Icon="Plugin" MarginSpec="10 50 10 30" Frame="true" Stateful="false" StateID="CIT_TreePanelAssessment" BodyCls="css1"
                    runat="server"
                    Collapsible="true"
                    UseArrows="true"
                    RootVisible="false"
                    MultiSelect="false"
                    SingleExpand="false"
                    FolderSort="false">
                            
                    <Store>
                        <ext:TreeStore ID="TreeStore1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="ID" />
                                        <ext:ModelField Name="A" />
                                        <ext:ModelField Name="B" />
                                        <ext:ModelField Name="C" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:TreeStore>
                    </Store>

                    <TopBar>
                        <ext:Toolbar ID="Toolbar2" runat="server" Height="30">
                            <Items>
                                <ext:Button ID="Button1" ClientIDMode="Static" runat="server" ondirectclick="cmdAssessmentCreate_DirectClick" Text="Create assessments" Icon="PluginEdit" Margins="0 0 0 2" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>

                    <ColumnModel>
                        <Columns>
                            <ext:TreeColumn ID="TreeColumn2" runat="server" Width="250" Text="A" DataIndex="A" />

                            <ext:Column ID="Column1" runat="server" MinWidth="220" MaxWidth="350" Flex="1" Text="B" DataIndex="B" >
                                <Editor><ext:TextField ID="TextField1" runat="server" /></Editor>
                            </ext:Column>

                            <ext:Column ID="Column2" runat="server" Width="240" Text="Type" DataIndex="TYPE" Align="Left">
                                <Renderer Handler="return StatusRenderer(value, #{StoreAssessmentTypes});" />
                                <Editor>
                                    <ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreAssessmentTypes" ValueField="ID" DisplayField="Value" Width="240" MaxWidth="240" Editable="false" QueryMode="Local" />
                                </Editor>
                                <EditorOptions CompleteOnEnter="true" CancelOnEsc="true" RevertInvalid="true" />
                            </ext:Column>

                        </Columns>
                    </ColumnModel>

                    <Root>
                        <ext:Node Text="Initial Root" />                                                  
                    </Root>

                    <View>
                        <ext:TreeView ID="TreeView1" runat="server" MarkDirty="true" />
                    </View>

                    <SelectionModel>
                        <ext:TreeSelectionModel ID="TreeSelectionModel1" runat="server" Mode="Single">     
                        </ext:TreeSelectionModel>
                    </SelectionModel>
                            
                    <Plugins>
                        <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="2">
                        </ext:CellEditing>
                    </Plugins>

                </ext:TreePanel>
            </Items>

            <Bin>
                <ext:Model ID="ID_ModelGenericComboBox" Name="ModelGenericComboBox" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" />
                        <ext:ModelField Name="Value" />
                    </Fields>
                </ext:Model>

                <ext:Store ID="StoreAssessmentTypes" runat="server" AutoLoad="true" ModelName="ModelGenericComboBox" AutoDestroy="false"/>
            </Bin>

        </ext:Viewport>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
using System.Threading;
using Ext.Net;


namespace WEB_CITRACKER
{
    public partial class zz_TestPage_aspx : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {

                List<object> oData = new List<object>();

                StoreAssessmentTypes.RemoveAll();

                oData.Add(new { ID = "SA", Value = "Self assesment" });
                oData.Add(new { ID = "V", Value = "Validated" });
                oData.Add(new { ID = "PC", Value = "Project check" });

                StoreAssessmentTypes.DataSource = oData;


                cmbYears.Items.Add(new Ext.Net.ListItem("2014", "2014"));
                cmbYears.Items.Add(new Ext.Net.ListItem("2015", "2015"));
                cmbYears.Items.Add(new Ext.Net.ListItem("2016", "2016"));
                cmbYears.Items.Add(new Ext.Net.ListItem("2017", "20175"));

                Ext.Net.ListItem itemValue = new Ext.Net.ListItem { Value = "2016" };
                cmbYears.SelectedItems.Add(itemValue);
                cmbYears.UpdateSelectedItems();
            }
        }



        protected void cmdAssessmentCreate_DirectClick(object sender, DirectEventArgs e)
        {
            polulateTree1();
            polulateTree2();
        }

        private void polulateTree1()
        {
            Ext.Net.Node root = new Ext.Net.Node();
            Ext.Net.Node nP = new Ext.Net.Node();

            TreePanelAssessment.Root.Clear();

            root.CustomAttributes.Add(new ConfigItem("CODICE", "ROOT", ParameterMode.Value));
            TreePanelAssessment.Root.Add(root);


            nP = new Ext.Net.Node { NodeID = "1", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "1"));
            nP.CustomAttributes.Add(new ConfigItem("A", "A", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "B", ParameterMode.Value));
            root.Children.Add(nP);

            nP = new Ext.Net.Node { NodeID = "2", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "2"));
            nP.CustomAttributes.Add(new ConfigItem("A", "S", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "D", ParameterMode.Value));
            root.Children.Add(nP);

            nP = new Ext.Net.Node { NodeID = "3", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "3"));
            nP.CustomAttributes.Add(new ConfigItem("A", "G", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "F", ParameterMode.Value));
            root.Children.Add(nP);

            TreePanelAssessment.Render();


            TreeSelectionModelAssesments.DeselectAll();
            TreeSelectionModelAssesments.ClearSelection();
        }
        private void polulateTree2()
        {
            Ext.Net.Node root = new Ext.Net.Node();
            Ext.Net.Node nP = new Ext.Net.Node();

            TreePanelX.Root.Clear();

            root.CustomAttributes.Add(new ConfigItem("CODICE", "ROOT", ParameterMode.Value));
            TreePanelX.Root.Add(root);


            nP = new Ext.Net.Node { NodeID = "1", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "1"));
            nP.CustomAttributes.Add(new ConfigItem("A", "A", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "B", ParameterMode.Value));
            root.Children.Add(nP);

            nP = new Ext.Net.Node { NodeID = "2", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "2"));
            nP.CustomAttributes.Add(new ConfigItem("A", "S", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "D", ParameterMode.Value));
            root.Children.Add(nP);

            nP = new Ext.Net.Node { NodeID = "3", Leaf = true, Icon = Icon.Star };
            nP.CustomAttributes.Add(new ConfigItem("ID", "3"));
            nP.CustomAttributes.Add(new ConfigItem("A", "G", ParameterMode.Value));
            nP.CustomAttributes.Add(new ConfigItem("B", "F", ParameterMode.Value));
            root.Children.Add(nP);

            TreePanelX.Render();

        }

    }
}

To reproduce perform:

After page load check data in combobox. There are 4 dates

Click Test Button

Treepanel will be populated

Combobox became empty!

I think the problem hapens after "TreePanelX.Render();"

Any idea?

**fabricio.murta** · Jul 25, 2016, 10:02 PM

Hello @ADV!

As you call render() the combo box gets its initial setup. So you should either define how the combo's store loads in markup or turn the combo's data load in page_load() into a function, and also call it while refreshing the tree panel.

I hope this helps!

**ADV** · Jul 25, 2016, 10:21 PM

Hello,

I had tried this, but a stupid mistake on my code has me fooled.

Thank you!

**fabricio.murta** · Jul 26, 2016, 8:36 PM

Hello @adv!

Caching happens! :)

If you come to get a clear outcome to the sample you provided and feels like sharing, we would love to hear from you what best worked in your scenario! And that's going to be helpful for others in the future as well!

Thread: [CLOSED] Combobox in Toolbar in TreePanel, issue

Thread Tools

Search Thread

Display

[CLOSED] Combobox in Toolbar in TreePanel, issue

Similar Threads

[CLOSED] Toolbar with Menu issue

[CLOSED] Is multiple row in toolbar for treepanel possible?

[CLOSED] BUG: TreePanel with over toolbar in IE8, IE9, IE10

[CLOSED] UI issue with Toolbar

[CLOSED] ContextMenu in TreePanel shows menu when right click title or toolbar

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Combobox in Toolbar in TreePanel, issue

[CLOSED] Combobox in Toolbar in TreePanel, issue

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us