javascript - 如何渲染 Ext.Viewport 上方的内容

Question

我有视口(viewport):

new Ext.Viewport({
  layout:'fit',
  hideBorders:true,
  items:[panel1,panel2,panel3],
});

现在我想在视口(viewport)上方显示组合框:

var myCombo= new Ext.ComboBox({
  store:myStore,
  editable:false,
  renderTo:Ext.getBody(),
  triggerActions:'all',
  mode:'local',
  cls:'scales'
});

CSS:

.scales{
  position:absolute,
  botton:1em,
  right:1em,
  background-color:white
}

但它的渲染在左侧。如何将其渲染在右下角？

更新

现在我将组合放入 Panle 中:

myPanel= new Ext.Panle({
items[myCombo],
renderTo:Ext.getBody(),
cls:'scales',
border:false
});

现在我的组合位于右下角。但看起来像这样:

即使我从应用程序中删除视口(viewport)代码，我也会得到相同的结果。我可以用组合做点什么吗？

Answer 1

你的 CSS 坏了，应该是:

.scales{
    position: absolute; 
    bottom: 1em;
    right: 1em;
    background-color: white;
}

注意分号和 bottom 而不是 botton。

编辑:

您应该将组合渲染到窗口中，以便让 Ext 管理定位问题。下面是一个呈现极简窗口的示例:

var win = new Ext.Window({
    closable: false
    ,resizable: false
    // uncomment to make the window draggable
    //,title: '...'
    ,border: false
    // uncomment to make the window modal
    //,modal: true
    ,items: [{
        xtype: 'combo'
        ,store: ['Foo', 'Bar', 'Baz']
    }]
});

win.show();

// then use anchorTo to position the window where you want:
win.anchorTo(Ext.getBody(), 'br-br', [10, 10]);

请参阅文档 anchorTo .