You can use dhx.ui not only for creating new objects but also for updating the existing ones.
There are 2 possible scenarios:
Remember, if you are going only to manipulate visibility of the predefined set of elements - using of dhx.ui is not the best choice for you.
Using the show(), hide() and showBatch() methods is much better in this situation. Read details in the related how-to - ”Manipulating visibility of elements”.
Let's take as an example, the layout as in:
dhx.ui({ id:"my_layout", rows:[{ view:"toolbar", id:"tbar1", elements:[{ view:"label", label:"My toolbar"}] }, { view:"template", id:"content", template:"some content" }] });
dhx.ui(new_content,layout_id)
To change the layout content to the following:
var new_content = [{ view:"list", url:"data/users.php", template:"#name#" }];
call the next command:
dhx.ui(new_content, $$('my_layout'));
When you don't want to redraw the entire layout but a single cell, use the next dhx.ui overload:
dhx.ui(new_content,layout_id,cell_id)
To replace the content of the second cell (the template) by a list:
var new_content = { view:"list", url:"data/users.php", template:"#name#" };
call the next command:
dhx.ui(new_content, $$('my_layout'),"mytemplate");
In case you need to redefine the same component, you should remember one important thing - the new id of the component must differ from the current one.
For example, to change the toolbar by this new one:
var new_toolbar = { view:"toolbar", id:"tbar2", //the new view id must differ from the current id elements:[{ view:"button", id:"button1", type:"round", label: "Click me!"}] };
call this command:
dhx.ui(new_toolbar, $$('my_layout'),"tbar1" );//
There is one more trick with the toolbar.
This component contains its collection of elements and if you want to change the elements of the component - you have one more variant:
dhx.ui(new_element,toolbar_id); //i.e. dhx.ui([{ view:"button", id:"button1", type:"default", label: "Click me!", width:20}],$$('tbar1'));
To load a new configuration from the server - you can use the following technique:
dhx.ajax("config.json", function(text){ dhx.ui(dhx.DataDriver.json.toObject(text), $$('layout_id')); });
where the config.json contains the new configuration.
Related sample: ui/template/03_ajax_ui.html