ComboBox with button on the right

[francescoNemesi]

Hello,

I have a simple form with a ComboBox defined as per the code below. All is well, apart from the fact that the button is added underneath the combobox justified in the middle of the form container div....

What I'd like to do is to have the button immediately to the right and on the same "line" of the combo box for the user to trigger a function when he's satisfied with the selection. Any ideas? (the examples and demos all have buttons below the input fields)

Thanks for your help,
Francesco

========================

var combo = new Ext.form.ComboBox({
fieldLabel: 'Cliente',
name: 'cliente',
store: store,
valueField: 'cclie',
displayField:'cliente',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Seleziona un cliente...',
selectOnFocus:true
});

var selectClientForm = new Ext.form.Form({
labelAlign: 'left'
});

selectClientForm.add(combo);
selectClientForm.addButton('ok');
selectClientForm.render('select-client-form-div');

[tryanDLS]

You could do like the dynamic form (form 2) example does and put each one in a column container. Or, if you didn't want to do that, you could look at adding some css to float the the containing divs.

[francescoNemesi]

Thanks for your reply.

I already tried to use the "columns", but I couldn't quite work it out...

How would you use the "floating" trick?

Thanks again, Kind Regards
Francesco

My code below... I get this error:

==============================

el has no properties
DomHelper("beforeend", null, "<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr><td class="x-btn-lef...")ext-all.js (line 9)
Template(null, [" "], true)ext-all.js (line 11)
Button("ok")ext-all.js (line 111)
Button("ok", function())ext-all.js (line 111)
init()main.js (line 94)
Observable()ext-all.js (line 15)
EventManager()ext-all.js (line 17)
[Break on this error] Ext.DomHelper=function(){var _1=null;var _2=/^(?:br|frame|hr|img|input|link|meta...

======================================

var button = new Ext.Button('ok',function(){
var cliForm = document.getElementById(selectClientForm.id);
createXmlTree('tree-div-intestatario',
'/azimut/BuildXmlTree?cl='+cliForm.cliente.value,
function(){
this.render();
this.getRootNode().expand();
});
});

var selectClientForm = new Ext.form.Form({
labelAlign: 'left'
});

selectClientForm.column(
{width:300},
combo
);

selectClientForm.column(
{width:300, clear:true},
button
);

selectClientForm.render('select-client-form-div');

[jay@moduscreate.com]

can you do all of us a favor and post your code inside of php tags?

[jsakalos]

I agree. I would consider posting code inside php or code tags as good manners on this forum.

[francescoNemesi]

Sorry about that... will do next time.

Thanks

[francescoNemesi]

Just to let you know, I managed to find a workaround for this problem by using a toolbar with the combo box and a button in it. It's not the perfect/ideal solution, but still it delivers...

It would be ideal to have a better handling of element positioning in a future version. It would make a fantastic framework even better!

I Hope the code below will be useful to others.

Francesco




var combo = new Ext.form.ComboBox({
fieldLabel: 'Cliente',
name: 'cliente',
store: store,
valueField: 'cclie',
displayField:'cliente',
typeAhead: true,
mode: 'local',
loadingText: 'Caricamento clienti...',
triggerAction: 'all',
emptyText:'Selezioni un cliente...',
maxHeight: 200,
selectOnFocus:true
});

function onButtonClick(btn){
Ext.MessageBox.show({
title: 'Click Handler',
msg:'Clicked!',
buttons: Ext.MessageBox.OK
});
}

var tb = new Ext.Toolbar('north-toolbar');
tb.addField(combo);

tb.add('&nbsp;&nbsp;&nbsp;',{
handler : onButtonClick,
icon: 'images/refresh.gif',
cls: 'x-btn-text-icon',
text: 'Seleziona nuovi clienti',
tooltip: "<b>Seleziona un nuovo gruppo di clienti</b><br/>Reinizializza l'area di lavoro per selezionare<br/> un nuovo gruppo di clienti."
},'-');

[dam1an]

Hi Francesco,

what is 'north-toolbar' in your html?

Is it a div and if so where is it placed? I can't quite seem to get your solution to work.

Thanks,

Damian

[cfulnecky]

Any possibility of replacing the comboBox trigger with a splitButton?

[cfulnecky]

Any possibility of replacing the comboBox trigger with a splitButton?

The (now deprecated?) TwinTriggerField example points to a better solution IMHO. See "Search box with 3 triggers (http://extjs.com/forum/showthread.php?p=47666)" for an example.