Bug: Views added using addView() don't show up

Webix JS
1

I am creating an application with deeply nested elements. To avoid very long lines (I try to keep it under 80 characters per line), I am starting to change the way I build the layout. Instead of using one single call of webix.ui(), I want to create every major control on its own and assemble the layout using the addView() method.

However, some views (e.g. DataTable, Tree) are not visible until you resize the window.

I created a snippet to illustrate my problem. There is no error output whatsoever, so - unfortunately - i can not provide any more information. Is this a known bug and being worked on?

I hope I could help.

Edit

Apparently the snipped loads fine the first time. In order for the bug to “work”, you have to change the code (e.g. add a line break at the end) and let it reload.

2

I can confirm the issue

As quick workaround you can place $$(“mainlayout”).resize(); after adding all views.

Also, there is a more simple solution for complex UI building. You can define structure by separate objects, without huge single config. Check the update snippet.

http://webix.com/snippet/51046fd7

3

Thank you for the quick workaround!

I thought about using your second solution as well, but I don’t particularly like it since you have to define the elements in reversed order (children first, then parents).

4

Yep, it looks as logical order form me - defining small block and then creating something bigger from them, but it may look differently in your case.

If you are using requirejs, browserify or some other js dependency system you can place separate blocks in separate files and use your tool of choice for providing all sub configs in one file

define([
	"views/forms/order",
	"views/menus/export",
	"models/orders"
], function(orderform, exports, orders){

return  { rows:[orderform, exports, orders ] };

});