How to have a 50% width for a combobox ?

[lpastor]

Hello,

My combobox in in a form and I want to reduce his width to 50% or 200 pixel.

Actualy it is display to the full width and I can't reduce it.

I try with : anchor:'50%' and width:200

The other field reduce well.


initComponent : function() {
// build the form-fields. Always a good idea to defer form-building to a method so that this class can
// be over-ridden to provide different form-fields
this.items = this.buildForm();
// build form-buttons
this.buttons = this.buildUI();
// super
formlp.superclass.initComponent.call(this);
},
buildForm : function() { // ################## Champs du form #############################
return [
{fieldLabel: 'nom', name: 'nom_application', anchor:'50%', allowBlank: false},
new Ext.form.ComboBox({
fieldLabel: 'Statut',
hiddenName:'id_statut_application',
store: store_statut,
valueField:'id_statut',
displayField:'nom_statut',
typeAhead: false,
triggerAction: 'all',
emptyText:'Vide...',
selectOnFocus:true,
anchor:'50%'
//width:200
}),
{xtype:'htmleditor', id:'bio', name: 'info_application', fieldLabel:'Info',
height:200,
anchor:'100%'
}
];
},

[Animal]

WHat's the layout of that Container class you showed a tiny vignette of?

[lpastor]

Animal, I use a formPanel :



var formlp = Ext.extend(Ext.form.FormPanel, {
iconCls: 'silk-user',
labelAlign: 'right',
labelWidth: 50,
//title: 'User -- All fields are required',
frame: true,
width: 600,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
initComponent : function() {
// build the form-fields. Always a good idea to defer form-building to a method so that this class can
// be over-ridden to provide different form-fields
this.items = this.buildForm();
// build form-buttons
this.buttons = this.buildUI();
// super
formlp.superclass.initComponent.call(this);
},
buildForm : function() {
return [
{fieldLabel: 'nom', name: 'nom_application', anchor:'50%', allowBlank: false},
new Ext.form.ComboBox({
fieldLabel: 'Statut',
hiddenName:'id_statut_application',
store: store_statut,
valueField:'id_statut',
displayField:'nom_statut',
typeAhead: false,
triggerAction: 'all',
emptyText:'Vide...',
selectOnFocus:true,
anchor:'50%'
//width:'50%'
}),
{xtype:'htmleditor', id:'bio', name: 'info_application', fieldLabel:'Info',
height:200,
anchor:'100%'
}
];
},

That's call by :



var userForm = new formlp({
region: 'center',
collapsible: false,
animCollapse: false,
listeners: {
create : function(fpanel, data) { // <-- custom "create" event defined in App.user.Form class
var rec = new userGrid.store.recordType(data);
userGrid.store.insert(0, rec);
}
}
});

var win = new Ext.Window({
title: 'Layout Window',
shadow:true, // Ombre autour
//modal: true, // Masque arrière
collapsible:true,
closable:true,
width:1000,
height:400,
//autoWidth: true,
//border:true,
layout: 'border',
items: [userGrid, userForm]
});

[Animal]

Your defaults config is making all widths of fully instantiated Fields 100%

That's a weird thing about defaults. They are applied unconditionally to Fields, and conditionally (applyIf) to config objects.

[lpastor]

Thank's a lot Animal, I have deleted :


/*defaults: {
anchor: '100%'
},*/

And it's good.

Have a good day,

Laurent