[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

    Support,

    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.

    Thanks,
    /Z


    <%@ 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)),
             };
    
    
            this.Store1.DataBind();
        }
    
    
        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; }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head id="Head1" runat="server">
        <title>Menu bug</title>
        
        <script>
            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" });
    
    
                ctl.getStore().loadData(data);
            }
    
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">        
    
    
            </ext:ResourceManager>
            
            <h1>Menu overflow bug</h1>
    
    
            <ext:Viewport runat="server" Layout="FitLayout" AutoScroll="true">
                <Items>
                    <ext:GridPanel 
                        ID="GridPanel1" 
                        runat="server" 
                        Title="Test"       
                        ColumnLines="true"                  
                        Layout="FitLayout">
                        <TopBar>
                            <ext:Toolbar  ID="ToolbarTimecard" runat="server" EnableOverflow="true" >
                                <Items>
    
    
                                    <ext:Button ID="ButtonPreviousTimecard" runat="server"  Icon="Tux"> 
                                        <Listeners>
                                            <Click Handler="loadCombo();" />
                                        </Listeners>
                                    </ext:Button>
    
    
                                    <ext:ToolbarSeparator Hidden="true" ID="SingleSeparator" />
    
    
                                    <ext:ComboBox ID="test" 
                                            QueryMode="Local"
                                            ForceSelection="true"
                                            TriggerAction="All"
                                            EmptyText="Select an ..."
                                            DisplayField="text"
                                            ValueField="id"
                                            runat="server" 
                                            Width="350" >
    
    
                                    </ext:ComboBox>
    
    
                                    <ext:Button ID="ButtonNext" runat="server" Icon="ResultsetNext">
                                    </ext:Button>
    
    
                                    <ext:ToolbarSeparator />
                                    <ext:Label ID="TPeriod" runat="server" Html="<b>&nbsp;Period:</b>" />
    
    
                                    <ext:Button ID="ButtonPd" runat="server"  Icon="ResultsetPrevious">
                                    </ext:Button>
                                    <ext:ComboBox ID="testssdsdf" 
                                        runat="server" 
                                        ForceSelection="true"
                                        TriggerAction="All"
                                        Width="170" 
                                        DisplayField="dates"
                                        QueryMode="Local"
                                        ValueField="id" 
                                        Editable="false" >
                                        <Store>
                                            <ext:Store ID="Store2" runat="server">
                                                <Model>
                                                    <ext:Model ID="Model2" IDProperty="id" runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="id" Type="Int" />
                                                            <ext:ModelField Name="dates" Type="String"/>
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                            </ext:Store>
                                        </Store>
                                    </ext:ComboBox>
                                    <ext:Button ID="ButtonNex" runat="server" Icon="ResultsetNext">
                                    </ext:Button>
                                    <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 />
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                                        <Fields>
                                            <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" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1"
                                    runat="server"
                                    TdCls="task"
                                    Text="Task"
                                    Sortable="true"
                                    DataIndex="Description"
                                    Hideable="false"
                                    Width="300">
                                </ext:Column>
                         
                                <ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="180" />
                         
                                <ext:DateColumn ID="DateColumn1"
                                    runat="server"
                                    Width="130"
                                    Text="Due Date"
                                    Sortable="true"
                                    DataIndex="Due"
                                    Format="MM/dd/yyyy">
                                </ext:DateColumn>
     
                                <ext:Column ID="Column3"
                                    runat="server"  
                                    Width="130"
                                    Text="Estimate"
                                    Sortable="true"
                                    DataIndex="Estimate">
                                </ext:Column>
                         
                                <ext:Column ID="Column4"
                                    runat="server"
                                    Width="130"
                                    Text="Rate"
                                    Sortable="true"
                                    DataIndex="Rate">
                                </ext:Column>
                         
                                <ext:Column
                                    runat="server"
                                    Width="130"
                                    ID="Cost"
                                    Text="Cost"
                                    Sortable="false"
                                    Groupable="false"
                                    DataIndex="Cost">
                                </ext:Column>
                            </Columns>                
                        </ColumnModel>           
                        <View>
                            <ext:GridView ID="GridView7" runat="server" StripeRows="true">
                            </ext:GridView>
                        </View>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModelTimecard" runat="server" Mode="Single" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
    
    
        </form>
      </body>
    </html>
    Last edited by Daniil; Oct 22, 2015 at 8:32 AM. Reason: [OPEN] [#925] [3.2.1]
  2. #2
    Hi @Z,

    Thank you for the report!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/925

    As a workaround, I could suggest this:
    <ext:ComboBox 
        runat="server"
        ...
        StoreID="Store2">
        <Bin>
            <ext:Store ID="Store2" runat="server">
                ...
            </ext:Store>
        </Bin>
    </ext:ComboBox>
  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.

    /Z
  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.
    http://docs.sencha.com/extjs/5.1/5.1...eateMenuConfig

    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.

    Override
    Ext.layout.container.boxOverflow.Menu.override({
        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) {
                    component.setValue(newVal);
                };
    
                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) {
                        component.onClick(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) {
                component.on({
                    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.

    Thanks,
    /Z
    Attached Thumbnails Click image for larger version. 

Name:	Untitled.png 
Views:	43 
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');
                                                             
                     label.setText(value);
    
                     if (App.TiId !== label) { // true means that the label sits in the overflow menu
                         App.TiId.setText(value);
                     }" />
  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.
    thanks
    /Z
  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?
    /Z
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 11
    Last Post: Jun 23, 2015, 2: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, 2:22 PM
  3. Display error of Toolbar Overflow
    By howardyin in forum 2.x Help
    Replies: 8
    Last Post: Jan 11, 2013, 1:04 AM
  4. [CLOSED] Toolbar overflow icons
    By paulc in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 28, 2011, 2:09 PM
  5. [CLOSED] [1.0] Toolbar Overflow
    By Ben in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 12, 2010, 3:02 PM

Posting Permissions