ExtJS的 - 組合使用模板來顯示多個值

Question

我工作的ExtJS的4.1。我確實爲文本框實現了自動完成功能。我現在可以通過輸入一個術語，例如搜索學生的姓氏或名字：墊，結果在文本字段將是：

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

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

於是，我做了查詢，以便一些變化我能得到的主題太當我搜索一個：

Mathio，周杰倫< <學生的名字和姓氏

馬克，馬特< <學生的名字和姓氏

數學< <主題

這是我的新查詢： 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你最好用一個簡單的模型只是一個「名稱」字段，並在服務器端填充此字段。從以前的問題，服務器代碼看起來像（在查詢處理循環）：

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

在客戶端，你可以使用一個模型將單個姓名字段，並相應地配置您的組合框：然而，如果你真的想在一個單一的模型中混合學生和科目數據，下面是你應該對當前代碼進行的修改。首先，您需要從服務器中檢索主題名稱。這意味着改變你的服務器代碼是這樣的：

$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.組合配置：

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