如何使上述Ext.Viewport

Question

事我必須視：

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 
} 

但它的渲染在左邊。如何渲染它的右邊底部？

UPDATE

現在我把組合成Panle：

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

現在我的組合在右下角。但看起來像這樣：

即使我從應用程序中刪除視口代碼，我得到的結果相同。我可以用組合做些什麼嗎？

Answer 1

你CSS壞了，應該是：

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

注意分號和bottom，而不是botton。

編輯：

你應該使你的組合成一個窗口，讓內線管理的定位問題。下面是呈現一個簡約的窗口爲例：

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。

Answer 2

嘗試

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

或者把你的連擊視裏面的物品爲：

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