[pbs-devel] applied: [PATCH proxmox-backup] ui: tape/ChangerStatus: improve layout for large libraries

[Dietmar Maurer]

applied

On 7/23/21 8:31 AM, Dominik Csapak wrote:
> instead of having the grid be as tall as possible and the containing
> panel scroll. limit the grids height to the panel size and scroll the
> grid.
>
> this has two advantages:
> * if a user has many slots, it is now possible to to navigate the other
>    grids to the position wanted
> * having the grids scroll, means it can use extjs' buffered renderer,
>    which makes the view much more responsive (in case of hundreds of
>    slots)
>
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>   www/tape/ChangerStatus.js | 14 +++++++++++---
>   1 file changed, 11 insertions(+), 3 deletions(-)
>
> diff --git a/www/tape/ChangerStatus.js b/www/tape/ChangerStatus.js
> index 97b8f78e..a99b6ba6 100644
> --- a/www/tape/ChangerStatus.js
> +++ b/www/tape/ChangerStatus.js
> @@ -693,9 +693,8 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   	},
>       ],
>   
> -    layout: 'auto',
> +    layout: 'fit',
>       bodyPadding: 5,
> -    scrollable: true,
>   
>       items: [
>   	{
> @@ -703,7 +702,7 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   	    reference: 'content',
>   	    layout: {
>   		type: 'hbox',
> -		aling: 'stretch',
> +		align: 'stretch',
>   	    },
>   	    items: [
>   		{
> @@ -711,6 +710,7 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   		    reference: 'slots',
>   		    title: gettext('Slots'),
>   		    padding: 5,
> +		    srollable: true,
>   		    flex: 1,
>   		    store: {
>   			type: 'diff',
> @@ -771,10 +771,16 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   		    defaults: {
>   			padding: 5,
>   		    },
> +		    layout: {
> +			type: 'vbox',
> +			align: 'stretch',
> +		    },
>   		    items: [
>   			{
>   			    xtype: 'grid',
>   			    reference: 'drives',
> +			    scrollable: true,
> +			    maxHeight: 350, // ~10 drives
>   			    title: gettext('Drives'),
>   			    store: {
>   				type: 'diff',
> @@ -918,6 +924,8 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
>   			{
>   			    xtype: 'grid',
>   			    reference: 'import_export',
> +			    flex: 1,
> +			    srollable: true,
>   			    store: {
>   				type: 'diff',
>   				rstore: {