Premium support for our pure JavaScript UI components


Post 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

Attachments
scroll.png
scroll.png (84.21 KiB) Viewed 227 times

Post by alex.l »

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

All the best,
Alex


Post 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;
                }
              }
            }
          ]

Post 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


Post by pincherhgz »

great, thanks


Post 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


Post by pincherhgz »

works great, thanks


Post Reply