Extjs - Combo with Templates to Display Multiple Values

Question

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, and the result in text field would be:

Mathio,Jay << student's first and last name

Mark,Matt << student's first and last name

Then, I made some changes on the query so that i can get the subjects too when i search for one:

Mathio,Jay << student's first and last name

Mark,Matt << student's first and last name

Mathematics << subject

Here is my new query: Query to search in multiple tables + Specify the returned value

Now, what i need is reconfigure the other parts so the field can display both cases, names and subjects

Here is my 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 my 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 but still can't reach a good way to do it.

rixo rixo · Accepted Answer · 2013-05-15T16:02:04

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];
} else if (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...
}

Extjs - Combo with Templates to Display Multiple Values

1 Answers