SmartGWT：为SectionHeader动态换背景颜色（图片）

在一般情况下我们会修改load_skin.js和skin_styles.css文件来给SmartGWT里的部件做外观上的修改。但如你想根据情况变化动态更换SmartGWT部件外观的话，那就需要应用JavaScript编程了。

 

这里举例SectionHeader。这里我想当一个SectionStackSection里的数值被修改后，改变它的SectionHeader的背景颜色（图画）。主要步骤：
1. 读取SectionStackSection的ID（JavaScript里Variable的名称）
2. 在浏览器里（Debug Console或Firebug）查询DOM树下的这个函数名称
3. 找到你需要修改的数值的名称
4. 通过JavaScript函数修改此名称的数值

public void changeSkin(SectionStackSection section, boolean dirty) {
    SectionHeader header = section.getSectionHeader();
    if (header != null && header.isDrawn()) {
        final headerBgId = header.getID() + "_background";
        changeSkin(headerBgId, dirty);
    }
}

private static native void changeSkin(String bgId, boolean dirty) /*-{
    if (dirty) {
        // 如Section里有数据被改动，改变背景图画
        $wnd[bgID].src = "./myskin/SectionHeader/header.png";
    } else {
       // 还原原来的背景图片
       $wnd[bgID].src = "[SKIN]SectionHeader/header.png";
    }
}-*/;

这里还要说明一下：在例子中header.png是基本文件名。SmartGWT会在使用时对其进行扩展。具体的背景图形文件名称为：header_closed_end.png， header_closed_start.png， header_closed_stretch.png， header_opened_end.png， header_opened_start.png 和 header_opened_stretch.png。[SKIN]是指向现skin里的images文件夹。