onResize event on components other than datatable

Webix JS
1

Howdy. I’ve built a dynamic interface in which users may split panels to suit their needs. They can be resized using resizers. However, since they are created dynamically and I never know what panels are on either side of the resizer, I can’t use it’s event to catch an onResize event.

I’ve found a workaround for this that is placing 2 1pixel high/wide datatables in each non-datatable panel in order to catch the event but this seems to result in some inconsistent behaviour (besides feeling like a horrendous patchwork solution).

Any native way to get onResize to work with layouts?

2

Hello,

You can attach onLayoutResize event handler to webix object. The event handler takes two rows or cols of a layout that have changed their sizes.

http://webix.com/snippet/a516c6f3

Also views that support event handling ( Layout does not support attachEvent method ) allow to listen to onViewResize event.

3

Thank you for the reply.

That only solves half the problem. If I resize using the resizers, onViewReize does indeed work. However, if I resize the browser, it doesn’t detect.

Using my previews method (one pixel-wide and one pixel-high datatables), the onResize event fired when the browsers resized.

4

Can you share the use-case, why do you need the onResize event at all?

Do you need to store the sizes of UI, or have a custom UI that need to be resized in some specific way? There are solutions for both scenarios that will work without onResize event.

5

Users can split panels vertically and horizontally at will and fill the panels with pre-defined components. One of these components is a d3-chart. I need the browser resize event because if the parent panel of the d3-chart resizes, the d3-chart itself does not automatically resize to fit the content, it has to be done manually because the svg inside the chart is also set manually and doesn’t adjust.

As is, I’m accomplishing this by detecting a window.onresize, finding all d3-chart components currently in the UI and calling the manual resize method.

All other components are not an issue because they’re based on datatables and I can just use the native onResize, which detects both the resizer resize and browser resize.

6

You can subclass view and redefine $setSizes to have a full control over resizing. $setSize is called each time when new size is applied to the view.

if the next code, change the oldview to the name of view where you need to have a custom logic.

webix.protoUI({
   name:"newview",
   $setSize:function(x,y){
             //will be called after each resize
             return webix.ui.oldview.prototype.$setSize(x,y);
   }
}, webix.ui.oldview);

//later
webix.ui({ view:"newview" })
7

Does $setSizes work with layouts? Because in your example, my oldview would be ‘layout’.

Edit: I ask because I tried it and it broke with a ‘Uncaught TypeError: Cannot read property ‘style’ of undefined’ error.

8

Sorry, it was a typo in my code

It must be

 return webix.ui.oldview.prototype.$setSize.call(this, x,y);

http://webix.com/snippet/c070fbc0