ui: tape/ChangerStatus: improve layout for large libraries

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@proxmox.com>

diff --git a/www/tape/ChangerStatus.js b/www/tape/ChangerStatus.js
index 97b8f78e4796709c0ecd03ca1b5eed820c727e88..a99b6ba6432593a40a95b772b91098904a293c55 100644 (file)
--- 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: {