Display multiple fields in ExtJs 3.3 Combo box

I've opened up an ExtJs project that I've not had my head in for some time, and this is baffling me.

I've an Ext.form.ComboBox that uses a remote JSON store to list users. I use an XTemplate to format the users as listed in the drop down:

'<tpl for="."><div class="x-combo-list-item">', '{firstname} {lastname} ({email})', '</div></tpl>'

When I expand the drop down, I see my users listed correctly:

John Smith ([email protected])

John Ford ([email protected])

However when I click on a user, the combo box contents change to the valueField property ('firstname') which you would expect.


  1. Instead of showing John, I'd like the combo box to show: John Smith ([email protected]).
  2. When I have two John's (John Smith and John Ford) and the form loads, the ExtJs logic matches against the first John it finds in the list and changes the value of the field to the first John it matches against.

For example: John Smith (ID = 1) John Ford (ID = 2)

The user chooses John Ford, and "John" appears in the combo box after they've clicked the combo menu item, and user_id = 2 is written to the database.

When I reload the page however, the name "John" is matched (loaded from the database) to the first list entry, and if the operator does not manually change the selection in the drop down dialog, then John Smith is selected and user_id = 1 is now written to the database (when the user saves the form).

Any input would be much appreciated. My gut tells me there should be a couple of hooks during load and post list click that will allow me to manipulate what is written to the innerHTML element of the element.


Note: I've inheriting from a custom class which allows me to type ahead query against, firstname, lastname and email address (as we may potentially have hundreds of users to search against).

The ComboBox element I'm inheriting from:

