Rerender Part of Widget"
m (correct highlight (via JWB)) |
|||
Line 3: | Line 3: | ||
If a widget has a lot of child widgets, the performance will be better if you rerender only the portion(s) that don't have a lot of child widgets (and are not changed). | If a widget has a lot of child widgets, the performance will be better if you rerender only the portion(s) that don't have a lot of child widgets (and are not changed). | ||
− | For example, <javadoc directory="jsdoc">zul.wgt.Groupbox</javadoc> rerenders only itself and the caption child, if any, when < | + | For example, <javadoc directory="jsdoc">zul.wgt.Groupbox</javadoc> rerenders only itself and the caption child, if any, when <code>setClosable</code> is called, as follows. |
<source lang="javascript"> | <source lang="javascript"> |
Latest revision as of 03:18, 18 January 2022
If a widget has a lot of child widgets, the performance will be better if you rerender only the portion(s) that don't have a lot of child widgets (and are not changed).
For example, Groupbox rerenders only itself and the caption child, if any, when setClosable
is called, as follows.
setClosable: function (closable) {
if (this._closable != closable) {
this._closable = closable;
if (this.desktop)
this.rerender(zk.Skipper.nonCaptionSkipper);
}
}
It invokes Widget.rerender(Skipper) with a skipper (an instance of Skipper). The skipper decides what to skip (i.e., not to rerender), detach the skipped portion(s), and attach them back after rerendering. Thus, the skipped part won't be rerendered, nor unbound/bound, so the performance is better.
In the above example, we use the Skipper.nonCaptionSkipper instance to do the job. It skips all child widgets except the one called caption (i.e., child != this.caption
).
In addition to passing a skipper to Widget.rerender(Skipper), the widget has to implement the mold method (redraw) to handle the skipper:
function (out, skipper) {
out.push('<fieldset', this.domAttrs_(), '>');
var cap = this.caption;
if (cap) cap.redraw(out);
out.push('<div id="', this.uuid, '$cave"', this._contentAttrs(), '>');
if (!skipper)
for (var w = this.firstChild; w; w = w.nextSibling)
if (w != cap) w.redraw(out);
out.push('</div></fieldset>');
}
As shown above, the mold method is also called with the skipper, and the implementation should not redraw the skipped part. In this case, all child widgets except caption are not redrawn.
You can implement your own skipper. Refer to Skipper for details.
Version History
Version | Date | Content |
---|---|---|