Page 1 of 1

panel with a list, scroll in list does not work

Posted: Wed Feb 08, 2023 4:10 pm
by pincherhgz

we have this configuration:

        let selection = new bryntum.grid.Panel({
          title       : Ext.application.hummingbirdApi.getLocalized('Selection'),
          floating    : true,
          width       : '20%',
          maxHeight   : '50%',
          tools    : {
              destroy : {
                  cls : 'b-fa b-fa-times',
                  handler : 'up.onPanelCloseClick',
                  tooltip : Ext.application.hummingbirdApi.getLocalized('Close this Panel')
              }
          },
          onPanelCloseClick(e, panel) {
              panel.destroy();
              ecFinSelect = false;
          },
          items     : [
            {
              type  : 'list',
              scrollable  : true,
              multiSelect   : !singleSelect,
              selectAllItem : !singleSelect,
              itemTpl   : item => `<i>${item.objectName}</i>`,
              items     : displayItems,
              onItem(itemEventObject) {
                bryntum.grid.WidgetHelper.toast(Ext.application.hummingbirdApi.getLocalized('You clicked') + ' ' + itemEventObject.record.objectName);
                if (singleSelect){
                  handleSelectObject(itemEventObject,eventObject);
                  selection.destroy();
                  ecFinSelect = false;
                }
              }
            }
          ]
        });

the list is shown, but it cannot be scrolled


Re: panel with a list, scroll in list does not work

Posted: Thu Feb 09, 2023 3:38 am
by alex.l

Hi, you need to set size for the list. Try to set height.


Re: panel with a list, scroll in list does not work

Posted: Thu Feb 09, 2023 8:03 am
by pincherhgz

great, it works with setting to 100%:

items     : [
            {
              type  : 'list',
              height  : '100%',
              scrollable  : true,
              multiSelect   : !singleSelect,
              selectAllItem : !singleSelect,
              itemTpl   : item => `<i>${item.objectName}</i>`,
              items     : displayItems,
              onItem(itemEventObject) {
                bryntum.grid.WidgetHelper.toast(Ext.application.hummingbirdApi.getLocalized('You clicked') + ' ' + itemEventObject.record.objectName);
                if (singleSelect){
                  handleSelectObject(itemEventObject,eventObject);
                  selection.destroy();
                  ecFinSelect = false;
                }
              }
            }
          ]

Re: panel with a list, scroll in list does not work

Posted: Thu Feb 09, 2023 1:14 pm
by Animal

Just give the Panel layout : 'fit'

Then it would fit the width of the panel too.

You always have to explain to HTML any layout behaviour that is not the default.

https://bryntum.com/products/grid/docs/api/Core/widget/Container#config-layout


Re: panel with a list, scroll in list does not work

Posted: Thu Feb 09, 2023 1:16 pm
by pincherhgz

great, thanks


Re: panel with a list, scroll in list does not work

Posted: Thu Feb 09, 2023 1:18 pm
by Animal

And use a Popup instead of a Panel. That is floating by default, and has the CSS show show that. And also has a closable config which can either hide or destroy the Popup on click, so you won't need to add a tool and its handler.

https://bryntum.com/products/grid/docs/api/Core/widget/Popup#config-closable


Re: panel with a list, scroll in list does not work

Posted: Mon Feb 13, 2023 1:36 pm
by pincherhgz

works great, thanks