PDA

View Full Version : suffix text in Combobox



sdd0
23 Apr 2014, 12:21 AM
In our system we used combobox with a suffix text frequently .
In ExtJs 2.0, we add it by this.el.insertSibling after a page is rendered:

48801



Ext.zySuffixComboBox = Ext.extend(Ext.zyComboBox, { suffix: '',
suffixCls: 'suffixcombo',
filename:'',
hypertext:'',
zytabpages:'',
afterRender: function(){
siblingel.insertSibling({tag: 'span', cls:'suffixcombo2', html: this.suffix}, 'after');
}
});



And in any our page, it's easy to add a suffix text by configuring a "suffix" attribute.



{
xtype:'zycombo',
itemId: 'property',
width:300,
suffix: '(seconds)',
labelWidth:120,
store : [['internal', 'internal'], ['external', 'external'], ['general', 'general']],
fieldLabel: "Interface Type"
}


In ExtJs 4.2 we use this method, but it will display in next line(see the picture below).
48802
Referred to another user(http://www.sencha.com/forum/showthread.php?284380-Problem-with-use-afterLabelTpl) , ExtJS 5 can solve this problem. But does anybody know what is fixed in ExtJS 5 ?? Can we fixed it by ourselves on ExtJS 4??

Thanks.

Gary Schlosberg
24 Apr 2014, 9:50 AM
I don't see a suffix config on the Ext 4 combobox, so I would use the method described in the thread to which you linked. The Fiddle there runs in 4.2.0 as well as 5.0.0 and 4.2.3.

sdd0
24 Apr 2014, 11:26 PM
Yes, there is no suffix config on the Ext 4 combobox, but we add this attribute by ourself.



Ext.zySuffixComboBox = Ext.extend(Ext.zyComboBox, {
suffix: '', //we add an extra attribute
suffixCls: 'suffixcombo',
filename:'',
hypertext:'',
zytabpages:'',
afterRender: function(){
//use insertSibling to add this suffix after this combobox
this.el.insertSibling(
{tag: 'span', cls:'suffixcombo2', html: this.suffix}, 'after');
}
});


You suggest using the solution on the fiddle, does it mean that there is really a bug in the attributes like 'afterSubTpl', 'afterLabelTpl'.. and function 'insertSibling', that makes the added suffix all drop down to the next line?

This SuffixComboBox runs well for us on extjs 2.x, we don't want to change the way our RD are used to use after extjs 4 upgrade. Is there any other solution for this?