Javascript Extjs-与模板组合以显示多个值

我正在开发ExtJS4.1。我确实为文本框实现了自动完成功能。我现在可以通过输入一个术语来搜索学生的名字或姓氏，例如：Mat，文本字段中的结果将是：

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

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

---

我尝试了很多次，但仍然找不到一个好方法。在我看来，您最好使用一个只有“name”字段的简单模型，并在服务器端填充此字段。从前面的问题来看，服务器代码如下所示（在查询处理循环中）：

在客户端，您将使用具有单个名称字段的模型，并相应地配置组合框：

// 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...
});

但是，如果您真的想在一个模型中混合学生和科目数据，那么下面是您应该对当前代码所做的修改。首先，您需要从服务器检索主题名称。这意味着将您的服务器代码更改为：

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

然后，您需要在客户端的模型中添加此字段，并调整显示字段的转换方法以考虑主题：

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...
    }
});

最后，由于您已经在模型的显示字段中完成了这项工作，因此应该将其用作组合的显示字段，而不是在组合的模板中再次执行

例如，组合配置：

,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>'
),

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

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...
    }
});

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