Question

我使用http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js

中的Dojo Toolkit 1.7.2

我需要在对话框中显示可滚动（带帮助触摸）内容。另外，如果可能的话，我还需要在对话框内的视图之间进行转换，就像在移动设备上一样。

我的所作所为（代码的简化版）：

var dialog = new Dialog();
var view = new ScrollableView({
    selected: true
});

//add some content inside view. Content heigh is greater than height of dialog.

如果我这样做，对话框会尝试适合内容的整个高度。

下一次尝试：

var dialog = new Dialog({
    style: {
        width: 600,
        height: 400
    }
});

或

dialog.resize({w: 600, h: 400});

现在，对话框具有固定高度，但内部ScrollableView实例不会滚动到其内容的底部。

当我深入研究源代码时，我发现ScrollableView继承自dojox / mobile / _ScrollableMixin，它继承自dojox / mobile / scrollable。

dojox / mobile / scrollable的resize()函数使用窗口高度来计算滚动功能。

如果没有实现我自己的ScrollableView版本，有没有办法获得我需要的东西？

解决方案：

var dialogRect = domGeometry.getMarginBox(dialog.domNode);
var headerRect = domGeometry.getMarginBox(dialog.titleBar);
var containerNodePaddingTop = domStyle.get(dialog.containerNode, "paddingTop");
var containerNodePaddingBottom = domStyle.get(dialog.containerNode, "paddingBottom");

var viewHeight = dialogRect.h - headerRect.h - containerNodePaddingTop - containerNodePaddingBottom;
var view = new ScrollableView({
    selected: true,
    height: viewHeight.toString() + "px"
});
// or
// view.set("height", viewHeight.toString() + "px");

Answer 1

以这种方式修正：

var Name = 'yourdialogid';
dojo.query("#"+Name+" .dijitDialogPaneContent").forEach(function(node, index, arr){
   dojo.style(node,"overflow","auto");
   dojo.style(node,"height",(dojo.position(dijit.byId(Name).domNode).h-80)+"px");
});

Dojo Tollkit - Dialog中ScrollableView的高度

1 个答案: