PDA

View Full Version : Form Button appears in next line



msuresh
13 Dec 2010, 8:12 AM
Hi,
I am extending the component and building a search form. The Go button is appearing in next line and I am unable to move it on the same line.

Attached screen shot for reference.
23790

The code is as follows.



SearchForm = Ext.extend(Ext.Container, {
border : false,
initComponent : function() {
var me = this;
var config = {
items : [{
xtype : 'label',
text : this.text
}, {
xtype : 'textfield',
id : this.srchId,
vtype : this.vtype,
msgTarget : 'under',
listeners : {
specialkey : function(field, event) {
if (event.getKey() == event.ENTER) {
me.submitForm(me);
event.stopEvent();
}
}
}
},{
xtype : 'button',
text:'Go',
width:22,
handler : function() {
me.submitForm();
}//eo handler
}]
};
Ext.apply(this, config);
SearchForm.superclass.initComponent.apply(this,arguments);
},
submitForm: function(){
var fieldValue = Ext.getCmp(this.srchId).getValue();
var valid = Ext.getCmp(this.srchId)
.validate();
if (fieldValue !== '') {
if (valid === true) {
var url = this.url + fieldValue;
window.location.href = url;
}
}
}
});
Ext.reg('searchformbar', SearchForm);

var southPanel = {
region : 'south',
id : 'xxxsearch',
margins : '0 2 2 2',
height : 128,
width: 500,
xtype : 'panel',
border : true,
frame:true,
style : {
border : 0
},
items : [{
xtype : 'compositefield',
items : [{
xtype : 'searchformbar',
text : 'xxx:',
vtype : 'asupField',
srchId : 'asupId',
url : "/search?type=xxx&query="
}, {
xtype : 'searchformbar',
text : 'yyyy:',
vtype : 'caseField',
srchId : 'caseId',
url : "/uyyy?case_id="
}, {
xtype : 'searchformbar',
text : 'zzz:',
vtype : 'xxField',
srchId : 'bugId',
url : singleBugURL
}]
}]
}


Please some one help me in pointing my mistake.

Thanks,
Suresh

Screamy
13 Dec 2010, 8:57 AM
Observations on your code sample:



No layouts are declared in any of your components. If no layout is specified, then items will stack vertically when added to a container.
Add layout: 'hbox' to your SearchForm component and specify a width and/or use flex options on the child fields as appropriate.
You're over-nesting components in southPanel. Add layout: 'hbox' to southPanel, eliminate the compositefield (which you're not using correctly in this context) and again specify a width and/or use flex options on each SearchForm component added.

msuresh
13 Dec 2010, 9:45 AM
Thank you, it is working perfectly.