如何在 Ext.Viewport 上方渲染一些东西

Posted 2023-02-26

【中文标题】如何在 Ext.Viewport 上方渲染一些东西

【英文标题】：How to render something above Ext.Viewport

【发布时间】：2013-06-12 09:44:20

【问题描述】：

我有视口：

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:

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

但它在左侧呈现。如何在右下角渲染？

更新

现在我将组合放入 Panle：

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

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

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

【问题讨论】：

你不能。视口将占据整个身体。如果要使组合框可见，请使用面板而不是视口

@javapirate：你能举个例子吗？

【参考方案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 的文档。

【讨论】：

在我的代码中没问题。我只是在写问题时出错。

嗯。我会尝试使用窗口。

【参考方案2】：

试试

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

或者将你的组合放在视口项中：

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

【讨论】：

尝试使用您的布局配置。现在你似乎在主面板中使用layout: fit。试试layout:auto 或layout:vbox