How to refresh page after I have updated the UI component?

[ArionTT]

I have get this problem when I use design UI component.

The design UI left some pixel in the background.I guess it maybe the background or all the ui need to refresh once. But the I can't find the refresh function.

Then the second problem when I use CompTree component. I build the model by the var:

        var SceneObjects={};
        SceneObjects.value="Root";
        SceneObjects.kids=[];
        SceneObjects.kids[0]={};
        SceneObjects.kids[0].value="Scene Root";
        SceneObjects.kids[0].kids=[];
        SceneObjects.kids[0].kids[0]={};
        SceneObjects.kids[0].kids[0].value="Model1 Root";
        // SceneObjects.kids[0].kids[0].kids=[];
        SceneObjects.kids[0].kids[1]={};
        SceneObjects.kids[0].kids[1].value="Camera Root";
        // SceneObjects.kids[0].kids[1].kids=[];
        SceneObjects.kids[0].kids[1]={};
        SceneObjects.kids[0].kids[1].value="Light Root";
        // SceneObjects.kids[0].kids[1].kids=[];
        SceneObjects.kids[1]={};
        SceneObjects.kids[1].value="SceneUIRoot";

And set the tree model by
tree.setModel(SceneObjects);

When I first show the tree, it like this:

It show tree well.
Then I change the SceneObjects var to add some treeItem.
Finally, I set it again by
tree.setModel(SceneObjects);
But the result is that:

And when I try to click one of them, it will refresh partly.

Well, I want to know how to show it completely when I setMode .

[barmalei]

Take a look at JS console may be there are some exceptions has been fired. They can cause such sort of problems.

To refresh an UI component content you should call "repaint()" method. But in both cases (design component and comp tree) refreshing has to be done automatically by zebkit (no manual execution of repaint is required)

[ArionTT]

Thanks, maybe this caused by Error. I will see.

And I want to ask another question. How to refresh the main zCanvas size ?
When I changed the window size, the canvas always the full size but the rendering UI component don't resize to suit it.
Should I call some function or do something else?

[barmalei]

zCanvas provides "setSizeFull(boolean)" method that forces canvas changing its size to occupy the full available window area.

[ArionTT]

Well, may my description is not clear.
The zCanvas is full size with window. I want the content auto resize the window.
for example:
I have a panel at root of zCanvas.root and this panel is center of border layout of root.
And when I resize the browser window, resume and maximize , the panel don't resize with the window.

And I am trying to setSzieFull(true) zCanvas, but it is useless.

[ArionTT]

Sorry, I found is will auto resize. Thank you.

Finally, Can I ask another question about refresh UI? Can I set panel or another container with setSizeFull(true) to auto resize the parent component?

[barmalei]

Everything what is inserted into panel is laid out with layout managers. Just use appropriate layout manager to stretch kid component(s) to occupy all available space of a parent component. You can use, for example, stack layout:

var p = new zebkit.ui.Panel();
p.setStackLayout(); // shortcut to setup stack layout manager
p.add(new zebkit.ui.Button("Test")); // button will occupy the whole panel space

[ArionTT]

Thank you. But the StackLayout can't do what I want else.
I want to calculate relative position in the UI component.
For example:
I put a Panel in to the zCanvas.root with any position. And I set a layout to the panel. Then, I add some UI to it, e.g. Button, Image, Textfield. I set designPan to move the UI I set before. The designPan use Absolute position to put the UI component. So I want to get the parent UI component, in this situation it is Panel, and its width and height.

But when I use BorderLayout or StackLayout, the Panel's width and height is 0.

var panel = new ui.Panel(
    new layout.StackLayout()//new layout.BorderLayout()
);
panel.add(Button);
panel.add(Image);
//....
var w=panel.width;
var h=panel.height;
//this w and h is ZERO