What's the correct way to extend components?

Webix JS
1

I’m creating some custom components to use on my application.
They suffer from the same issue. When I create a instance within a window and then I close this window, all the other components from the same type that are out of this window, lost its events and other properties. If I hide the window, everything keeps working, but I’ll suffer from memory leak after several windows.

Here is an example of a simple custom combo.
http://webix.com/snippet/287ffeec

Steps:

  • You can see that both combos are working.
  • Open the window
  • The third combo is working.
  • Close the window
  • The previous two combos don’t work anymore.

I know I’m probably creating this custom combo wrongly. But after reading a lot, I couldn’t find anything that solved my issue. Any thoughts?

Thank you!

2

UP! Any ideas? I’m kind stuck with this issue :frowning:

3

I’m not good enough to find what’s wrong.

We didn’t have this issue because we use a system which creates windows on demand but never destroy them (they are just hidden).

4

I don’t think simply hide the window full of components would be the best practice. Of course it depends the size of your application. But a application with several windows/components would generate a huge memory demand after some time using it.

And I may be doing something wrong on the creating of custom components. I’m just trying to find the better way to do it :slight_smile:

5

Maybe… We use windows mainly for forms, and the idea was to avoid creating widgets which has already been created : for speed … and it maybe goes less heavy on the GC ? ( I have no number to prove that, though )
So far, the memory consumption seems stable.

Anyway, it is also possible that your current problem is a webix bug…

Helga ? Listopad ? Maksim ? Help ! :slight_smile:

6

Hi,

Let’s explore the problem from the very beginning.

When you define options for the combo box (richselect, etc.) a suggest list is created, which is basically a popup with an option list inside. Placing its initialization into defaults makes Webix creating one and the same list for several times.

So, you have three lists with the same id. If you coded under the debug version of Webix (webix_debug.js), you could see a warning message (Not unique ID). Snippet tool uses webix.js so this message is ignored.

Then you close the window. This action destroys the window itself and all the components inside it and all the popups related to these components. So, all the popups are destroyed because they have the same ID. Hiding, on the contrary, doesn’t presuppose destruction, it’s just setting display to none.

After clicking on other combos a warning message (Unknown popup) shows up. Indeed, a popup has been destroyed together with the window.

That’s the theory. In practice, if you initialize an empty popup and later populate it with select options, you will have three independent suggest lists, each of which relates to its own combo box.

Please check the snippet and sorry for the delay: http://webix.com/snippet/435274eb

P.s. Though it’s not a good practice - you’ll have lots of same popups in the app, it solves the problem with destruction. In other situations suggest sharing is preferred: http://webix.com/snippet/060a435e

7

Hello Helga!

Thanks for this awesome explanation. I’ll make some tests to see which option is the best for my application.

Have a nice week!