In this article we'll tell you how to redraw initialized components if you'd like to change something (values of the buttons, windows etc).
The technique is the following:
There are two ways how to make this:
This way must be used when you need to redefine the whole component with all the nesting staff.
$$(componentId).define("parameter", new_value); $$(componentId).render();
Look at it in use:
Imagine, you have some toolbar, like this:
And when you click the button Choose it must be changed to :
So, we face the need to redefine the component.
Our actions (don't forget about ids):
<body> <script type="text/javascript" charset="utf-8"> // data of the first toolbar var config1 = [ {type:"label", label:"Backpackr", align:"left"}, {type:"segmented", id:"tabs2", segment:[ {key:"tab_a", label:"Hotel"},{key:"tab_b", label:"Motel"},{key:"tab_c", label:"Hostel"} ]}, {type:"button", label:"Choose",align:"right", click:"swap"}, // here we specify our function swap(). It will be called on the button click. {type:"roundbutton", label: "Photos", align:"right" }, {type:"roundbutton", label: "Prices", align:"right" }, {type:"roundbutton", label: "Info", align:"right" } ]; // data of the second toolbar var config2 = [ {type:"label", label:"Backpackr", align:"left"}, {type:"segmented", id:"tabs1", segment:[ {key:"tab_a", label:"Plane"},{key:"tab_b", label:"Train"},{key:"tab_c", label:"Bus"} ]}, {type:"roundbutton", label: "Book seat", align:"right" } ]; dhx.ui({ rows:[ {view:"toolbar", id:"topbar", type:"MainBar", data:config1 },// toolbar, data of which we specify separately ] }); function swap(){ $$("topbar").clearAll();//clears old data $$("topbar").define("data",config2); //redefining code mentioned at the top of the section. $$("topbar").render(); } </script> </body>
This variant is applicable in all other situations (when you needn't to redraw the whole component but one of its elements).
$$(componentId).item(elementId).someParameter = new_value; $$(componentId).refresh(elementId);
Let's again take a toolbar as an example.
On the toolbar you can see the button 'Full information'. What do we need? On the button click we want change the content of the displayed information: the full details to only the most important of them. Also, we want to change the button's text accordingly: 'Full information' to 'Short information'.
Our actions (remember about ids):
<body> <script type="text/javascript" charset="utf-8"> dhx.ui({ rows:[ {view:"toolbar", type:"MainBar", id:"topbar", data: [ // defines toolbar with data {type:"label", label:"Backpackr", align:"left"}, {type:"roundbutton", id:"InfoButton", label: "Full information", align:"right", click:"changeButton"}, // here we specify the function changeButton(). It will be called on the button click. {type:"button", label: "Help", align:"right" }, {type:"button", label: "Upload GPS track", align:"right" }, {type:"button", label: "Settings", align:"right" } ]} ] }); function changeButton() { if ($$("topbar").item("InfoButton").label == "Full information") { $$("topbar").item("InfoButton").label = "Short information"; // redefining code mentioned at the top of the section. $$("topbar").refresh("InfoButton") } else{ $$("topbar").item("InfoButton").label = "Full information"; $$("topbar").refresh("InfoButton") } } </script> </body>