PDA

View Full Version : How to show data in combo in ellipsis "text text ..."



amanind
19 May 2011, 10:52 PM
Hi

I want to show long values in combo in ellipsis form.
Like if one of the combo value is "Hello buddy" but I want to show only 8 character in combo then value shows in combo should be like this "Hello bu..."

Any body tell me how to do this?
Is there any property in combo

friend
20 May 2011, 5:55 AM
You'll probably need to modify the template used by the Combo. Vist the Ext.form.ComboBox (http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.form.ComboBox) API docs and look at the tpl config option.

amanind
20 May 2011, 6:17 AM
Thanks friend, can you let me know how to use tpl in code
here is my code



MS.ImpactSisterApp.FundCombo = Ext.extend(Ext.ux.form.LovCombo, {
fundData: null,
fundId: null,
IncludeAllFunds: false,
multiCheckCombo: false,
separator:',',
widthField: 230,
showAll: false,
initComponent: function() {
var config = {
mode: 'local',
forceSelection: true,
typeAhead:false,
hideOnSelect:false,
width: 230,
disabled: true,
triggerAction: 'all',
emptyText: "-- Select Fund --",
editable: false,
displayField: 'Name',
hiddenName: 'funcComboId',
sortableField: 'Name'

};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MS.ImpactSisterApp.FundCombo.superclass.initComponent.apply(this, arguments);
this.on("select", this.doSelect, this);
if(this.multiCheckCombo){
Ext.apply(this,{width: this.widthField});
}
if(this.fundData != null) this.loadCombo(this.fundData);
},
loadCombo: function () {
var data = arguments[0];
if(this.IncludeAllFunds){
data.splice(0,0,{"Id":0,"Name":"All"});
}
if (!this.store) {
var storeParams = { fields: MS.ImpactSisterApp.config.comboFieldTypes.funds, "sortableField": this.sortableField, "data": data }
this.store = MS.ImpactSisterApp.getArrayReaderStore(storeParams);
} else {
this.store.removeAll();
}
this.store.loadData(data);
if (this.sortableField) this.store.sort(this.sortableField, "ASC");
if(this.showAll){
this.setValue(data[0].Name);
this.store.data.items[0].data.checked = true;
this.selectedIndex = 0;
this.selectedItem = this.store.data.items[this.selectedIndex].data.Id;
this.regionId = this.selectedItem;
}
this.enable();
},
doSelect: function(combo, record, index) {
if(this.multiCheckCombo){
var ch = [];
for(var i=0; i<record.store.data.length; i++){
if(record.store.data.items[i].data.checked == true) {
ch.push(record.store.data.items[i].data.Id);
if(record.store.data.items[i].data.Id == 0){

}
///this.fundId = record.store.data.items[i].data.Id
}
}
this.fundId = ch.join(this.separator);
} else {
this.fundId = record.data.Id;
}
MS.ImpactSisterApp.SisterAppEventManager.fireEvent("fundComboChanged", { fundId: this.fundId });
},
onDestroy: function(){
this.fundData = null;
this.fundId = null;
this.un("select", this.doSelect, this);
}
});

friend
20 May 2011, 9:24 AM
Just add the tpl configuration option to your combo extension, then specify a String template.

Lots of good examples are available in the Ext.XTemplate (http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.XTemplate) API docs, under the XTemplate(Mixed config) branch.