Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: customize displayField at combobox

  1. #11
    Ext User
    Join Date
    Jul 2007


    I hear ya, been there. I'm no pro.

    I see/answer questions when I can. I'd say more than half are people that seemingly don't even bother to search anywhere, that's why I at least tried to start the FAQs, which apparently people still don't know about nor use.

    There's a lot of info scattered around this site and it takes a while to get your bearings. I also didn't understand the API, which I now understand how to search a llittle better.

    Also with questions, you may have a better feedback when you give indications that you searched the API, the forums, etc. And even better when you say you looked at X thread or tried this code and couldn't get it to work. It helps see where you are at if you post your code and analyze where you're going wrong. Plus, many don't want to just do other people's work.

    I'm not saying you're guilty of any of above, just giving you my perspective having been around a little longer.

    Some of the 'disdain' you'll see are from people who have seen/answered the same question time and time again.

    You're in a great position to add to my FAQs. As you have questions and get answers consider posting inside the FAQ threads, which I think will be an easy /convenient place to start a search from.

  2. #12


    Thanks for the suggestions. I will try to keep them in mind.

    I will have to look into the FAQ. I was more considering making some tutorials. To me this is one of this site's weaknesses. The help and documentation is scattered across so many places. There is a FAQ, API documentation, demos, forums, tutorials, screencasts, and manuals. It is hard to know where to look for what. And as a person wanting to help almost as hard to figure out where to put the help.

    Anyway, have a good day and thanks.

  3. #13

  4. #14


    Here's another way to set the display as you like.

    var employeeCombo = new Ext.form.ComboBox({
                fieldLabel: 'Select An Employee',
                store: employeeDS,
    	valueField: 'employeeID',
                editable: false,
    	typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
    	tpl: empTpl,
    		employeeCombo.on('select', function(combo, record, index) {
    			var text =['firstName'] + " " +['lastName'];, text);
    			combo.value =;

  5. #15
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    The Netherlands


    Yet another way would be to add a calculated field to the store record that contains the text you want and use it as the displayField, e.g.

    var ComboBoxRecord =[
    	{name: 'id', mapping: 'ID'},
    	{name: 'salutation', mapping: 'Salutation'},
    	{name: 'name', mapping: 'Name'},
    	{name: 'first_name', mapping: 'First_Name'}
    	{name: 'full_name',
    		dependencies: ['salutation', 'name', 'first_name'],
    		notDirty: true,
    		calc: function(record) {
    			return record.get('salutation') + ' ' + record.get('first_name') + ' ' + record.get('name');
    displayField: 'full_name'

  6. #16
    Ext JS Premium Member
    Join Date
    Jun 2010

    Thumbs up

    Quote Originally Posted by cerad View Post
    You can create a new field consisting of several other fields during the record creation process by using the mapping property.

    fields: ['id', 'display', 'key', 'desc', {name: 'displayx', mapping: 'key + " " + obj.desc'} ]

    Here, displayx will consist of key + desc. Use it for your display field.

    The obj. is a bit strange but thats the way it was implemented. Use it for all the fields after the first.

    Be kind of nice if you could tie a field name to a function and have the function be called with the rest of the fields as input.

    Another approach that I have not yet tried was overriding the record.get method. I don't know if the combo box uses it or not. Grid does not which is a bit of a shame.
    Thanks cerad, this is exactly what I was looking for.

  7. #17
    Sencha User
    Join Date
    Jan 2011

    Default another way

    Convert function also solves the problem

        var comboStore = new{
            fields : [ 'id', 'first_name', 'last_name', 'country_code', 'city', 'email', {
                        name : 'display',
                        convert : function(v, rec) {                        
                            return rec.last_name + ' ' + rec.first_name
                    } ],
            data : comboList
        var regContact = new Ext.form.ComboBox({
            store : comboStore,
            fieldLabel : '....',
            name : '...',
            triggerAction : 'all',
            width : 100,
            mode : 'local',
            valueField : 'id',
            displayField : 'display'

  8. #18
    Ext JS Premium Member
    Join Date
    Feb 2008


    I'm also using the convert function and it works well.
    But I have problem with showing html as text instead of as html.

    convert: function (v, rec) {
    		return '<b>'+rec.last_name + ' ' + rec.first_name+'</b>'
    I want that text is bold and not see <b> in display field. How can I convert that text is displayed as html?


  9. #19


    convert: function (v, rec) { 		return '<b>'+rec.last_name + ' ' + rec.first_name+'</b>'
    Like that I want
    return '&nbsp' +'&nbsp' +'&nbsp' +'&nbsp' +rec.screenName
    .It is working fine, but when I select &nbsp&nbsp&nbsp can see in the combo, &nbsp&nbsp&nbsp can see only during selection, not at the time of display.

    I want My combo box should not show &nbsp&nbsp&nbsp on selecting also

    Pls help

  10. #20
    Sencha Premium Member
    Join Date
    Jul 2014

    Default Good Answer mknopp

    Good Answer if you want simply change,
    However for using tpl, you should use class="x-boundlist-item" insetad of class="x-combo-list-item".

Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts