Results 1 to 3 of 3

Thread: Issues with toolbar menu overflowHandler.

    Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    16

    Default Issues with toolbar menu overflowHandler.

    Given below is a viewport and its corresponding viewModel.


    Code:
    Ext.define('Testing.view.main.Main', {
    	extend: 'Ext.panel.Panel',
    	xtype: 'app-main',
    
    
    	requires: [
    		'Ext.plugin.Viewport',
    		'Ext.window.MessageBox',
    
    
    		'Testing.view.main.MainController',
    		'Testing.view.main.MainModel',
    		'Testing.view.main.List'
    	],
    
    
    	controller: 'main',
    	viewModel: 'main',
    
    
    	layout: {
    		type: 'border'
    	},
    
    
    	items: [{
    			region: 'center',
    			xtype: 'panel',
    			id: 'viewContainer',
    			layout: {
    				type: 'card'
    			}
    		}, {
    			xtype: "toolbar",
    			id: "navigationBar",
    			region: "west",
    			width: 104,
    			layout: {
    				type: "vbox",
    				align: "stretch"
    			},
    			overflowHandler: "menu",
    			items: [{
    					"xtype": "button",
    					"text": "",
    					height: 30
    				}, {
    					"xtype": "button",
    					"pressed": true,
    					"iconAlign": "top",
    					"enableToggle": true,
    					"toggleGroup": "btnToolbarToggleGroup",
    					height: 60,
    					"bind": {
    						"text": "{VerticalToolbar_TaskList_Button_Text}"
    					}
    				}, {
    					"xtype": "button",
    					"iconAlign": "top",
    					"enableToggle": true,
    					"toggleGroup": "btnToolbarToggleGroup",
    					height: 60,
    					"bind": {
    						"text": "{VerticalToolbar_PriceCheck_Button_Text}"
    					}
    				}, {
    					"xtype": "button",
    					"iconAlign": "top",
    					"enableToggle": true,
    					"menuAlign": "tr",
    					"toggleGroup": "btnToolbarToggleGroup",
    					height: 60,
    					"bind": {
    						"text": "{VerticalToolbar_PriceList_Button_Text}"
    					},
    					"arrowVisible": false,
    					"menu": {
    						"xtype": "menu",
    						defaults: {
    							height: 50
    						},
    						"items": [{
    								"xtype": "menuitem",
    								"bind": {
    									"text": "{VerticalToolbar_PriceListCreate_Button_Text}"
    								}
    							}, {
    								"xtype": "menuitem",
    								"bind": {
    									"text": "{VerticalToolbar_PriceListWorkbench_Button_Text}"
    								}
    							}
    						]
    					}
    				}, {
    					"xtype": "button",
    					"iconAlign": "top",
    					"menuAlign": "tr",
    					"enableToggle": true,
    					"toggleGroup": "btnToolbarToggleGroup",
    					height: 60,
    					"bind": {
    						"text": "{VerticalToolbar_Agreements_Button_Text}"
    					},
    					"arrowVisible": false,
    					"menu": {
    						"xtype": "menu",
    						defaults: {
    							height: 50
    						},
    						"items": [{
    								"xtype": "menuitem",
    								"bind": {
    									"text": "{VerticalToolbar_CreateAgreement_Button_Text}"
    								}
    							}, {
    								"xtype": "menuitem",
    								"iconAlign": "top",
    								"bind": {
    									"text": "{VerticalToolbar_AgreementWorkbench_Button_Text}"
    								}
    							}
    						]
    					}
    				}, {
    					"xtype": "button",
    					"iconAlign": "top",
    					"menuAlign": "tr",
    					"enableToggle": true,
    					"toggleGroup": "btnToolbarToggleGroup",
    					height: 60,
    					"bind": {
    						"text": "{VerticalToolbar_Quotes_Button_Text}"
    					},
    					"arrowVisible": false,
    					"menu": {
    						"xtype": "menu",
    						defaults: {
    							height: 50
    						},
    						"items": [{
    								"xtype": "menuitem",
    								"iconAlign": "top",
    								"bind": {
    									"text": "{VerticalToolbar_CreateQuote_Button_Text}"
    								}
    							}, {
    								"xtype": "menuitem",
    								"iconAlign": "top",
    								"bind": {
    									"text": "{VerticalToolbar_QuoteWorkbench_Button_Text}"
    								}
    							}
    						]
    					}
    				}, {
    					"xtype": "button",
    					"iconAlign": "top",
    					"enableToggle": true,
    					"toggleGroup": "btnToolbarToggleGroup",
    					height: 60,
    					"bind": {
    						"text": "{VerticalToolbar_Opportunities_Button_Text}"
    					}
    				}, {
    					"xtype": "button",
    					"iconAlign": "top",
    					"enableToggle": true,
    					"toggleGroup": "btnToolbarToggleGroup",
    					height: 60,
    					"menuAlign": "bl-br?",
    					"bind": {
    						"text": "{VerticalToolbar_Reports_Button_Text}"
    					},
    					"arrowVisible": false,
    					"menu": {
    						"xtype": "menu",
    						defaults: {
    							height: 50
    						},
    						"items": [{
    								"xtype": "menuitem",
    								"iconAlign": "top",
    								"bind": {
    									"text": "{VerticalToolbar_ReportsFinder_Button_Text}"
    								}
    							}, {
    								"xtype": "menuitem",
    								"iconAlign": "top",
    								"bind": {
    									"text": "{VerticalToolbar_ReportsSetup_Button_Text}"
    								}
    							}, {
    								"xtype": "menuitem",
    								"iconAlign": "top",
    								"bind": {
    									"text": "{VerticalToolbar_ReportsDetail_Button_Text}"
    								}
    							}
    						]
    					}
    				}, {
    					"xtype": "button",
    					"iconAlign": "top",
    					height: 60,
    					"enableToggle": true,
    					"menuAlign": "bl-br?",
    					"toggleGroup": "btnToolbarToggleGroup",
    					"bind": {
    						"text": "{VerticalToolbar_Admin_Button_Text}",
    					},
    					"arrowVisible": false,
    					"menu": {
    						"xtype": "menu",
    						defaults: {
    							height: 50
    						},
    						"items": [{
    								"xtype": "menuitem",
    								"bind": {
    									"text": "{VerticalToolbar_AdminApprovalLevel_Button_Text}"
    								}
    							}
    						]
    					}
    				}
    			]
    		}
    	]
    });

    Code:
    Ext.define('Testing.view.main.MainModel', {
    	extend: 'Ext.app.ViewModel',
    
    
    	alias: 'viewmodel.main',
    
    
    	data: {
    		name: 'Testing',
    
    
    		"VerticalToolbar_TaskList_Button_Text": "Task List",
    		"VerticalToolbar_PriceCheck_Button_Text": "Price Check",
    		"VerticalToolbar_PriceList_Button_Text": "Price List",
    		"VerticalToolbar_PriceListCreate_Button_Text": "Create",
    		"VerticalToolbar_PriceListWorkbench_Button_Text": "Workbench",
    		"VerticalToolbar_Agreements_Button_Text": "Agreements",
    		"VerticalToolbar_CreateAgreement_Button_Text": "Create",
    		"VerticalToolbar_AgreementWorkbench_Button_Text": "Workbench",
    		"VerticalToolbar_Quotes_Button_Text": "Quotes",
    		"VerticalToolbar_CreateQuote_Button_Text": "Create",
    		"VerticalToolbar_QuoteWorkbench_Button_Text": "Workbench",
    		"VerticalToolbar_Opportunities_Button_Text": "Opportunity",
    		"VerticalToolbar_Reports_Button_Text": "Reports",
    		"VerticalToolbar_ReportsFinder_Button_Text": "Finder",
    		"VerticalToolbar_ReportsSetup_Button_Text": "Setup",
    		"VerticalToolbar_ReportsDetail_Button_Text": "Details",
    		"VerticalToolbar_Admin_Button_Text": "Admin",
    		"VerticalToolbar_AdminApprovalLevel_Button_Text": "Approval Level",
    	}
    });

    This viewport is of border layout consisting of center and a west reagion, west region contains a toolbar with overflowHandler as menu. Text property of all the buttons within toolbar are bind.
    -------------------------------------------------------
    Issue 1:
    1. Resize browser such that only two buttons appears on toolbar with overflow menu button.
    2. Reload the page (F5).


    At this stage it throws an error and nothing gets rendered:
    Uncaught TypeError: Cannot read property 'measuresBox' of null.


    Issue 2:
    1. Resize browser such that only two buttons appears on toolbar with overflow menu button.
    2. Click on overflow menu button.


    At this stage menu shows buttons but without a scrollbar, this hides some buttons. If overflow menu button is again clicked it properly shows buttons with a scrollbar.
    --------------------------------------------------------


    It is observed that if value for text property of all the buttons is not binded then the above issue does not occur.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report. Can you please post a runnable test case which reproduces the issues?
    https://fiddle.sencha.com/#view/editor

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    16

    Default

    how to edit fiddle's viewport? For this issue i need to generate a viewport, which i think fiddle does not allow.

    You can create a new app, and replace following files with above code:
    Main class: classic\src\view\main\Main.js
    ViewModel class: app\view\main\MainModel.js

    attaching screenshot for better understanding.Issue1_after reloading page.pngissue2_after_clicking_overflowmenu_button.pngnormal_View.jpgstep1_for_both_issue.png

Similar Threads

  1. [OPEN] references and overflowHandler: 'menu' don't get along
    By themightychris in forum Ext 5: Bugs
    Replies: 5
    Last Post: 23 Nov 2016, 12:49 PM
  2. Modern toolkit tabbar overflowHandler: 'Menu'
    By bogdica21 in forum Ext JS 6.x Q&A
    Replies: 3
    Last Post: 7 Apr 2016, 12:36 AM
  3. [FIXED] Overflowhandler menu + formBind does not work correctly
    By Zdeno in forum Ext 5: Bugs
    Replies: 7
    Last Post: 21 Jul 2015, 2:33 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •