layout - DOJO ContentPane cambio de altura DIV interior en ContentPane cambiar el tamaño

dijit.layout

Question

Estoy usando el módulo ContentPane de DOJO. Tengo un elemento div en uno de los paneles y necesito darle una cierta altura, 100 píxeles menos que la altura del ContentPane modo que el div cambie su altura dinámicamente cuando se cambia el tamaño del ContentPane de contenido arrastrando los divisores. Soy nuevo en Dojo y estaría feliz si alguien pudiera ayudarme con esto.

Gracias.

Answer 1

Creo que la mejor solución es a través de BorderContainers anidados con splitters bien establecidos, porque de esa manera dijit/layout se encargará de redimensionar y no necesitarás escribir ningún código JavaScript y tu diseño se basará únicamente en CSS.

Es un poco engorroso explicarlo, así que creé un ejemplo de trabajo para ti en jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + un diagrama:

NB: No te olvides de configurar la height: 100% para html , body y el BorderContainer superior.

El inconveniente de esta solución es que tendrá que reemplazar divs simples con ContentPanes . Si no quiere o no puede, puede usar dojo/aspect y conectarse al método de cambio de resize BorderContainer o ContentPane y cambiar el tamaño de sus divs manualmente cada vez que cambie el tamaño:

require([
    "dojo/ready",
    "dojo/aspect",
    "dijit/registry",
    "dijit/layout/ContentPane",
    "dijit/layout/BorderContainer"
], function(
    ready,
    aspect,
    registry
) {

    ready(function() {
        var bc = registry.byId("borderContainer1");
        aspect.after(bc, "resize", function() {
            // calculate and set <div> size here
            console.log("resize divs");
        });
    });  
});​