Results 1 to 3 of 3

Thread: Format ComboBox entries depending on value

  1. #1

    Default Format ComboBox entries depending on value

    Hi

    I would like to apply differents formats to ComboBox entries depending on their value. For example, showing negative numbers in red, or very big values in bold.

    I've looked throughout the docs and the forum, and I haven't found any solution. Changing tpl doesn't work for me (I would need different tpls for each class of values), and there doesn't seem to exist anything similar to the getRowClass() method that exist in Grids.

    I think it has to be something related to the combo's inner DataView, but I haven't managed work it out. Any help?

    Thanks a lot in advance!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    The tpl will be what you want to change. XTemplates can accept programatic things like if statements and functions. Sencha Touch and ExtJS4's docs have great examples:

    Code:
    var tpl = new Ext.XTemplate(
        '<p>Name: {name}</p>',
        '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
        '<p>Kids: ',
        '<tpl for="kids">',
            '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
            '{name}',
            '</div>',
        '</tpl></p>'
     );
    Code:
    var tpl = new Ext.XTemplate(
        '<p>Name: {name}</p>',
        '<p>Kids: ',
        '<tpl for="kids">',
            '<tpl if="this.isGirl(name)">',
                '<p>Girl: {name} - {age}</p>',
            '</tpl>',
             // use opposite if statement to simulate 'else' processing:
            '<tpl if="this.isGirl(name) == false">',
                '<p>Boy: {name} - {age}</p>',
            '</tpl>',
            '<tpl if="this.isBaby(age)">',
                '<p>{name} is a baby!</p>',
            '</tpl>',
        '</tpl></p>',
        {
            // XTemplate configuration:
            compiled: true,
            // member functions:
            isGirl: function(name){
               return name == 'Sara Grace';
            },
            isBaby: function(age){
               return age < 1;
            }
        }
    );
    A good hint for your case is in red!
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    Thanks a lot, it worked like a charm! I didn't know XTemplates were so configurable!

Similar Threads

  1. ComboBox with JsonStore not displaying text of entries but entries exist
    By aaronbartell in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 1 Jul 2010, 6:32 AM
  2. [2.0.1-2.1] New ComboBox entries in EditorGrid
    By ohhowihateie in forum Ext 2.x: Bugs
    Replies: 13
    Last Post: 23 Feb 2009, 7:39 AM
  3. New ComboBox Entries in EditorGrid
    By ohhowihateie in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 9 May 2008, 6:18 AM
  4. loading 2nd combobox depending on the item selected in 1st combobox
    By basavarajkoti in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 7 Jan 2008, 5:20 AM
  5. Dynamic entries to ComboBox
    By isamudaison in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 19 Dec 2007, 3:45 PM

Posting Permissions

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