I have a window, a panel (fill whole space of window) inside this window and inside panel two fieldcontainers
horizontally on the left and on the right side.
----------------------------
| | |
| | |
| left FC | right FC |
| | |
| | |
| | |
----------------------------
Both could be hidden in runtime but, when I set FC_left.Visible(false)
right fieldcontainer
border isn't on the left side of the window but there's a large margin between left window border and left (this right fieldcontainer
) container border. Something like this:
----------------------------
| | |
| | |
| | right FC |
| | |
| | |
| | |
----------------------------
When left containner is invisible I want to see right container on the place of left. How to do it?
You need to be provide flex:1
or width:'50%'
to your fieldcontainer
.
Here in this FIDDLE , I have created a demo using panel
and fieldcontainer
. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
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()
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.