Не удалось просмотреть полеLabel моей панели макета hbox

Question

У меня есть панель и макет hbox, у меня есть два текстовых файла как элементы панели.

Я не в состоянии просмотреть fieldLabels когда я исполняю .Please найти код

  Ext.onReady(function(){ 
     var panel = new Ext.Panel({ 
      title:"HBox Panel", 
      layout:'hbox', 
      width:300, 
      height:200, 
      renderTo:document.body, 
      items:[ 
        { 
        xtype:"textfield", 
        fieldLabel:"Label1" 
        }, 
        { 
        xtype:"textfield", 
        fieldLabel:"Label2" 
        } 

       ] 


      }); 
     }); 

Примечание: Я работаю на Ext 3.2.1

Answer 1

Как уже говорилось, опция fieldLabel применяется только в контексте компоновки формы (обычно это предоставляется панелью формы).

Как быстро исправить, вы можете отображать ярлыки в BoxComponent:

Ext.onReady(function() { 
    var panel = new Ext.FormPanel({ 
     title: "HBox Panel", 
     layout: 'hbox', 
     width: 300, 
     height: 200, 
     renderTo: document.body, 
     items: [{ 
      xtype: 'box' 
      ,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">' 
       + 'Label 1:</label>' 
      ,cls: 'x-form-item' 
     },{ 
      xtype: "textfield" 
     },{ 
      xtype: 'box' 
      ,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">' 
       + 'Label 2:</label>' 
      ,cls: 'x-form-item' 
     },{ 
      xtype: "textfield" 
     }] 
    }); 
}); 

Конечно, было бы чище, чтобы создать класс CSS для пользовательских стилей, или даже расширить новый компонент от BoxComponent.

Вы также можете обобщить эту логику в initComponent методе родительской панели, чтобы создать компоненты коробки для этикеток от настроенного fieldLabel поля (таким образом, вы можете также установить атрибут label тега for, потому что вы будете знать, сформированный id компонентов поля в это время).

Answer 2

Ваш макет должен быть form. От api documentation:

fieldLabel конфигурации используется только, когда этот компонент оказывает в контейнер, который был настроен на использование FormLayout макета менеджер (например, Ext.form.FormPanel или указав расположение: «форма»).

Answer 3

изменить тип схемы для формирования,

Ext.onReady(function(){ 
    var panel = new Ext.Panel({ 
     title:"HBox Panel", 
     layout:'form', 
     width:300, 
     height:200, 
     renderTo:document.body, 
     items:[ 
       { 
       xtype:"textfield", 
       fieldLabel:"Label1" 
       }, 
       { 
       xtype:"textfield", 
       fieldLabel:"Label2" 
       } 

      ] 


     }); 
    });