1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    34
    Vote Rating
    0
    umit is on a distinguished road

      0  

    Default combobox with renderer and custom syles when expanded

    combobox with renderer and custom syles when expanded


    Hallo!
    I thought, that it would be fine, if you have a renderer in the combobox, since the tpl is kinda handicapped.
    If you want you can override it, if you want to have an extension, you can use another registration than "combo"

    Code:
    Ext.ux.ComboBox2 = Ext.extend(Ext.form.ComboBox, {        //  constructor function
            constructor : function (config) {
                if (config.renderer) {
                    //tpl überschreiben
                    //if(config.tpl){console.warn("TPL von Combo "+(config.dbid?config.dbid:' ')+" wird überschrieben!");}
                    config.tpl = '<tpl for=\".\"><div ext:qtip="{' + config.displayField + '}" class="x-combo-list-item"> {__styleField} </div></tpl>';
                    config.store.on("load", function () {
                        config.store.each(function (rec) {
                            var o = config.renderer(rec); //o.style kann und o.value muss vorhanden sein
                            if (!o.value) {
                                o.value = rec.get(config.displayField);
                            }
                            if (!o.style) {
                                o.style = "";
                            }
                            rec.set("__styleField", '<span style="' + o.style + '">' + o.value + '</span>');
                        });
                    });
                }
                Ext.ux.ComboBox2.superclass.constructor.apply(this, arguments);
            }
        });
    //Registrierung auf das bestehende ext combo Element, forgive me this sin
    Ext.reg("combo",Ext.ux.ComboBox2);
    How to use:
    Code:
    {    xtype:"combo",
        renderer : function (rec) {
            var o = {};
            o.value = rec.get("bez");
            if (rec.get("rf") == 0) {
                o.style = "color:red;";
                o.value = rec.get("v");
            }
            if (rec.get("rf") == 4) {
                o.style = "color:green;";
                o.value = rec.get("altV");
            }
            return o;
        },
        ...
    }
    Greets

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How is the tpl handicapped? I find XTemplate very powerful and flexible.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2010
    Posts
    34
    Vote Rating
    0
    umit is on a distinguished road

      0  

    Default


    Hi,
    I didn't find a way to do the thing in the code example like
    if 0 then color red, if 4 then color green.
    Its also difficult to read.

Thread Participants: 1

Tags for this Thread