Cols and Rows page definition

Hi,

I’m new to Webix and I’m trying to build a POC.
So far so good after 10 years of no touching web-ui development :wink:
I think Webix is fantastic and I can appreciate its value.

I’m struggling in trying to create the following which I think is a standard “template” now days.

I love the the view=toolbar row at the top.
I like the left-hand side menu in the form of view=list.

Then I would like to have a couple of areas on the main part of the page.
2 rows I guess?
I don’t seem to be able to figure out how to do it.

Is there anybody out there that could share some support?

Graphically I’d like to achieve the following and have ROW-1 and ROW-2.
Thank you very much

+-------------------------------------------+
|         toolbar                                                             |
+-----+-------------------------------------+
|      |                                                                          |
|list |                                                                          |
|      |                                                                          |
|      |            ROW-1                                                   |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      +---------------------------------------+
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      |           ROW-2                                                    |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
|      |                                                                          |
+--+----------------------------------------+                                         

What I have at the moment is

rows:[
      { view:"toolbar", css:"webix_dark", cols:[
        { view:"label", label:"My Toolbar"},
        { view:"icon", icon:"wxi-pencil", tooltip:"Edit"},
        { view:"icon", icon:"wxi-alert", tooltip:"Messages"},
        { view:"icon", icon:"wxi-user", tooltip:"Personal settings"}
      ]},
      { cols :[
        {
          view:"list",
          id:"menuList",
          width:100,
        },
        {
          view:"form",   // which is and should be ROW-1
          id:"mylForm"
        },
        {
          view:"datatable",  // which should be ROW-2 and not COL-3
          id:"dtResult",
          editable:true,
        }

it must be simple but what I tried was not successful.
Thank you

Hi @Lucaz ,
You should wrap ROW-1 and ROW-2 into the rows property.
Also, please, check form initialization and properties required for that. You might find a lot of useful information in webix tutorials as well.
Please, check the snippet for your desired layout: Code Snippet

Thank you @pyrus_vagus very useful!