DOJO ContentPane внутренняя высота DIV изменяется при изменении размера ContentPane

Я использую модуль ContentPane DOJO. У меня есть элемент div в одной из панелей, и мне нужно придать ему определенную высоту - на 100 пикселей меньше, чем высота ContentPane, чтобы div динамически изменяла свою высоту, когда вы изменяете размер ContentPane, перетаскивая разделители. Я новичок в Додзё и был бы рад, если бы кто-нибудь помог мне с этим.

Спасибо.


layout dojo dijit.layout contentpane
person cycero    schedule 31.05.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я думаю, что лучшее решение — вложенный BorderContainers с правильно установленным splitters, потому что таким образом dijit/layout позаботится об изменении размера, и вам не нужно будет писать какой-либо код JavaScript, а ваш макет будет основан исключительно на CSS.

Объяснять это довольно сложно, поэтому я создал для вас рабочий пример на jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + диаграмма:

введите здесь описание изображения

NB: Не забудьте установить height: 100% для html, body и верхнего BorderContainer.

Недостатком этого решения является то, что вам придется заменить обычный divs на ContentPanes. Если вы не хотите или не можете, вы можете использовать dojo/aspect и подключиться к методу BorderContainer или ContentPane resize и изменить размер divs вручную при каждом изменении размера:

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");
        });
    });  
});​
person phusick    schedule 31.05.2012