Issues with toolbar menu overflowHandler.

[AnaghaVistaar]

Given below is a viewport and its corresponding viewModel.

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}"
								}
							}
						]
					}
				}
			]
		}
	]
});

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.

[Gary Schlosberg]

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

[AnaghaVistaar]

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