Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: customize displayField at combobox

  1. #1
    Ext User
    Join Date
    Feb 2008
    Location
    Rostock - Germany
    Posts
    51

    Default customize displayField at combobox

    Hy,

    my goal is to combine multiple fields in a store object, to display in a combobox.
    these are my fields in my store:
    Code:
    {name: 'id', mapping: 'ID'},
    {name: 'salutation', mapping: 'Salutation'},
    {name: 'name', mapping: 'Name'},
    {name: 'first_name', mapping: 'First_Name'}
    id is used for the valueField Option.

    and the other 3 i want to use for the displayField.
    but
    Code:
    displayField: "salutation" + "first_name" + "name",
    isn't working. it accept only one string.
    so how can i get this?

  2. #2
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    You can use the tpl config of ComboBox to change the way that the options are displayed
    http://extjs.com/deploy/dev/docs/?cl....form.ComboBox


    I think it'd be something like this:
    Code:
    var tpl = new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item" >{salutation} {first_name} {name}</div></tpl>');

  3. #3
    Ext User
    Join Date
    Feb 2008
    Location
    Rostock - Germany
    Posts
    51

    Default

    it works.

    thank you

  4. #4

    Default

    Okay, this was helpful in showing how to display a complex display of data during the pull down selection phase.

    However, I have not been successful in finding out how to show the same complex data once the member is selected.

    Here is my code.

    javascript:
    PHP Code:
    var store = new Ext.data.JsonStore({
        
    url'ext_test.php',
        
    root'data',
        
    fields: ['contact_id''first_name''last_name''email'],
        
    autoLoadtrue
        
    });

        var 
    combo = new Ext.form.ComboBox({
                
    tpl'<tpl for="."><div class="x-combo-list-item" >{first_name} {last_name} ({email})</div></tpl>',
                
    storestore,
                
    id'contact_select',
                
    displayField:'first_name',
                
    valueField'contact_id',
                
    typeAheadtrue,
                
    triggerAction'all',
                
    emptyText:'Select a contact...',
                
    selectOnFocus:true
        
    }); 
    I tried placing a template definition into the displayField, and as expected it didn't like that at all.

    So, to clarify. I want to display the same complex data in the field after selection.

    Any help would be appreciated.

    Thanks.

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    92

    Default

    If you are using a valueField for your combo, the combobox's setValue function uses the 'displayField' value in the Record's .data set directly. If you want to display something else, it looks like you'll have to override the setValue function (see line 628 in source/widgets/form/Combo.js for the default functionality). I've done this using a plugin to the combobox, but as I've only been working with extjs for a couple of weeks, I'm not sure how clean this approach would be considered to be. In any event, these forums have been extremely helpful to me over the past couple of weeks, and I'd be remiss to not contribute this possible solution:

    Code:
    Ext.ux.form.ComboboxSelectTemplate = function(config) {
        Ext.apply(this, config);
        Ext.ux.form.ComboboxSelectTemplate.superclass.constructor.call(this);
    };
    Ext.extend(Ext.ux.form.ComboboxSelectTemplate, Ext.util.Observable, {
        combobox: null,
        init: function(combobox) {
        	if(typeof this.tpl == "string"){
        		this.tpl = new Ext.XTemplate(this.tpl);
        	}
    	this.combobox = combobox;
    	this.combobox.setValue = function(v) {
                var text = v;
                if(this.combobox.valueField){
                    var r = this.combobox.findRecord(this.combobox.valueField, v);
                    if(r){
                    	if (this.tpl != null) {
                    		text = this.tpl.applyTemplate(r.data); 
                    	} else {
    	                    text = r.data[this.combobox.displayField];
                    	}
                    }else if(this.combobox.valueNotFoundText !== undefined){
                        text = this.combobox.valueNotFoundText;
                    }
                }
                this.combobox.lastSelectionText = text;
                if(this.combobox.hiddenField){
                    this.combobox.hiddenField.value = v;
                }
                Ext.form.ComboBox.superclass.setValue.call(this.combobox, text);
                this.combobox.value = v;
    	};
    	this.combobox.setValue = this.combobox.setValue.createDelegate(this);
        }
    });
    You can use it in your combobox by specifying it as a plugin with a 'tpl' parameter as either an Ext.XTemplate object or a string to pass to the Ext.XTemplate constructor. Example:

    Code:
    ...
    plugins: new Ext.ux.form.ComboboxSelectTemplate({tpl:'{first_name} {last_name} ({email})'}),
    ...
    Hope this helps! If anyone has any suggestions on a cleaner approach to this solution, please share!

  6. #6

    Default

    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.

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Note, in the Learn section of the site there are examples of modifying comboBox via plugin and class extension. Either/both should be educational for what you're trying to do here.

  8. #8

    Default

    kveeiv and cerad, thank you very much.

    Cerad, your method works very well, and is exactly what I was wanting.

    mjlecomte, while I appreciate the thought, I did not just run to the forums as soon as I hit a snag. I have dug through nearly everything that I could find on comboboxes in the learn section. And I could find no examples that gave me an answer to this.

    While this is a very good site, the learn section suffers from a sense of uniformity (some people use namespaces some do not, some people's first action is to extend others isn't, etc.) and simple examples (If I just want to make a simple XXX it makes it hard to figure out when it is buried in pages of code making XXX with all of the bells and whistles).

    So, yes, the learn section is an excellent starting point, but just as an Ext JS for Dummies book, there are things that are not explained. That is why these active forums are the greatest resource Ext JS has.

  9. #9
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    I don't think you need to be so defensive. If the suggestion doesn't help you then don't heed it. Many people that are relatively new don't even know where to look. Someone just today didn't know there was a grid FAQ even thought it has been stickied in the forums.

    Also, if none of the tutorials met what you wanted to do and are too buried with stuff, feel free to contribute to the docs as well.

  10. #10

    Default

    Quote Originally Posted by mjlecomte View Post
    I don't think you need to be so defensive. If the suggestion doesn't help you then don't heed it. Many people that are relatively new don't even know where to look. Someone just today didn't know there was a grid FAQ even thought it has been stickied in the forums.

    Also, if none of the tutorials met what you wanted to do and are too buried with stuff, feel free to contribute to the docs as well.
    Sorry, about being so defensive.

    It is just getting difficult to find what I am needing in the documentation or forum, and there seems to be an attitude of disdain for people who ask for help on the forums if they are not of a certain skill level, I.E. near that of the pros.

    I do plan on contributing some stuff to the documentation as soon as I get it working.

Page 1 of 2 12 LastLast

Posting Permissions

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