[pbs-devel] [PATCH proxmox-backup] ui: tape/ChangerStatus: improve layout for large libraries
Dominik Csapak
d.csapak at proxmox.com
Fri Jul 23 08:31:51 CEST 2021
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: {
--
2.30.2
More information about the pbs-devel
mailing list