{{
    #--------------------------------------------------------------------------
    #
    # The python controller return cfg_doc, and cfg_src the configuration for
    # the Ext.data.Array
    #
    #    - build unique DIV identifier
    #
    #--------------------------------------------------------------------------

    #
    # unique identifier for the DIV block associated to the grid
    #
    divdoc = id(cfg_doc)
    divsrc = id(cfg_src)

}}
<h2 class="dbui-h2 dbui-small-cap">Documentations</h2>
<div id="grid-{{=divdoc}}"></div>

<h2 class="dbui-h2 dbui-small-cap">Code source</h2>
<div id="grid-{{=divsrc}}"></div>


<h2 class="dbui-h2 dbui-small-cap">Binnaires pour web2py</h2>

<div style="width: 570px; padding: 0 20 0 20;">
    <p class="dbui-p">
    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://marwww.in2p3.fr/~legac/wap/git/plugin_dbui_build.git</em>.
    </p>
</div>
<script>

    /**
     * Inline javascript to instantiate and render the Ext JS grids
     *
     */

    //
    // bind the python and javascript variables
    // use the internationalization of web2py to translate grid header
    // MANDATORY: escape false to convert properly the quotes
    //
    {{
        def write(value):
            return response.write("\n%s" % value, escape=False)

        write("var cfgDoc = %s," % cfg_doc)
        write("    cfgSrc = %s;" % cfg_src)

    }}

    //
    // instantiate the grids for the documentation
    //
    var grid = Ext.create('Ext.grid.Panel', {
        store: Ext.create('Ext.data.ArrayStore', 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: 'grid-{{=divdoc}}'
    });

    //
    // instantiate the grids for source code
    //
    var grid = Ext.create('Ext.grid.Panel', {
        store: Ext.create('Ext.data.ArrayStore', 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: 'grid-{{=divsrc}}'
    });

</script>