help placing combo boxes beside each other

[talshadar]

I need to find a way to have 2 combo boxes beside each other on a form. The form is an advanced search form and it needs to have a couple combo boxes beside each - one to list operators (<, > , <=, >= etc) and the other to be a combo of values (status etc).

I have absolutely no idea how to accomplish this or even if it's possible. If someone can point me in the right direction that would be awesome.

[javarine]

You can use the tbar config option of Ext.form.FormPanel and load the combo boxes as items.
That should place them next to each other in a horizontal line.
Later,...

[talshadar]

That would set them up as a toolbar at the top of the form wouldn't it? I have to set up several different sets for the advanced search panel - around 5 at this point.

[fay]

Look at how Ext.form.Column (http://extjs.com/deploy/ext/docs/output/Ext.form.Column.html) is used in the Dynamic Forms (http://extjs.com/deploy/ext/examples/form/dynamic.html) example.

[talshadar]

I thought about using columns but it doesn't quite address it the way I want it too. I want the combo boxes right beside each other and that would be difficult to get right with scrolling etc. I've tried offsetting one combo and manually lining it up with the other but couldn't get that to work properly either.

[talshadar]

I've been banging my head on this for WAY too long. There has got to be a way to do this! Basically I have 1 column of form elements - simple to set up no problem. But for 6 of the fields I need to actually put 2 fields beside each other. It's for an advanced search page - basically a combo box with <=, >= etc etc that is then tied to the search field (dates, status etc). This really should be possible - but nothing I do makes a difference. Yes I can put the other fields in a second column but that just looks stupid and is not an acceptable option.

Does anyone have a suggestion on how to resolve this need?? I really just need to pin 2 fields to each other -but nothing I do works.

PLEASE help!!

Here's the form code:



frmSearch = new Ext.form.Form("searchFormDiv",{id:"searchForm",width:800, labelWidth:120, style:"margin:10px;"});

frmSearch.column({width:450,style:"margin-left:10px;", clear:false,labelSeparator: ""});

storeCondition = new Ext.data.SimpleStore({
fields: ['conditionid', 'condition'],
data: [[0, '>'], [1, '<'], [2, '>='], [3, '<=']]
});

cmbCondition = new Ext.form.ComboBox({
name:"cmbCondition",store: storeCondition, displayField: 'condition',valueField:'conditionid',hiddenName:'cmbCondition',
mode: 'local', triggerAction: 'all', selectOnFocus:true, forceSelection:false, allowBlank:false, width:50
});

tSItemNo = new Ext.form.TextField({fieldLabel:"ID",name: "sItemNo", tabIndex:2, width:250, readOnly:false});
tSTitle = new Ext.form.TextField({fieldLabel:"Title",name: "sTitle", tabIndex:3, width:250});
tSDescription = new Ext.form.TextArea({fieldLabel:"Description",name:"Description",tabIndex:4,width:250,height:90,allowBlank:false, disableKeyFilter:true });
chkSCancel = new Ext.form.Checkbox({fieldLabel:"Cancel",name: "chksCancel", tabIndex:50});

cboSAssignedTo = new Ext.form.ComboBox({fieldLabel:"Assigned To",id:"sAssignedToID",tabIndex:5,
hiddenName:"sAssignedTo",displayField:"Name",valueField:"Name",
store:dsAssignedTo,width:268,readOnly:false,selectOnFocus:true,typeAhead:true,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:"Please Select..."});
cboSApprover = new Ext.form.ComboBox({fieldLabel:"Approver",id:"sApproverID",tabIndex:6,
hiddenName:"sApprover",displayField:"Name",valueField:"Name",
store:dsApprover,width:268,readOnly:false,selectOnFocus:true,typeAhead:true,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:"Please Select..."});
cboSInitiator = new Ext.form.ComboBox({fieldLabel:"Initiated",id:"sInitiatorID",tabIndex:7,
hiddenName:"sInitiator",displayField:"Name",valueField:"Name",
store:dsInitiator,width:268,readOnly:false,selectOnFocus:true,typeAhead:true,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:"Please Select..."});

//************ NEED DATE FIELDS ****************//
//tdStartDate, tdDueDate, tdForecastDate
//format:"l, F j, Y" - Wednesday, January 10, 2007
tdSStartDate = new Ext.form.DateField({fieldLabel:"Start Date",name: "sStartDate", tabIndex:8});
tdSDueDate = new Ext.form.DateField({fieldLabel:"Due Date",name: "sDueDate", tabIndex:9});
tdSForecastDate = new Ext.form.DateField({fieldLabel:"Forecast Date",name: "sForecastDate", tabIndex:10});

cboSStatus = new Ext.form.ComboBox({fieldLabel:"Status",id:"sStatusID",tabIndex:11,
hiddenName:"sStatus",displayField:"status",valueField:"code",
store:dsStatus,width:268,readOnly:false,selectOnFocus:true,typeAhead:true,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:"Please Select..."});
cboSProgress = new Ext.form.ComboBox({fieldLabel:"Progress",id:"sProgressID",tabIndex:12,
hiddenName:"sProgress",displayField:"progress",valueField:"code",
store:dsProgress,width:268,readOnly:false,selectOnFocus:true,typeAhead:true,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:"Please Select..."});
cboSPriority = new Ext.form.ComboBox({fieldLabel:"Priority",id:"sPriorityID",tabIndex:13,
hiddenName:"sPriority",displayField:"priority",valueField:"code",
store:dsPriority,width:268,readOnly:false,selectOnFocus:true,typeAhead:true,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:"Please Select..."});


btnSSearch = new Ext.Button("btnSearchDiv", {id:"sSearch", text:"Search",minWidth:100,handler:btnSSearch_OnClick,disabled:true,hidden:false, tabIndex:20});
btnSCancel = new Ext.Button("btnClearSearchDiv", {id:"sCancel",text:"Reset",minWidth:100,handler:btnSCancel_OnClick,disabled:true,hidden:false, tabIndex:21});


/*frmSearch.fieldset(
{legend:"Search Form:", id:"fsSearch"},
chkSCancel,
tSItemNo,
tSTitle,
tSDescription,
cboSAssignedTo,
cboSApprover,
cboSInitiator,
tdSStartDate,
tdSDueDate,
tdSForecastDate,
cboSStatus,
cboSPriority,
cboSProgress
);*/

frmSearch.add(chkSCancel);
frmSearch.add(tSItemNo);
frmSearch.add(tSTitle);
frmSearch.add(tSDescription);
frmSearch.add(cboSAssignedTo);
frmSearch.add(cboSApprover);
frmSearch.add(cboSInitiator);

frmSearch.add(tdSStartDate);
frmSearch.add(tdSDueDate);
frmSearch.add(tdSForecastDate);
frmSearch.add(cboSStatus);
frmSearch.add(cboSPriority);
frmSearch.add(cboSProgress);

frmSearch.add(btnSSearch);
frmSearch.add(btnSCancel);
frmSearch.end();

tSpacer1 = new Ext.form.TextArea({fieldLabel:"",name:"tSpace1",width:268,height:200,allowBlank:true, disableKeyFilter:true });


frmSearch.column({width:450,style:"margin-left:10px;", clear:false,labelSeparator: ""});
frmSearch.add(tSpacer1);
frmSearch.add(cmbCondition);

cboSAssignedTo.addListener("select", cbo_SOnSelect);
cboSApprover.addListener("select", cbo_SOnSelect);
cboSInitiator.addListener("select", cbo_SOnSelect);
cboSStatus.addListener("select", cbo_SOnSelect);
cboSPriority.addListener("select", cbo_SOnSelect);
cboSProgress.addListener("select", cbo_SOnSelect);

tSTitle.addListener("change", txt_SOnChange);
tSDescription.addListener("change", txt_SOnChange);

frmSearch.end();

[talshadar]

Ok, I finally gave up trying to resolve it normally and I'm creating my own extension for it. It seems to work so far, if any one is interested I can post my code/example when I'm done.

[rdimou]

Hello,
i am using Joomla 1.5 and i am trying in Community builder to add some fields one beside the others....like a table...
like this:


--------------------------------
| Column1 | Column2 | Column3 |
---------------------------------
| field1 | field2 | field3 |
--------------------------------
| field4 | field5 | field6 etc.|
---------------------------------

i could not find another way to create a table with fields...so i was trying to add different fields one beside the other without their labels in order to seem like a table

any ideas?? have you found a way to place the combo boxes beside each other??

thanks anyway.