EXT JS не может видеть свойство fieldLabel при размещении компонентов по горизонтали

Question

Я пишу приложение EXT JS, содержащее две комбинированные поля, каждая со своим собственным свойством fieldLabel. Я хочу разместить эти комбинированные поля рядом друг с другом по горизонтали. Однако, когда я пытаюсь это сделать, fieldLabel больше не отображается.

Это соответствующий код:

var stationsPanel = new Ext.Panel({ 
     padding: 10, 
     id: windowId + "stationsPanel", 
     defaultType: "combo", 
     width : "100%", 
     layout: "hbox", 
     items: [{ 
      fieldLabel: "Start Station", 
      id: "startstation", 
      allowBlank: false 
     },{ 
      xtype: "spacer", 
      width: 50 
     },{ 
      fieldLabel: "End Station", 
      id: "endstation", 
      allowBlank: false 
     }] 
    }); 

я узнал от чтения this question что Panel контейнеры не поддерживают отображение fieldLabel свойств. Поэтому я попытался отобразить мои компоненты по-разному, используя пример EXT Dynamic Forms (форма 3). Это отображает значения fieldLabel, но компоненты, но они по-прежнему отображаются вертикально. Я также попробовал предложение на this post, но ни один из этих решений не работал для меня.

В свете скрипки в первом комментарии, следующего за этим вопросом, который использует EXT JS 5.0.1, я хотел бы уточнить, что использую EXT JS 3.4.0.

Answer 1

вы можете попробовать, как это, как я вижу на примере ссылку указанный выше

var stationsPanel = new Ext.Panel({ 
    bodyStyle:'padding:5px 5px 0', 
    frame:true, 
    id: "stationsPanel", 
    layout:'column', 
    width : 700, 
    items: [{ 
    layout:'form', 
    items:[{ 
     xtype:'combo', 
     fieldLabel: "Start Station", 
      id: "startstation", 
     allowBlank: false 
    }] 
    },{ 
     layout:'form', 
     style: {marginLeft:'50px'}, 
     items:[{ 
     xtype:'combo', 
     fieldLabel: "End Station", 
     id: "endstation", 
     allowBlank: false 
     }] 
    }] 
}); 

Я не поставил windowId для тест проверен и как правила, это работает. Вы можете увидеть результат на https://fiddle.sencha.com/fiddle/efs/preview и код, который вы можете увидеть на https://fiddle.sencha.com/#fiddle/efs или http://jsfiddle.net/kapasaja/zn7e04so/

надеюсь, что это может помочь вам

Answer 2

fieldLabel отображается только для формы panel.try с формой панели макета HBox

Answer 3

Нет необходимости для прокладки там, запас propety сделать работу для вас:

var stationsPanel = new Ext.Panel({ 
    width: 600, 
    layout: { 
     type: 'hbox', 
     align: 'middle', 
     pack: 'center' 
    }, 
    items: [ 
      { 
       xtype: 'combobox', 
       flex: 1, 
       margin: 20, 
       fieldLabel: 'Start Station', 
       allowBlank: false 
      }, 
      { 
       xtype: 'combobox', 
       flex: 1, 
       margin: 20, 
       fieldLabel: 'End Station', 
       allowBlank: false 
      }] 
    }); 

простой торт;)