javascript - Extjs - Combo with Templates to Display Multiple Values -

i working on extjs 4.1. did implement autocomplete feature text box. i'm able search student's first or last name entering term, example: mat, , result in text field be:

mathio,jay << student's first , last name  mark,matt << student's first , last name 

then, made changes on query can subjects when search one:

mathio,jay << student's first , last name

mark,matt << student's first , last name

mathematics << subject

here new query: query search in multiple tables + specify returned value

now, need reconfigure other parts field can display both cases, names , subjects

here combo config:

,listconfig: { loadingtext: 'loading...', tpl: ext.create('ext.xtemplate',     '<tpl for=".">',         '<tpl if="l_name.length == 0"> ',                         '<div class="x-boundlist-item">{f_name}<p><font size="1">last name: unknown </font></p></div>',         '<tpl else>',            '<div class="x-boundlist-item">{f_name}<p><font size="1">{l_name}</font></p></div>',         '</tpl>',     '</tpl>' ), 

and model:

     ext.define("auto", {         extend: 'ext.data.model',            proxy: {          type: 'ajax',         url: 'auto.php',         reader: {             type: 'json',             root: 'names',          autoload: true,             totalproperty: 'totalcount'         }     },      fields: ['f_name','l_name' , {                     name : 'display',                     convert : function(v, rec) {                                                 return rec.get('f_name') + ',' + rec.get('l_name');                     }                 }     ]     }); 

i tried many times still can't reach way it.

imo you'd better use simple model 'name' field, , populate field on server-side. previous question, server code (in query processing loop):

if (isset($row[2])) { // if query returned subject name in row     $name = 'subject: ' . $row[2]; } else if (isset($row[1])) { // if have last name     $name = 'student: ' . $row[0] . ', ' . $row[1]; } else { // have first name     $name = 'student: ' . $row[0] . ' (uknown last name)'; }  $names[] = array(     'name' => $name, ); 

on client-side, use model single name field, , configure combo box accordingly:

// simplified model ext.define('post', {     extend: 'ext.data.model'     ,fields: ['name']     ,proxy: {         // proxy config...     } });  ext.widget('combo', {     displayfield: 'name'     ,valuefield: 'name'     // remaining of combo config... }); 

however, if want mix students , subjects data in 1 single model, here modification should on current code. first, need retrieve subject name server. means changing server code like:

$names[] = array('f_name' => $row[0], 'l_name' => $row[1], 'subject' => $row[2]); 

then need add field in model on client side, , adapt display field's convert method account subject:

ext.define('post', {     extend: 'ext.data.model'     ,fields: ['f_name', 'l_name',          'subject', // add subjet field model         {             name: 'display'             // adjust convert method             ,convert: function(v, rec) {                 var subject = rec.get('subject'),                     lastname = rec.get('l_name'),                     firstname = rec.get('f_name');                 if (!ext.isempty(subject)) {                     return subject;                 } else {                     if (ext.isempty(lastname)) {                         return firstname + ' (unknown last name)';                     } else {                         return firstname + ', ' + lastname;                     }                 }             }         }     ]     ,proxy: {         // proxy config...     } }); 

finally, since work in display field of model, should use displayfield of combo instead of doing again in combo's template.

e.g. combo config:

{     displayfield: 'display'     ,valuefield: 'display'     // remaining of combo config... }