ExtJS的 - 组合使用模板显示多个值 [英] Extjs - Combo with Templates to Display Multiple Values

问题描述

我工作的ExtJS的4.1。我没有实现对文本框的自动完成功能。我现在可以通过输入一个词，例如搜索学生的姓氏或名字：垫，结果在文本字段将是：

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，周杰伦＆LT;＆LT;学生的名字和姓氏

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

标记，马特＆LT;＆LT;学生的名字和姓氏

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

数学与LT;＆LT;主题

Mathematics << subject

下面是我的新的查询：
<一href=\"http://stackoverflow.com/questions/16509768/query-to-search-in-multiple-tables-specify-the-returned-value#16510065\">Query在多个表进行搜索+指定返回值

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

下面是我的组合配置：

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

我试过很多次，但仍不能达到一个很好的办法做到这一点。

I tried many times but still can't reach a good way to do it.

推荐答案

IMO你最好用一个简单的模型只是一个名称字段，并在服务器端填充此字段。从previous问题，服务器code会是什么样子（在查询处理循环）：

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

不过，如果你真的想在一个单一的模范生和科目数据混合，在这里，你应该对你目前的code做了修改。首先，你需要从服务器检索的主题名称。这意味着改变你的服务器code到是这样的：

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

最后，既然你已经做了模型的显示领域的工作，你应该把它作为组合的displayField而不是在组合的模板，老毛病又犯了的。

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.

例如。组合配置：

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

这篇关于ExtJS的 - 组合使用模板显示多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！