Dojo Tollkit - Dialog中ScrollableView的高度

时间:2012-06-26 13:00:20

标签: dojo

我使用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");

1 个答案:

答案 0 :(得分:0)

以这种方式修正:

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");
});