I am writing an EXT JS application that contains two combo boxes, each with its own fieldLabel
property. I want to place these combo boxes next to each other horizontally. However when I try to do this the fieldLabel
no longer appears.
This is the relevant code:
var stationsPanel = new Ext.Panel({
padding: 10,
id: windowId + "stationsPanel",
defaultType: "combo",
width : "100%",
layout: "hbox",
items: [{
fieldLabel: "Start Station",
id: "startstation",
allowBlank: false
},{
xtype: "spacer",
width: 50
},{
fieldLabel: "End Station",
id: "endstation",
allowBlank: false
}]
});
I have learned from reading this question that Panel
containers don't support displaying fieldLabel
properties. I therefore tried to render my components differently, using the EXT Dynamic Forms example (Form 3). This displayed the fieldLabel
values but the components but they were still rendered vertically. I also tried the suggestion on this post but neither of these solutions worked for me.
In light of the fiddle in the first comment following this question, which uses EXT JS 5.0.1, I'd like to clarify I'm using EXT JS 3.4.0.
you can try like this as I see at the example link you provide above
var stationsPanel = new Ext.Panel({
bodyStyle:'padding:5px 5px 0',
frame:true,
id: "stationsPanel",
layout:'column',
width : 700,
items: [{
layout:'form',
items:[{
xtype:'combo',
fieldLabel: "Start Station",
id: "startstation",
allowBlank: false
}]
},{
layout:'form',
style: {marginLeft:'50px'},
items:[{
xtype:'combo',
fieldLabel: "End Station",
id: "endstation",
allowBlank: false
}]
}]
});
I am not put the windowId
for the test
this is tested and as the rules, this working. you can see the result at https://fiddle.sencha.com/fiddle/efs/preview and the code you can see at https://fiddle.sencha.com/#fiddle/efs or http://jsfiddle.net/kapasaja/zn7e04so/
hope this can help you