{{
    #--------------------------------------------------------------------------
    #
    # The python controller return cfg_doc, and cfg_src the configuration for
    # the Ext.data.Store
    #
    #--------------------------------------------------------------------------

    #
    # unique identifier for the DIV block associated to the grid
    #
    grid_doc = "grid-%s" % id(cfg_doc)
    grid_src = "grid-%s" % id(cfg_src)

    #
    # The DIV blocks
    #
    response.write(H2(T("Documentations"), _class="dbui-h2 dbui-small-cap"))
    response.write(DIV(_id=grid_doc))

    response.write(H2(T("Open source"), _class="dbui-h2 dbui-small-cap"))
    response.write(DIV(_id=grid_src))

    response.write(H2(T("Binary files"), _class="dbui-h2 dbui-small-cap"))

    #
    # Export python variables to the javascript
    #
    jsvars = ["cfgDoc = %s" % cfg_doc,
              "cfgSrc = %s" % cfg_src,
              "gridDoc = '%s'" % grid_doc,
              "gridSrc = '%s'" % grid_src]

    jsvars = "    var %s;" % ',\n'.join(jsvars)
    response.write(SCRIPT(jsvars), escape=False)

}}
<div style="width: 570px;">
    <p class="dbui-p" style="margin-left: 7%; margin-right: 7%;">
    Les logiciels tierce
    <span class="dbui-small-cap">ACE</span>,
    <span class="dbui-small-cap">Ext JS</span>,
    <span class="dbui-small-cap">MathJax</span>,
    <span class="dbui-small-cap">Plugin dbui</span>,
    sont construits sous la forme de plugins qui peuvent être chargés dans
    le serveur webpy.

    Des versions cohérentes sont disponible en utilisant
    le gestionnaire de version <a href="http://git-scm.com/" target="_blank">git</a> :
    <em>git clone http://www.cppm.in2p3.fr/~legac/wap/git/plugin_dbui_build.git</em>.
    </p>
</div>
<script>

    //
    // instantiate the grid for the documentation
    //
    var grid = Ext.create('Ext.grid.Panel', {
        store: cfgDoc,
        columns: [
            {text: "code", dataIndex: 'code', width:80},
            {text: "developer", dataIndex: 'developer', flex: 1.8},
            {text: "python", dataIndex: 'python', flex: 1},
            {text: "javascript", dataIndex: 'javascript', flex: 1}
        ],
        forceFit: true,
        hideHeaders: true,
        padding: "0 40 0 40",
        width: 570,
        renderTo: gridDoc
    });

    //
    // instantiate the grid for source code
    //
    var grid = Ext.create('Ext.grid.Panel', {
        store: cfgSrc,
        columns: [
            {text: "code", dataIndex: 'code', width: 80},
            {text: "source", dataIndex: 'source', flex: 2}
        ],
        forceFit: true,
        hideHeaders: true,
        padding: "0 40 0 40",
        width: 570,
        renderTo: gridSrc
    });

</script>