ExtJS4 - Элемент отображения поля, различные размеры шрифта для текста внутри

Question

Добрый день. Я создаю веб-приложение с помощью ExtJS4, и у меня есть полевое поле, где я показываю полное имя выбранного пользователя.

Я выборки имя пользователя, как например:

var firstName = record.get('FIRST_NAME'); 
var middleName = record.get('MIDDLE_NAME'); 
var lastName = record.get('LAST_NAME'); 

var name = firstName + " " + middleName + " " + lastName; 

Мой displayfield находится внутри panel и определяется как таковую:

{ 
    xtype: 'displayfield', 
    x: 175, 
    y: 355, 
    itemId: 'userName', 
    maxWidth: 300, 
    minWidth: 300, 
    width: 300, 
    defaultAlign: 'center', 
    hideLabel: true, 
    labelWidth: 60, 
    fieldStyle: 'font-size: 16px; color: #ffff00; text-align: center; text-style: bold;' 

} 

и я устанавливаю мой displayfield как таковой:

Ext.getCmp('borrowerIconPanel').down('#borrowerFormPanel').down('#userName').setRawValue(name); 

Однако это отображает только name в fieldStyle, что я определил, что:

font-size: 16px; color: #ffff00; text-align: center; text-style: bold; 

То, что я хочу, чтобы это произошло, что lastName имеет разный размер шрифта, чем firstName и middleName. Кто-нибудь знает, как я могу это достичь? Я не слишком разбираюсь в изменении стилей в ExtJS.

Любая помощь очень ценится, спасибо.

Answer 1

Вам нужно будет добавить форматирование на выходе, Ниже я завернул ответ в элементе span с классом CSS, который определяет необходимые стили. Я использовал встроенный блок стиля в HTML для примера, вы должны добавить его в таблицу стилей вашего приложения.

<style> 
.bold-text { 
    font-weight: bold; 
    font-size: 20px; 
    color: blue; 
} 
</style> 

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.create('Ext.form.Panel', { 
      renderTo: Ext.getBody(), 
      layout: 'vbox', 
      title: 'Final Score', 
      items: [{ 
       xtype: 'displayfield', 
       id: 'userName', 
       fieldLabel: "Test", 
       value: 'This is a test', 
       flex: 1, 
       fieldStyle: 'font-size: 16px; color: #000; text-align: center; text-style: bold;' 
      }, { 
       xtype: 'displayfield', 
       id: 'userName2', 
       fieldLabel: "Test", 
       flex: 1, 
       value: 'This is a test' 
      }], 
      listeners: { 
       afterrender: function() { 
        var firstName = "John"; 
        var middleName = "Arthur"; 
        var lastName = "Smith"; 

        var name = firstName + " " + middleName + " " + lastName; 

        Ext.getCmp('userName').setRawValue(name); 

        var name = firstName + " " + middleName + " <span class='bold-text'>" + lastName +"</span>"; 

        Ext.getCmp('userName2').setRawValue(name); 
       } 
      } 
     }); 
    } 
}); 

Fiddle