Разделитель додзё не меняет размер должным образом с динамическим контентом

Я создаю, казалось бы, простую веб-страницу dojo 1.8, которая содержит div макета приложения, содержащий контейнер вкладок и панель сигналов тревоги под контейнером вкладок. Они разделены разделителем, поэтому пользователь может выбрать, сколько сигналов тревоги или контейнера вкладок он хочет видеть.

Вот пример на jsfiddle:

http://jsfiddle.net/bfW7u/

Для демонстрации есть таймер, увеличивающий размер таблицы на панели сигнализации на запись каждые 2 секунды.

Проблемы):

  1. Если ничего не делать и просто позволить таблице расти, полоса прокрутки на панели тревог не появится.

  2. Если переместить разделитель, не изменив предварительно размер окна браузера, дескриптор разделителя окажется в странном месте.

  3. Изменение размера окна браузера приводит к тому, что он ведет себя так, как я ожидал с самого начала.

Вопросы:

  1. Я что-то делаю не так, как настраиваю, и это вызывает эту проблему?

  2. Как я могу поймать, что сплиттер был перемещен, событие (имя?)

  3. Как изменить размер панели разделителя на произвольную высоту? Я пробовал использовать domStyle.set ("alarmPanel", "height", 300), и это действительно устанавливает свойство высоты ... но панель не меняет размер!

Любая помощь очень ценится!


dojo splitter
person Balthasar    schedule 18.09.2012    source источник
comment
Частичное решение: инициируя событие изменения размера в охватывающем элементе div (называемом appLayout), он будет работать в соответствии с запросом. Ознакомьтесь с решением: ссылка. Но как ограничить разделитель определенной высотой, когда все последующие вызовы возвращают пустую строку? var ap = registry.byId("appLayout"); console.log(ap.domNode.style.height); console.log(registry.byId("appLayout").get("style")); даже совершенно тривиальный вызов dom возвращает пустую строку: console.log(dom.byId("appLayout").style.height); Есть идеи?   -  person Balthasar    schedule 18.09.2012

Ответы (1)


arrow_upward
4
arrow_downward

Я раздвоил ваш jsFiddle и внес в него некоторые изменения: http://jsfiddle.net/phusick/f7qL6/

  1. Избавьтесь от overflow: hidden в html, body и явно установите высоту alarmPanel:

    .claro .demoLayout .edgePanel {
    height: 150px;
}

  2. Этот хитрый. У вас есть два варианта: прослушать перетаскивание разделителя или прослушать вызов метода ContentPane.resize. Оба через dojo/aspect:

    // Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;

aspect.after(splitter, "_startDrag", function() {
    moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
        var coords = {
            x: !splitter.horizontal ? splitter.domNode.style.left : 0,
            y: splitter.horizontal ? splitter.domNode.style.top : 0
        }
        dom.byId("dndOutput").textContent = JSON.stringify(coords);
    })
});  

aspect.after(splitter, "_stopDrag", function() {
    moveHandle && moveHandle.remove();
});


// ContentPane.resize()   
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
    dom.byId("resizeOutput").textContent = JSON.stringify(size);
});

  3. После изменения размера вызовите метод layout():

    registry.byId("alarmPanel").domNode.style.height = "200px";                
registry.byId("appLayout").layout();
person phusick    schedule 18.09.2012
comment
Фантастические комментарии. Лаконично, точно, и они работают. Большое спасибо Вам! - person Balthasar; 18.09.2012