Выравнивание текста на ярлыке extjs

Question

Я новичок в extjs.Я разрабатываю всплывающее окно, которое в основном заполняет некоторые данные с сервера. Я использовал макет как «fit», и я использую метки для отображения данных .Здесь мой код

win = new Ext.window.Window({ 
    title: 'Data point details', 
    layout: 'fit', 
    width: 'auto', 
    height: 500, 
    modal: false, 
    closeAction: 'destroy', 
    layout: { 
     type: 'table', 
     // The total column count must be specified here 
     columns: 2, 
     rows :10 , 
     tdAttrs: 
      { 
       style: 
       { 
        margin: '160px', 
        valign: 'top' , 
        padding: '8px' , 
        'font-size' : '12px' 
       } 
      } 


    }, 
    defaults: { 
        bodyPadding: 10 , 

        }, 
    items: [ 
      { 
      xtype: 'label', 
      text: 'Element : ' , 

      style: 
       { 

        'font-weight':'bold', 
        'labelAlign' : 'right', 

       } 
      }, 
      { 
      xtype: 'label', 
      text: elementname 
      }, 



      { 
      xtype: 'label', 
      text: 'Expression: ' , 
      style: 
       { 

        'font-weight':'bold', 

       } 
      }, 
      { 
      xtype: 'label', 
      text: s.expressionName 
      }, 
      { 
      xtype: 'label', 
      text: 'Profile: ' , 
      style: 
       { 

        'font-weight':'bold', 

       } 
      }, 
      { 
      xtype: 'label', 
      text: s.profileName 
      }, 


      { 
      xtype: 'label', 
      text: 'Time:', 
      style: 
       { 

        'font-weight':'bold', 

       } 
      }, 
      { 
      xtype: 'label', 
      text: Highcharts.dateFormat('%a, %b %e, %Y, %I:%M %p ', this.x) 
      }, 

      { 
      xtype: 'label', 
      text: 'Value:', 
      style: 
       { 

        'font-weight':'bold', 

       } 
      }, 
      { 
      xtype: 'label', 
      text: yvalue , 
      }, 

      { 
       xtype: 'box', 
       style : { 
       padding: '0px', 
       height: '90px', 
       //background : 'white', 
       }, 
       html: new Ext.XTemplate("<div style=\"height:150px;\">{value}") 
         .apply({value: me.htmldiv.innerHTML }) 
      }, 
                 ] 
    }); 
               win.show(); 

Я хочу, чтобы столбцы, которые появляются на левой стороне, чтобы их текст на правом, но текст всегда в левую сторону для всех ячеек кажется .Likw, например, в ярлык, который имеет текст «Элемент», по-видимому, находится слева. Я использовал labelalign, но он не работает. Непременно дайте предложения.

Answer 1

Всего несколько предложений, пока я не доберусь до soluti на:

1. У вас есть остаточные комы повсюду. Некоторые старые браузеры не справятся с такой задачей. Пример:

{ 'начертание шрифта': 'полужирный', < < - здесь}

1. победа = новый Ext.window.Window (... - это объявление глобальной переменной - возможно, самое худшее, что вы можете сделать в JavaScript и в ад. Используйте var ключевое слово, чтобы объявить локальные переменные следующим образом: var win = new Ext.window.Window (...
2. labelAlign - это способ выровнять текст метки справа, но а) вы применяете его через style свойство (стили, которые Ext применяют к HTML-элементу, созданному компонентом) и b) labelAlign является свойством Labelable components и столь же странным, как и это может звучать, сам ярлык не подлежит маркировке. Только не используйте ярлык, как это, смотри ниже ...
3. Дубликат расположение собственности на окне
4. Когда вы просите помощи и размещения кода, как часть вопроса, изменить код так, чтобы он оленья кожа» t содержат внешние зависимости - могут быть скопированы и запущены немедленно. Мне потребовалось почти полчаса, чтобы ваш образец работал.

Как я уже говорил, вы используете компонент Lable таким образом, чтобы его нельзя было использовать. Ярлыки создаются не напрямую, а заданием свойств ярлыков на компонентах, реализующих Labelable mixin (Поля в большинстве случаев). Это может показаться сложным, но это не так, посмотрите на код:

var wnd = new Ext.window.Window({ 
     title: 'Data point details', 
     width: 400, 
     height: 200, 
     modal: false, 
     closeAction: 'destroy', 
     layout: { 
      type: 'anchor', 
      align: 'stretch' 
     }, 
     bodyPadding: 10, 
     defaults: {     
      labelAlign: 'right',     
      labelStyle: { 
       'font-weight': 'bold' 
      }, 
      labelWidth: 100 
     }, 
     items: [{ 
      xtype: 'displayfield', 
      fieldLabel: 'Element',     
      value: 'elementname' 
     }, { 
      xtype: 'displayfield', 
      fieldLabel: 'Expression', 
      value: 's.expressionName' // s.expressionName 
     }, { 
      xtype: 'displayfield', 
      fieldLabel: 'Profile', 
      value: 's.profileName'  // s.profileName 
     }, { 
      xtype: 'displayfield', 
      fieldLabel: 'Time', 
      value: 'time' 
     }, { 
      xtype: 'displayfield', 
      fieldLabel: 'Value', 
      value: 'yvalue'  // yvalue 
     }] 
    }); 

    wnd.show(); 

Вы можете попробовать его и играть с ним here. Мое окончательное предложение состояло в том, чтобы взглянуть на официальную документацию и руководства по ExtJS, которые довольно хороши - например, here - это образцы для создания форм ...

Answer 2

Ниже приведен пример использования стилей css inline, а не отдельного класс. Это может быть полезно, если вы получаете значения CSS из ваших яваскрипта констант:

this.myLabel = Ext.create('Ext.form.Label', { 
    text: 'My Label Name', 
    style: { 
    'text-align': this.defaults.myLabelAlign, // The javascript constant. 
    'font-size': this.defaults.myLabelStyle // The javascript constant. 
    } 
});