[英]Alignment Issue With Ext JS 4 and fieldcontainer position
我有一個窗口,在該窗口內有一個面板(在整個窗口中占滿整個空間),在面板的內側有兩個水平方向的fieldcontainers
,分別在左側和右側。
----------------------------
| | |
| | |
| left FC | right FC |
| | |
| | |
| | |
----------------------------
兩者都可以在運行時中隱藏,但是當我設置FC_left.Visible(false)
右邊的fieldcontainer
邊框不在窗口的左側,但是在左邊的窗口邊框和左邊的(該右邊的fieldcontainer
)容器邊框之間有很大的余量。 像這樣:
----------------------------
| | |
| | |
| | right FC |
| | |
| | |
| | |
----------------------------
當左側容器不可見時,我想在左側位置看到右側容器。 怎么做?
您需要向fieldcontainer
提供flex:1
或width:'50%'
。
在此FIDDLE中 ,我使用panel
和fieldcontainer
創建了一個演示。 我希望這會幫助/指導您達到要求。
代碼片段
Ext.application({
name: 'Fiddle',
launch: function () {
/*
* this function will fire when hide/show button clicked
* @param {Ext.button.Button}
*/
function onHideShow(btn) {
var fCnt = btn.up('panel').down(`#${btn.label}`);
if (fCnt.isHidden()) {
fCnt.setVisible(true);
btn.setText(`Hide ${btn.label}`);
} else {
fCnt.setVisible(false);
btn.setText(`Show ${btn.label}`);
}
}
//Create panel with field container
Ext.create('Ext.panel.Panel', {
title: 'Basic example',
//height:400,
layout: 'hbox',
bodyPadding: 10,
defaults: {
xtype: 'fieldcontainer',
flex: 1,
//width:'50%',
style: 'border: 2px solid #ccc;',
labelAlign: 'top',
// The body area will contain three text fields, arranged
// horizontally, separated by draggable splitters.
layout: 'vbox',
defaults: {
width: '100%',
margin: '5 10'
},
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'textfield',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'textfield',
flex: 1
}]
},
items: [{
itemId: 'Left',
fieldLabel: 'Left field container',
margin: '0 5'
}, {
itemId: 'Right',
fieldLabel: 'Right field container'
}],
tbar: ['->', {
text: 'Hide Left',
label: 'Left',
handler: onHideShow
}, {
text: 'Hide Right',
label: 'Right',
handler: onHideShow
}],
renderTo: Ext.getBody()
});
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.