Default border is not applying for Combobox in extjs - extjs

Question

I am not able to get border for combobox.
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
items: [{
xtype: "combo",
itemId: "combo1",
width: 80,
labelWidth: 50,
fieldLabel: "Filename",
store: filenames,
queryMode: "local",
displayField: "text",
fieldStyle: {
borderRadius: "3px"
}
}]
border is not displaying for combobox.

Answer 1

You appear to be missing the border config property from your component. That could be one of the reasons of your problem, especially as your component seems to be embedded in a toolbar.
From Sencha's documentation:
Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style:
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
}
Note that setting borderRadius as you did does not imply that there will automatically be a border. It only states that "should there be a border, it will have that radius in its corners".
Most likely, all you need is to add the following to your combo configuration:
border: 1
Modifying Sencha's fiddle provided in the documentation to have a toolbar, the border is present whether you manually set the border property or not.
The following code - run within the sencha documentation itself - demostrates a combobox within a toolbar, with its border.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var cmb = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
});
Ext.create({
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
renderTo: Ext.getBody(),
items: [
cmb
]
});
Problems related to border and the like are often caused by the CSS of your team not being imported or the related js file not being loaded, in contexts where ExtJS has not been "prepared" built using sencha build but instead manually imported.
Alternatively, it's a CSS problem. In that case you'll have to use The Developer Tools of your browser of choice (F12 key, usually) and inspect the border-related properties for your component.