Question

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

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

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

然后，我对查询进行了一些更改，以便在搜索一个主题时也可以获得主题：

Mathio，Jay＆lt;＆lt;学生的名字和姓氏

Mark，Matt＆lt;＆lt;学生的名字和姓氏

数学＆lt;＆lt;受试者

这是我的新查询： Query to search in multiple tables + Specify the returned value

现在，我需要的是重新配置其他部分，以便该字段可以显示案例，名称和主题

这是我的组合配置：

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

和我的模特：

     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');
                    }
                }
    ]
    });

我尝试了很多次，但仍然无法达到一个好方法。

Answer 1

IMO你最好使用一个只有'name'字段的简单模型，并在服务器端填充这个字段。从上一个问题来看，服务器代码看起来像（在查询处理循环中）：

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

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

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

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

E.g。 combo config：

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

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

1 个答案: