Extjs - Combo With Templates To Display Multiple Values

I am working on Extjs 4.1. I did implement an autocomplete feature for the text box. I'm now able to search for student's first or last name by entering a term, for example: Mat, a

Solution 1:

IMO you'd better use a simple model with only a 'name' field, and populate this field on the server-side. From your previous question, the server code would look like (in your query processing loop):

if (isset($row[2])) { // if the query returned a subject name in the row$name = 'Subject: ' . $row[2];
} elseif (isset($row[1])) { // if we have the last name$name = 'Student: ' . $row[0] . ', ' . $row[1];
} else { // we have only the first name$name = 'Student: ' . $row[0] . ' (Uknown last name)';
}

$names[] = array(
    'name' => $name,
);

On the client-side, you would use a model with a single name field, and configure your combo box accordingly:

// Your simplified model
Ext.define('Post', {
    extend: 'Ext.data.Model'
    ,fields: ['name']
    ,proxy: {
        // Your proxy config...
    }
});

Ext.widget('combo', {
    displayField: 'name'
    ,valueField: 'name'// Remaining of your combo config...
});

However, if you really want to mix students and subjects data in one single model, here are the modification you should do on your current code. First, you need to retrieve the subject name from the server. That means changing your server code to something like:

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

Then you need to add this field in your model on the client side, and adapt your display field's convert method to account for subject:

Ext.define('Post', {
    extend: 'Ext.data.Model'
    ,fields: ['f_name', 'l_name', 
        'subject', // Add the subjet field to the model
        {
            name: 'display'// Adjust your 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: {
        // Your proxy config...
    }
});

Finally, since you already do that work in the display field of the model, you should use it as the displayField of the combo instead of doing it again in the combo's template.

E.g. combo config:

{
    displayField: 'display'
    ,valueField: 'display'// Remaining of your combo config...
}