3

如何使 titlePane 的高度动态化，以便在页面加载后将内容添加到窗格中时，TitlePane 会展开？

4

4 回答 4

3

看起来富内容编辑器是一个异步加载的 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 的大小将随着内容的变大或变小而自然增长。

于 2011-09-19T12:55:23.587 回答
2

布局小部件有一个.resize()方法，您可以调用该方法来触发重新计算。大多数时候您不需要自己调用它（如评论中的示例所示），但在某些情况下您别无选择。

于 2011-09-17T22:51:26.767 回答
1

我已经做了一个示例，如何在窗格打开后加载数据并构建窗格的内容。

困扰我的是创建网格后，我必须先将其放入 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();
});​
于 2012-04-20T09:58:03.630 回答
1

我的解决方案是innerWidget.startup()进入之后的建议"toggle"。 

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

有关更多信息，请参阅dojo/aspect 参考文档。

于 2015-08-07T03:17:08.587 回答