* [pbs-devel] [PATCH proxmox-backup] ui: tape/ChangerStatus: improve layout for large libraries
@ 2021-07-23 6:31 Dominik Csapak
2021-07-26 8:12 ` [pbs-devel] applied: " Dietmar Maurer
0 siblings, 1 reply; 2+ messages in thread
From: Dominik Csapak @ 2021-07-23 6:31 UTC (permalink / raw)
To: pbs-devel
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>
---
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
^ permalink raw reply [flat|nested] 2+ messages in thread
* [pbs-devel] applied: [PATCH proxmox-backup] ui: tape/ChangerStatus: improve layout for large libraries
2021-07-23 6:31 [pbs-devel] [PATCH proxmox-backup] ui: tape/ChangerStatus: improve layout for large libraries Dominik Csapak
@ 2021-07-26 8:12 ` Dietmar Maurer
0 siblings, 0 replies; 2+ messages in thread
From: Dietmar Maurer @ 2021-07-26 8:12 UTC (permalink / raw)
To: Proxmox Backup Server development discussion, Dominik Csapak
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@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: {
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2021-07-26 8:12 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2021-07-23 6:31 [pbs-devel] [PATCH proxmox-backup] ui: tape/ChangerStatus: improve layout for large libraries Dominik Csapak
2021-07-26 8:12 ` [pbs-devel] applied: " Dietmar Maurer
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox