tree (navbar + filemanager + details

Webix JS
1

Hi,

I’m pretty new to Webix, so please forgive me for what may be an obvious question. I’m trying to create a page with a navbar like the demo apps on the left, the filemanager in the center, and a detail form on the right. The purpose of the navbar on the left is to provide a high level grouping. I have tried various approaches to this, but I’m not having much success. Can someone please give me an idea of how to do this? I’m having trouble creating this page layout.

Thanks,
-S

2

Hi,

check http://webix.com/snippet/fbe52481

3

Hi Maksim,

That’s awesome! It will help a lot with my understanding. However, it doesn’t work for me. That may explain the trouble I was having. I’m pretty sure I have the latest download. I also tried using the cdn links, but it doesn’t seem to make a difference. There is no error loading anything. It just gives a blank page. What could be the problem? I can see it in the snippet you pointed me to, so I don’t think it is the browser.

Thanks,
-S

4

Hi Maksim,

I was going to paste the code here, but I can’t figure out how to do that.

Thanks,
-S

5

Hi Maksim,

Chrome gives the following:

Uncaught TypeError: Cannot read property ‘s’ of null webix_debug.js:7 webix.ui main.html:26 (anonymous function)

firefox gives the following:

TypeError: h is null webix.js:7

Thanks,
-S

6

Hi,

please make sure that you included FileManager libraries in your page. If you want to post your code here, you can put it between ~~~js and ~~~. for example:

`~~~js
// your code here

`
7

Hi Maksim,

Okay. I was putting this in a div. I guess that is a bad idea, because as soon as I killed the div, it started working.

I notice that you used a list for the navbar. It seems like the navbar in the demo app is probably based on a tree view. Is there any example other than the demo app that shows how to make the tree look like that? With the horizontal lines and such. I’ve been looking at the demo source, but it is a little hard to follow.

BTW: The light is starting to come on with the whole row/col/{} thing. Thanks again for the example.

Thanks,
-S

8

Hi Maria,

Thanks for the tip. I will use the ~js/~ the next time I need to paste in some code.

Thanks,
-S

9

Check menu config here

https://github.com/mkozhukh/webix-app-start/blob/master/views/top.js

This is a simplest sidebar menu with icons

10

Hi Maksim,

Thank you for the example. I m getting closer to what I am trying to do. I have created a variation of your first example using resizers. This causes the left side button icons on the filemanager to display off center. They are pushed to the right. This effects the menu, forward, backward, up folder buttons. How Could I fix this? I’ve included the code below:


    webix.ui({
      rows:[
        {cols:[ button1, button2, {}, button3 ]},
        {cols:[ navbar, {view:"resizer"}, files, {view:"resizer"}, details ]},
        {view:"resizer"},
	{template:"status"}
    ]
    });

Thanks,
-S

11

Can you share a screenshoot of the invalid UI, I have checked the above code and it works correctly for me.

12

Hi Maksim,

I figured it out. It was a css conflict.

Thanks,
-S