Javascript 如何在Ext.视口上方渲染某些内容

我有一个视口：

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

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

现在我想在视口上方显示组合框：

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

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

css:

但它的渲染在左侧。如何在正确的botton中渲染它

更新

现在我将combo放入窗格：

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

现在我的组合在右下角。但看起来是这样的：

---

即使我从应用程序中删除了视口代码，我也会得到相同的结果。我能用combo做点什么吗？

你的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]);

有关详细信息，请参阅文档。

试试看

new Ext.panel.Panel({
      layout:'fit',
      items:[panel1,panel2,panel3],
});

或者将您的组合放置在视口项目中，如下所示：

new Ext.panel.Panel({
  layout:'fit',
  items:[panel1,panel2,panel3, combo],
});

---

你不能。视口将获取整个身体。如果你想让组合框可见@javapirate，可以选择一个面板而不是视口：你能举个例子吗？在我的代码中。我只是在提问题的时候犯错误。我将尝试使用Windows。尝试使用布局配置。现在您似乎在主面板中使用了

layout:fit

。尝试使用

layout:auto

或

layout:vbox