Which component need to be extended?

[nagarajan.bose]

Hi,
I need to create a component which should contain a label, textfield and a button. This will be called inside Toolbar.

What I need to extend to implement this. I tried Ext.Field and Ext.form.Field but of no use.



SearchGroup = Ext.extend(Ext.Field,{
searchGrpName:'Default',
initComponent: function(){
var me = this;
var txtLbl = new Ext.form.Label({text: me.searchGrpName})
var txtFld = new Ext.form.TextField({name: me.searchGrpName})
var config={
items:[txtLbl,txtFld]
}
Ext.apply(this, config);
SearchGroup.superclass.initComponent.apply(this, arguments);
}
})

Ext.reg('searchfield', SearchGroup);

SearchToolBar = Ext.extend(Ext.Toolbar, {
margins:'0 2 2 2',
initComponent : function(){
var config = {
items: [
{xtype: 'searchfield',name: 'XXXX'},
{xtype: 'searchfield',name: 'YYYY'}
]
};
Ext.apply(this, config);
SearchToolBar.superclass.initComponent.apply(this, arguments);
}
});



Give me some idea ...

Regards,
Nagaraj

[Condor]

You should be extending Ext.Container (don't forget to set a layout, e.g. hbox).

[nagarajan.bose]

Superb... It works fine... Thanks Condor.

However there is a small problem. The label is not getting displayed when we extend. However when I include "new Ext.form.Label({text: 'XXXX: '})" separately it is showing.

Please point me what I am missing...



/**
* XXXX Search plugin
*
* @class Ext.ux.grid.Search
* @extends Ext.util.Observable
* @param {Object} config configuration object
*/
SearchGroup = Ext.extend(Ext.Container,{
/**
* @cfg {Boolean} isSpaceRequired Display a vertical pipe after the button (defaults to true)
*/
isSpaceRequired:true,
/**
* @cfg {String} label Name to display on Toolbar
*/
labelName:'',
/**
* @cfg {String} field Name for the textfield
*/
fieldName:'',
initComponent: function(){
var txtLbl = new Ext.form.Label({text: this.labelName + ': '});
var txtFld = new Ext.form.TextField({name: this.fieldName});
var tbarBtn = new Ext.Toolbar.Button({iconCls:'searchicon'})
var config={
layout:'hbox'
}
var searchItems = [];
searchItems.push(txtLbl);
searchItems.push(txtFld);
searchItems.push(tbarBtn);
if(this.isSpaceRequired){
var tSpacer = new Ext.Toolbar.Spacer({width: 10});
searchItems.push(txtLbl);
}
config.items = searchItems;
Ext.apply(this, config);
SearchGroup.superclass.initComponent.apply(this, arguments);
}//eo initComponent
})
Ext.reg('searchfield', SearchGroup);

SearchToolBar = Ext.extend(Ext.Toolbar, {
margins:'0 2 2 2',
initComponent : function(){
var config = {
items: [
//new Ext.form.Label({text: 'xxxx: '}), This works fine
{xtype: 'searchfield', labelName:'XXXX', fieldName: 'yyyy'},
};
Ext.apply(this, config);
SearchToolBar.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('searchToolbar', SearchToolBar);

[nagarajan.bose]

Got it. I had messed up here...



var tSpacer = new Ext.Toolbar.Spacer({width: 10});
searchItems.push(txtLbl); // It should be tSpacer
}


Thanks for all your support.