Extjs - 与模板组合以显示多个值 [英] Extjs - Combo with Templates to Display Multiple Values
问题描述
Mathio，Jay<学生的姓氏
Mark，Matt<学生的姓名
然后，我对查询进行了一些更改，以便我可以获得主题我也搜索一个：
Mathio，Jay<学生的姓氏
Mark，Matt<学生的姓氏
数学<<主题
这是我的新查询：
查询以在多个表中进行搜索+指定返回值
现在，我需要重新配置其他部分，因此该字段可以显示案例，名称和主题
这是我的组合配置：
，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'
}
}，
字段：['f_name'，'l_name'
，{
name：'display'，
convert：function（v，rec）{
return rec.get f_name'）+'，'+ rec.get（'l_name'）;
}
}
]
}）;
我尝试了很多次，但仍然无法达到一个很好的方法。
IMO您最好只使用一个只有name字段的简单模型，并在服务器端填充此字段。从您以前的问题，服务器代码看起来像（在查询处理循环中）：
if（isset（$ row [ 2]））{//如果查询在行
$ name ='Subject：'中返回一个主题名称。 $行[2];
} else if（isset（$ row [1]））{//如果我们有最后一个名字
$ name ='学生：'。 $ row [0]。 '''。 $行[1];
} else {//我们只有名字
$ name ='学生：'。 $ row [0]。 '（Uknown姓）';
}
$ names [] = array（
'name'=> $ name，
）;
在客户端，您将使用具有单一名称字段的模型，并配置您的组合框相应：
//您的简化模型
Ext.define（'Post'，{
extends ：'Ext.data.Model'
，fields：['name']
，proxy：{
//你的代理配置...
}
} ）;
Ext.widget（'combo'，{
displayField：'name'
，valueField：'name'
//剩余的combo配置...
}）;
但是，如果你真的想在一个模型中混合学生和主题数据，这里是修改你应该使用你当前的代码。首先，您需要从服务器检索主题名称。这意味着将您的服务器代码更改为：
$ names [] = array（'f_name'=> $ row [ 0]，'l_name'=> $ row [1]，'subject'=> $ row [2]）;
然后，您需要在客户端的模型中添加该字段，并调整您的显示字段的转换方法来解决问题：
Ext.define（'Post'，{
extends：'Ext.data。模型'
，字段：['f_name'，'l_name'，
'subject'，//将子画面字段添加到模型
{
name：'display'
//调整转换方法
，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 {
返回firstName +'，'+ lastName;
}
}
}
}
]
，代理：{
//您的代理配置...
}
}）;
最后，由于您已经在模型的显示字段中执行此操作，因此应将其用作组合的displayField，而不是在组合模板中再次执行。
例如combo config：
{
displayField：'display'
，valueField：'display'
//剩下你的组合配置...
}
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.
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 - 与模板组合以显示多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
