Dynamic Layout Rebuilding, programming examples of Dynamic Layout Rebuilding

webix.ui({
  rows:[
    {
      view:"button", value:"Rebuild form",
      inputWidth:150, align:"center",
      click:rebuildForm
    },
    {
      view:"form",
      id:'myform',
      elements:[
        {view:"text", placeholder:"First Name"},
        {view:"text", placeholder:"Last Name"},
        {cols:[
          {view:"button", value:"Cancel"},
          {view:"button", value:"Sumbit", type:"form"}
        ]}
      ]
    },
    {
      view:"button", value:"Replace grid", 
      inputWidth:150, align:"center",
      click:replaceGrid
    }, 
    {id:"mylayout", rows:[
      { view:'toolbar', elements:[
        {},
        {view:"icon", width:40, icon:"mdi mdi-home"},
        {view:"icon", width:40, icon:"mdi mdi-undo"},
        {view:"icon", width:40, icon:"mdi mdi-redo"}
      ]},
      {
        view:'datatable',
        id:'mydatatable',
        scroll:false,
        autoheight:true,
        columns:[
          {id:"rank", header:"", width:40},
          {id:"title", header:"title", fillspace:true},
          {id:"year", header:"Year", width:100},
          {id:"votes", header:"Votes", width:100}
        ],
        data:grid_data
      }
    ]}                
  ]
});


function rebuildForm(){
  webix.ui([
    {view:"datepicker", label:"Date"},
    {view:"colorpicker", label:"Color"},
    {view:"slider"}
  ], $$('myform'));
  this.disable();
}

function replaceGrid(){
  if ($$('mylayout') && $$('mydatatable'))
    webix.ui({
      view:"dataview",
      template:"<b>#title#</b><br>#year#",
      xCount:2,
      type:{
        height:83,
        width:"auto"
      },
      data:grid_data
    }, $$('mylayout'), $$('mydatatable'));
  this.disable()
}