SmartGWT 之 redraw 的烦恼

用SmartGWT的 TileGrid 来展示一系列的图片，确实很方便。

 

 

DetailViewerField picField = new DetailViewerField( "url");

picField.setType( "image");

picField.setImageHeight( tileHeight);

tileGrid.setFields( picField);

只要这样就可以显示了。

接下来的一个需求害惨我了：在每张图片上加一个空白的star，用户点击这个star，就会变成

实心的star，就像gmail里面的邮件star一样，说白了就是个favorite。

看TileGrid的代码，知道它提供了几个重载点，一个是 getTileHTML，可以自己定义tile的html。

这个当需要自己设定图片的一些tooltip来作为图片信息的时候，可以返回一个带 title的img，确实

有用。不过，对于我要增加一个带响应事件的ImgButton来说，还不够。

另一个是 getTile( int )方法。本来我是想重载 getTile(Record)方法，后来发现这个方法重载了

没用。于是在 getTile( int)里面，往super.getTile( int)的返回Canvas里面添加一个 ImgButton。

确实挺简单的，接下来的事情就很郁闷了。

图片都显示出来了，点击 star也都没问题，相应的事件也都没问题。正当要松口气的时候，发现TileGrid

换页出问题了。换了页之后，star都发生变化了，但是相应的图片没变化。顿时很震惊，不可思议。

使用N种工具，包括SmartClient自身的console，都没看出所以然来。期间走了很多弯路，最后冷静下来，

想想其实差别只是 canvas.add(btn)这行代码。将它注释掉，就正常，否则就不正常。

SmartGWT 的 console，把redraw部分的日志改成debug，发现区别不大，只是一个是：

15:01:13.986:MMV8:INFO:redraws:isc_MyRootPanel$3_0_tile_6:Scheduling redraw (1 children) (state change)

另一个是：

15:03:37.371:MMV9:INFO:redraws:isc_MyRootPanel$3_0_tile_7:Scheduling redraw (state change)

就是这个 children的区别而已。也就是说，当这个canvas 在redraw的时候，如果发现它有child，那么就直接让

child 去redraw，而canvas本身不变。就是因为这个原因，所以加上child之后，换页的时候图片不发生变化。

于是在addChild之后手工加了一个redraw，发现还是不行。马上就发现自己犯了个低级错误。既然加了child之后

在页面redraw不行，那么在代码中肯定也不行。唯一有效的，就是在addChild之前redraw一下。果然就OK了。

tile.redraw();

tile.addChild( btn);

就这么解决了。

update: 

总感觉这种用法太诡异，忍不住跟踪了一下js代码，美化之后的redraw代码是这样的：

, isc.A.$ra = function isc_Canvas__updateHTML() {
    var _1 = this.logIsDebugEnabled(this.$n3),
        _2 = this.logIsInfoEnabled(this.$n3),
        _3;
    if (_1) _3 = isc.timeStamp();
    if (_2) this.logInfo("$ra(): redrawing", "drawing");
    if (this.peers != null && this.peers.getLength() > 0) this.redrawPredrawnPeers();
    var _4 = this.children && this.children.length > 0,
        _5 = this.allowContentAndChildren && _4;
    if (_4 && !_5 && this.shouldRedrawOnResize()) {
        _5 = true
    }
    if ((!_4 || _5) && (this.getVisibleWidth() > this.getWidth() || this.getVisibleHeight() > this.getHeight())) {
        this.$q5(null, null, this.width, this.$o8)
    }
    if (_4) {
        if (_5) this.$p9();
        this.redrawChildren()
    } else {
        this.$rd()
    }
    if (this.$qe && !_4) {
        delete this.$re;
        this.enforceScrollSize(this.$qe[0], this.$qe[1])
    }
    this.modifyContent();
    if (isc.screenReader) this.addContentRoles();
    this.setUpEvents();
    this.$q7 = false;
    this.adjustOverflow(this.$n0, null, true);
    this.redrawPeers();
    if (_1) {
        this.logDebug("Redraw() - Total time to redraw in DOM:" + (isc.timeStamp() - _3), "drawing")
    }
    return this
}

 虽然加入了混淆，但是仍然能看出来，关键在于 _4 和 _5，它们都为 true的情况下，才会

在redrawChildren之前运行 $p9，也就是

isc.A.$p9=function isc_Canvas__updateParentHTML()

所以，

Canvas tile = super.getTile(recordNum);

tile.setRedrawOnResize( true);

// add btn to tile

return tile;

然后就可以了，不用redraw了。这样感觉舒服一些。

不过呢，感觉SmartGWT在深入应用方面，还是会存在问题。