CW.form.CustomComboBox = Ext.extend( Ext.form.ComboBox, { filterKeys:[], // Note: This overrides the standard doQuery function in Ext 3.3 doQuery: function(q, forceAll){ q = Ext.isEmpty(q) ? '' : q; var qe = { query: q, forceAll: forceAll, combo: this, cancel:false }; if(this.fireEvent('beforequery', qe)===false || qe.cancel){ return false; } q = qe.query; forceAll = qe.forceAll; if(forceAll === true || (q.length >= this.minChars)){ if(this.lastQuery !== q){ this.lastQuery = q; if(this.mode == 'local'){ this.selectedIndex = -1; if(forceAll){ this.store.clearFilter(); }else{ // this.store.filter(this.displayField, q); this.store.filterBy( function(rec,id){ return this.filterFn(rec,id,q); }, this ); } this.onLoad(); }else{ this.store.baseParams[this.queryParam] = q; this.store.load({ params: this.getParams(q) }); this.expand(); } }else{ this.selectedIndex = -1; this.onLoad(); } } }, /** * Custom function for filtering the store */ filterFn: function(rec, id, q ){ // var filterKeys = ['id', 'firstname', 'lastname', 'email']; var parts = q.split(' '); // If no filter applied then show no results if(parts.length == 0){ return false; } // Iterate through each of the parts of the user string // They must all match, at least in part, one of the filterKeys // (i.e. id, email, firstname, etc.) for(i=0; i<parts.length;i++){ var foundPart = false; // Create a RegExp object for this search snippet (i.e. '@gmai') var matcher = this.store.data.createValueMatcher(parts[i] , true); // Search until this matches one of the keys for this record for(j=0;j<this.filterKeys.length; j++){ if(matcher.test(rec.get(this.filterKeys[j]))){ foundPart = true; break; } } // If there are no fields of the record matching this part, // the record does not match (return false) if( foundPart == false ){ return false; } } return true; }, initComponent: function(){ Ext.applyIf(this,{ listeners:{ beforequery: function(qe){ delete qe.combo.lastQuery; return true; } } }); if(this.filterKeys.length == 0){ this.filterKeys = [this.displayField]; } CW.form.CustomComboBox.superclass.initComponent.call(this); } }); Ext.reg('custom-combo', CW.form.CustomComboBox);

-------------Problems Reply------------

Regarding issue #1, the best way I have found to get good custom display fields is to use generated fields in the Ext.data.Record definition that the Store uses. That way you get the full record to access to create your display field and aren't limited to just one field. I can't find the 3.x examples online now that Sencha is moving on to Ext4, but you can find this example in the examples/form directory of your ExtJS download. Here I've modified one of the ExtJS combo examples (examples/form/combo.js):

var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick', {
name: 'display',
convert: function(v, rec) { return rec[1] +' - '+ rec[0] }
// display looks like 'Texas - TX'
data : Ext.exampledata.states // from states.js
var combo = new Ext.form.ComboBox({
store: store,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
applyTo: 'local-states'

And now the combo displays values like Texas - TX, or whatever you have convert output. You can find documentation for convert in the Ext.data.Field docs.

As for issue #2, you may need to set the idProperty for your Ext.data.Reader or your store if you're using one of the convenient store + reader combos like JsonStore or ArrayStore. idProperty tells Ext which field to look for for a unique identifier. You can get all kinds of weird behavior if you don't have an idProperty or you choose one that isn't unique. Docs for that are here.

You just need to replace your displayField with the below code

tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{firstName} {lastName} {email}</div>',
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'firstName} {lastName} {email}',

Category:javascript Views:0 Time:2011-05-02

Related post

  • how to display multiple fields on a cell in iphone programing? 2012-02-08

    I'm reading a record from database that has few parameters. I want to display all of them in a cell (UITableView), but I can display only one parameter. How can I display multiple fields (parameters) on a cell? --------------Solutions------------- Ap

  • extjs 3.4 combo box load issue 2014-03-19

    i am using extjs 3.4 combo box . I am check the combo store load for focus .combo have value but its show the message which is written in focus event.I want to check before the select the combo if combo have value its don't show the message.Other han

  • field in form dependent on combo box data 2012-09-18

    I want to create a field on my form that gives me a result based on a combo box selection. The combo box has employees in it and the selection of employee comes from an employee table that contains 3 fields. 1. Name 2. Employee Type 3. Manager Name S

  • servlet for display div tag value according to changing combo box value 2011-04-15

    I want to do in my project,In combo box there are all employee Id and according to employee Id there should be display timesheet of particular employee. Please help me. Thanks. --------------Solutions------------- Override the onSelectionChange event

  • Adding dynamically form fields depending on selection of combo box with Javascript 2012-03-02

    I have to make a information submission page for a website, where will have some fields which should be generated on the value after selection of combo box value. Like if we select "2" from the value of combo box, two personal details fields should b

  • Field background colors different on combo boxes on some machines 2013-02-07

    I have distributed an Access 2003 .mde app and am launching it with Access 2007 with startup switch /runtime. It works perfectly on 38 computers, but on TWO computer only, the background colors of the combo boxes are different. On TWO computers only,

  • Access Report Help - How to display multiple fields on report beneath one set of Identifiers 2012-02-26

    Okay, I'm not even sure if this is possible, but I think I've seen it done and I'm just not certain 'how to'. I have a table tracking missed appointments. Each record has to be entered manually and as it is currently formatted the table contains fiel

  • Django admin display multiple fields on the same line 2011-05-02

    I have created a model, it will automatically display all the fields from the model and display it on the admin page. Now, I have a problem, I would like to have two fields on the same line, to do this I have to specify the fieldsets at ModelAdmin: f

  • Rails visually display multiple fields as one link 2012-03-11

    I have first name and last name in separate fields in my database. I'd like to display them next to each other and have the combined string be the link to the show method. Right now this is what I have: <td><%= link_to employee.first, employ

  • Get a sum in a query displaying multiple fields 2012-05-06

    I need to run a query that sums the amount of the claim where the date prompts a parameter. My fields are Claim Number Claim Amount Claim Payment Date If I do the the sum including only the Claim Number and Claim Amount I get the right sum displaying

  • Iterate Over Struct; Easily Display Struct Fields And Values In a RichEdit Box 2009-12-10

    Is there an easier way to display the struct fields and their corresponding values in RichEdit control? This is what I am doing now: AnsiString s; s = IntToStr(wfc.fontColor); RichEdit1->Lines->Append(s); etc... Is there an easier way than havi

  • Audit Tail to Track Multiple Fields 2012-03-03

    I am using using an audit trail to track multiple fields that include textboxes and combo boxes. The audit trail is working perfectly in one database, but when I try to duplicate it in a different database it doesn't work so well. In the one where it

  • Combo boxes requery issue. 2014-02-11

    I have a form with two combo boxes: StandardID and ElementID. The row source for ElementID is a query that looks at whatever option has been picked from StandardID and then shows only those records that are appropriate. This works fine, except for wh

  • display multiple values in combo box access 2013-08-27

    I am trying to show multiple fields in my combo box on my form. When I click the drop down arrow is shows both columns, however after selection only the information from the first column is displayed. --------------Solutions------------- For an examp

  • Displaying multiple errors per field with jQuery Validation 2012-03-17

    I am looking to use the jQuery validator plugin to display multiple field level error messages at a time. For example: $("#myForm").validate({ rules: { field: { required: true, minlength: 10, alphanumeric: true } }, messages: { field: { required: 'Th

  • pre-selecting value from dropdown (Combo box) in extjs? 2012-01-16

    I have a combo box which displays item quantity. Based on item quantity selection i am displaying price value of the item. By default i am setting price value to first item value. However when i load the page, i want my combo box to display first ite

  • How to append multiple combo box values on a Form, to a made Table 2014-12-08

    Hello, I am working on a time sheet database where numerous users will select their data from combo boxes on a Form, then press a command button to stick all that data into a new row on a different table so it can be stored. There are 7 tables which

  • Access 2007 - Display text fields in drop down list while bundling to an ID 2010-06-01

    in Access 2007 how can I display text fields in drop down list while bundling to an ID? not while selecting (we can do this by plying with the width field. but what I need after selecting? Do we create a hidden field that stores the ID? -------------

  • Multiple item combo box with headers? 2011-04-27

    Is it possible to have "column headers" on a combo box bound to multiple items? For example a combo box that displays a persons name. The combo box would display John Doe. But I'd like to display column headers: First Last John Doe Jane Doe Jimmy Doe

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.089 (s). 11 q(s)