Results 1 to 5 of 5

Thread: Combo box display text

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    318

    Default Combo box display text

    I would like to set display field of combo box (selected item).
    So, i use calculated field in my record:

    Code:
    { name: 'display', convert: function (v, rec) {
     return '<font color="'+rec["color"]+'>' + rec["name"]+'</font>';
    }
    Then I have set the dispayFiled in my combo box to this column:
    Code:
    var cmbDc = new Ext.form.ComboBox({displayField: 'display',..});
    It works except the HTML is ignored - it is written as text instead of the font would have the appropriate color. How can I do that? I have tried also with select event, but it is the same:
    Code:
              'select': function (combo, record) {
                var text ='<font color="red">'+record.data['name']+'</font>';
                Ext.form.ComboBox.superclass.setValue.call(this, text);
    Any idea?

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    You would need to modify the combo's tpl config like below to change the look of the combo when expanded:
    http://jsfiddle.net/Whinters/PzVjx/

    And update the style/color of the combo element on select to change the look of the collapsed combo:
    http://jsfiddle.net/Whinters/PzVjx/1/

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    318

    Default

    Thank you for your answer.
    But tpl config is for collapsed items? That i have already done and it works.
    When you select some item in combo it is shown in textbox at the top of the combo.
    Here I need to change the look. I need to show font in the color from the record.

    In this example:
    http://jsfiddle.net/Whinters/PzVjx/

    As you see some items are in red color. When you select it, it becomes black, instead of remain red.

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    Have you looked at my second provided example?

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    318

    Default

    Thank you. It works for the color. My look was too quick

    But what if I would like that text in selected item is rendered as HTML? Is this possible?

    With tpl i can render custom html(like <b>, <li>, <div>,....) but it works only for collapsed items.

    Is there some kind of tpl also for selected item?

    I guess this would work:
    Code:
    combo.getEl().insertHtml()
    Otherwise I need just color at the moment and it helped me to solve my problem
    Last edited by simon; 11 Oct 2013 at 1:19 AM. Reason: adding line of code

Tags for this Thread

Posting Permissions

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