[OPEN] [#925] [3.2.1] Toolbar Overflow bug with Combobox

Page 1 of 2 12 LastLast
  1. #1

    [OPEN] [#925] [3.2.1] Toolbar Overflow bug with Combobox


    Please load the example.
    * Notice the rightmost control on the top toolbar is empty.
    * Make sure the screen is fully maximized so that you can see the entire toolbar.
    * Now click the Linux Penguin to load the combo data.
    * Verify, the data is loaded by clicking the combo
    * Now shrink the screen to half size the the combo appears in the overflow part.
    * Click the double arrow for the overflow and verify the combo exists.
    * Now click the combo dropdown (in the overflow) and notice the combo is empty.

    This is a problem and it works fine if you load the combo store inline (markup) via ListItem. It only fails if the store is loaded after the page renders.


    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
             this.Store1.DataSource = new List<Project> 
                new Project(100, "Ext Forms: Field Anchoring", 1, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, new DateTime(2007, 06, 24)),
                new Project(100, "Ext Forms: Field Anchoring", 2, "Implement AnchorLayout", 4, 150, 0, new DateTime(2007, 06, 25)),
                new Project(100, "Ext Forms: Field Anchoring", 3, "Add support for multiple types of anchors", 4, 150, 0, new DateTime(2007, 06, 27)),
                new Project(100, "Ext Forms: Field Anchoring", 4, "Testing and debugging", 8, 0, 0, new DateTime(2007, 06, 29)),
                new Project(100, "Ext Forms: Field Anchoring", 5, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, new DateTime(2007, 06, 24)),
                new Project(100, "Ext Forms: Field Anchoring", 6, "Implement AnchorLayout", 4, 150, 0, new DateTime(2007, 06, 25)),
                new Project(100, "Ext Forms: Field Anchoring", 7, "Add support for multiple types of anchors", 4, 150, 0, new DateTime(2007, 06, 27)),
        public class Project
            public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
                this.ProjectID = projectId;
                this.Name = name;
                this.TaskID = taskId;
                this.Description = description;
                this.Estimate = estimate;
                this.Rate = rate;
                this.Due = due;
            public int ProjectID { get; set; }
            public string Name { get;set; }
            public int TaskID { get; set; }
            public string Description { get;set; }
            public int Estimate { get;set; }
            public double Rate { get; set; }
            public double Cost { get; set; }
            public DateTime Due { get; set; }
    <!DOCTYPE html>
    <head id="Head1" runat="server">
        <title>Menu bug</title>
            var loadCombo = function () {
                var ctl = App.testssdsdf;
                var data = [];
                data.push({ id: 1, dates: "Some Data 1" });
                data.push({ id: 2, dates: "Some Data 2" });
                data.push({ id: 3, dates: "Some Data 3" });
                data.push({ id: 4, dates: "Some Data 4" });
                data.push({ id: 5, dates: "Some Data 5" });
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">        
            <h1>Menu overflow bug</h1>
            <ext:Viewport runat="server" Layout="FitLayout" AutoScroll="true">
                            <ext:Toolbar  ID="ToolbarTimecard" runat="server" EnableOverflow="true" >
                                    <ext:Button ID="ButtonPreviousTimecard" runat="server"  Icon="Tux"> 
                                            <Click Handler="loadCombo();" />
                                    <ext:ToolbarSeparator Hidden="true" ID="SingleSeparator" />
                                    <ext:ComboBox ID="test" 
                                            EmptyText="Select an ..."
                                            Width="350" >
                                    <ext:Button ID="ButtonNext" runat="server" Icon="ResultsetNext">
                                    <ext:ToolbarSeparator />
                                    <ext:Label ID="TPeriod" runat="server" Html="<b>&nbsp;Period:</b>" />
                                    <ext:Button ID="ButtonPd" runat="server"  Icon="ResultsetPrevious">
                                    <ext:ComboBox ID="testssdsdf" 
                                        Editable="false" >
                                            <ext:Store ID="Store2" runat="server">
                                                    <ext:Model ID="Model2" IDProperty="id" runat="server">
                                                            <ext:ModelField Name="id" Type="Int" />
                                                            <ext:ModelField Name="dates" Type="String"/>
                                    <ext:Button ID="ButtonNex" runat="server" Icon="ResultsetNext">
                                    <ext:ToolbarSeparator />
                                    <ext:Label ID="TiId" runat="server" Html="<b>&nbsp;Tid Id:</b>" />
                                    <ext:ToolbarSeparator />
                                    <ext:Label ID="Timetus" runat="server" Html="<b>&nbsp;Status:</b>" />
                                    <ext:ToolbarFill />
                            <ext:Store ID="Store1" runat="server">
                                    <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                                            <ext:ModelField Name="ProjectID" Type="Int" />
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="TaskID" Type="Int" />
                                            <ext:ModelField Name="Description" />
                                            <ext:ModelField Name="Estimate" Type="Int" />
                                            <ext:ModelField Name="Rate" Type="Float" />
                                            <ext:ModelField Name="Cost" Type="Float" />
                                            <ext:ModelField Name="Due" Type="Date" />
                        <ColumnModel ID="ColumnModel1" runat="server">
                                <ext:Column ID="Column1"
                                <ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="180" />
                                <ext:DateColumn ID="DateColumn1"
                                    Text="Due Date"
                                <ext:Column ID="Column3"
                                <ext:Column ID="Column4"
                            <ext:GridView ID="GridView7" runat="server" StripeRows="true">
                            <ext:RowSelectionModel ID="RowSelectionModelTimecard" runat="server" Mode="Single" />
    Last edited by Daniil; Oct 22, 2015 at 9:32 AM. Reason: [OPEN] [#925] [3.2.1]
  2. #2
    Hi @Z,

    Thank you for the report!

    Created an Issue:

    As a workaround, I could suggest this:
            <ext:Store ID="Store2" runat="server">
  3. #3
    using your workaround..... i can see the data in the dropdown now (in the overflow). however, when the combo is within the overflow, the "select" event doesnt fire.

  4. #4
    Yeah, that is a problem with the Toolbar overflow functionality. I'll try to find a workaround for the Select listeners.
  5. #5
    I see in ExtJS code that the Listeners are ignored entirely.

    Only a Button's Click and a form field's Change events are managed. It would be good to see this information in ExtJS docs.

    There might be a technical reason why all the other are not managed, though I tried this override that should get form fields' events working. Though, that is only an experiment. I am still not sure there is no significant reason why it is not done on ExtJS side.

        createMenuConfig: function (component, hideOnClick) {
            var config = Ext.apply({}, component.initialConfig),
                group = component.toggleGroup,
                listeners = config.listeners, // added by Daniil
                changeFn; // added by Daniil
            Ext.copyTo(config, component, [
                'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu', 'tabIndex'
            Ext.applyIf(config, {
                text: component.overflowText || component.text,
                hideOnClick: hideOnClick,
                destroyMenu: false,
                listeners: null
            // Clone must have same value, and must sync original's value on change
            if (component.isFormField) {
                config.value = component.getValue();
                // Sync the original component's value when the clone changes value.
                // This intentionally overwrites any developer-configured change listener on the clone.
                // That's because we monitor the clone's change event, and sync the
                // original field by calling setValue, so the original field's change
                // event will still fire.
                // Overridden by Daniil
                config.listeners = listeners;
                changeFn = function (c, newVal, oldVal) {
                if (config.listeners) {
                    config.listeners.change = changeFn;
                } else {
                    config.listeners = {
                        change: changeFn
                // End of Daniil's override
            // ToggleButtons become CheckItems
            else if (group || component.enableToggle) {
                Ext.apply(config, {
                    hideOnClick: false,
                    group: group,
                    checked: component.pressed,
                    handler: function (item, e) {
            // Buttons may have their text or icon changed - this must be propagated to the clone in the overflow menu
            if (component.isButton && !component.changeListenersAdded) {
                    textchange: this.onButtonAttrChange,
                    iconchange: this.onButtonAttrChange,
                    toggle: this.onButtonToggle
                component.changeListenersAdded = true;
            // Typically margins are used to separate items in a toolbar
            // but don't really make a lot of sense in a menu, so we strip
            // them out here.
            delete config.margin;
            delete config.ownerCt;
            delete config.xtype;
            delete config.id;
            delete config.itemId;
            return config;
  6. #6
    Thank You. The fix (override) works as expected. However, i found a new bug (related) once fix was in place.

    In the case that the Select handler of the dropdown down updates an element in the overflow, this doesnt not properly reflect.

    I attached a screenshot. See the date in the dropdown... Now see the Label (Id). The 214442 will not update even if i add this to the dropdown handler App.Label.SetText('wer'); Reason is that the overflow doesnt seem to refresh.

    Attached Thumbnails Click image for larger version. 

Name:	Untitled.png 
Views:	15 
Size:	7.4 KB 
ID:	24367  
  7. #7
    The problem here is that the overflow functionality creates duplicates of components. It doesn't move an original component forth and back from a Toolbar itself and its overflow counterpart. So, there are two Labels. One sits in the Toolbar, another - in the overflow menu. The one in the overflow menu is created client side and not quite accessible from server side - it is why App.Label.SetText(...) doesn't work.

    I can suggest the following.

    1. Remove delete config.itemId; from my override.
    2. Set ItemID="TiId" for the Label
    3. Use this Select listeners on the ComboBox:
    <Select Handler="var value = records[0].data.id,
                         label = this.up().getComponent('TiId');
                     if (App.TiId !== label) { // true means that the label sits in the overflow menu
                     }" />
  8. #8
    thanks! however, i think this goes beyond what i am willing to override. i will just deal with this for now as is. If i close the overlap and just reopen it, would it refresh properly? I would be ok with that solution.
  9. #9
    If i close the overlap and just reopen it, would it refresh properly?
    I am not sure if I understand your question, but I guess just closing and reopening will not refresh it.
  10. #10
    upgraded to 4.7.1
    should i remove this override?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 11
    Last Post: Jun 23, 2015, 3:51 PM
  2. [CLOSED] Disable overflow for some ToolBar's items
    By RCN in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 30, 2013, 3:22 PM
  3. Display error of Toolbar Overflow
    By howardyin in forum 2.x Help
    Replies: 8
    Last Post: Jan 11, 2013, 2:04 AM
  4. [CLOSED] Toolbar overflow icons
    By paulc in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 28, 2011, 3:09 PM
  5. [CLOSED] [1.0] Toolbar Overflow
    By Ben in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 12, 2010, 4:02 PM

Posting Permissions