Панель заголовков Dojo / Dijit

Как сделать высоту titlePane динамической, чтобы при добавлении содержимого в панель после загрузки страницы TitlePane расширялся?


person Robert Johnstone    schedule 16.09.2011    source источник
comment
Хм, я думал, что это поведение по умолчанию. Сценарий: jsfiddle.net/RxybY   -  person Frode    schedule 16.09.2011
comment
нет. У меня есть ContentPane, которую я заполняю, когда страница загружается, и выталкивает контент под собой из поля зрения   -  person Robert Johnstone    schedule 16.09.2011
comment
Только что попробовал fiddle. Должно быть что-то я делаю!?!   -  person Robert Johnstone    schedule 16.09.2011
comment
Хм, странно. Можете ли вы воспроизвести проблему в jsfiddle или иным образом поделиться кодом?   -  person Frode    schedule 16.09.2011
comment
Притти тяжело, так как все мои вещи объявлены. Jsfiddle не нравится <div dojoType="dijit.TitlePane" .... Я делаю все это declaritave, потому что страница динамически загружается, а программная обработка, похоже, не работает :(   -  person Robert Johnstone    schedule 16.09.2011
comment
в jsfiddle слева введите атрибуты тега библиотеки добавить djConfig="parseOnLoad:true"   -  person BuffaloBuffalo    schedule 16.09.2011
comment
Да, jsfiddle - ваш друг :-) jsfiddle.net/B6fWX   -  person Frode    schedule 16.09.2011
comment
См. Следующее: client-ms.com/test   -  person Robert Johnstone    schedule 19.09.2011


Ответы (4)


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

Как упоминалось в @missingno, вы хотите посмотреть на функцию изменения размера.

Если вы выполните следующую функцию на своей странице, вы увидите, что она правильно изменяет размер всего:

//iterate through all widgets
dijit.registry.forEach(function(widget){
    //if widget has a resize function, call it
    if(widget.resize){
        widget.resize()
    }
});

Вышеупомянутая функция выполняет итерацию по всем виджетам и изменяет их размер. Это, наверное, излишне. Я думаю, вам нужно будет вызывать его только для каждого из ваших виджетов, связанных с макетом, после инициализации dijit.Editor.

Самый простой способ сделать это на реальной странице - это, вероятно, добавить его в вашу функцию addOnLoad. Например:

    dojo.addOnLoad(function() {
        dijit.byId("ContentLetterTemplate").set("href","index2.html");
        //perform resize on widgets after they are created and parsed.
        dijit.registry.forEach(function(widget){
              //if widget has a resize function, call it
              if(widget.resize){
                  widget.resize()
              }
        });
    });

РЕДАКТИРОВАТЬ: Еще одно возможное решение проблемы - установить для свойства doLayout на панелях содержимого значение false. По умолчанию для всех ContentPane (включая подклассы, такие как TitlePane и dojox.layout.ContentPane) для этого свойства установлено значение true. Это означает, что размер ContentPane предопределен и статичен. Если установить для свойства doLayout значение false, размер ContentPanes будет органически расти по мере того, как контент становится больше или меньше.

person BuffaloBuffalo    schedule 19.09.2011
comment
вы правы! Я вырезал и вставлял его, и он работает на странице. Затем я попробовал его на своем локальном компьютере, но этого не произошло :( Итак, я скопировал копию с моего локального компьютера на страницу, а это не так (проверьте кнопку изменения размера) - person Robert Johnstone; 19.09.2011
comment
Вы пробовали добавить функцию изменения размера в метод addOnLoad? (см. править) - person BuffaloBuffalo; 19.09.2011
comment
Я могу использовать только функцию addOnLoad на главной странице, потому что она не работает на страницах внутри панелей. Я пробовал несколько вещей на странице, и в настоящее время она рушится (из-за большой рекурсии). Мне нужно только действительно изменить размеры LetterTemplateTitlePane и ContentLetterTemplate. Когда страница загружается, выберите Invoice Letter из первого раскрывающегося списка, только после выполнения этого действия необходимо изменить размер TitlePane. - person Robert Johnstone; 19.09.2011
comment
в этом случае вы можете использовать dojo.connect для подключения к событию onChange раскрывающегося списка Invoice Letter для вызова изменения размера после отображения letterVariablesContainer ContentPane - person BuffaloBuffalo; 19.09.2011
comment
Не могу этого сделать, потому что onChange заменяет страницу, на которой находится событие onChange (если вы понимаете, что я имею в виду) - person Robert Johnstone; 19.09.2011
comment
Я думаю, это потому, что ContentPane, в котором находится TitlePane, не меняет размер - person Robert Johnstone; 19.09.2011
comment
как насчет того, чтобы вы сказали мне поместить doLayout="false" в TitlePane, и я дам вам 50 баллов - person Robert Johnstone; 19.09.2011

У виджетов макета есть метод .resize(), который можно вызвать для запуска пересчета. В большинстве случаев вам не нужно называть его самостоятельно (как показано в примерах в комментариях), но в некоторых ситуациях у вас нет выбора.

person hugomg    schedule 17.09.2011

Я привел пример того, как загружать данные после открытия панели и создавать содержимое панели.

Что меня беспокоит, так это то, что после создания сетки я должен сначала поместить ее в DOM, а затем в панель заголовка, иначе панель заголовка не получит нужной высоты. Должен быть более чистый способ сделать это.

Проверьте это: http://jsfiddle.net/keemor/T46tt/2/

dojo.require("dijit.TitlePane");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function() {
    var pane = new dijit.TitlePane({
        title: 'Dynamic title pane',
        open: false,
        toggle: function() {
            var self = this;
            self.inherited('toggle', arguments);
            self._setContent(self.onDownloadStart(), true);
            if (!self.open) {
                return;
            }
            var xhr = dojo.xhrGet({
                url: '/echo/json/',
                load: function(r) {
                    var someData = [{
                        id: 1,
                        name: "One"},
                    {
                        id: 2,
                        name: "Two"}];

                    var store = dojo.data.ObjectStore({
                        objectStore: new dojo.store.Memory({
                            data: someData
                        })
                    });
                    var grid = new dojox.grid.DataGrid({
                        store: store,
                        structure: [{
                            name: "Name",
                            field: "name",
                            width: "200px"}],
                        autoHeight: true
                    });
                    //After inserting grid anywhere on page it gets height
                    //Without this line title pane doesn't resize after inserting grid                                                            
                    dojo.place(grid.domNode, dojo.body());
                    grid.startup();
                    self.set('content', grid.domNode);
                }
            });
        }
    });
    dojo.place(pane.domNode, dojo.body());
    pane.toggle();
});​
person keemor    schedule 20.04.2012

Мое решение - переместить innerWidget.startup() в совет после "toggle".

titlePane.aspect = aspect.after(titlePane, 'toggle', function () {
    if (titlePane.open) {
        titlePane.grid.startup();
        titlePane.aspect.remove();
    }
});

Дополнительную информацию см. В справочной документации по dojo / аспектам.

person Israfel    schedule 07.08.2015