Search code examples
javascriptextjslayoutcomboboxextjs3

EXT JS cannot see fieldLabel property when placing components horizontally


I am writing an EXT JS application that contains two combo boxes, each with its own fieldLabel property. I want to place these combo boxes next to each other horizontally. However when I try to do this the fieldLabel no longer appears.

This is the relevant code:

    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
         }]
     });

I have learned from reading this question that Panel containers don't support displaying fieldLabel properties. I therefore tried to render my components differently, using the EXT Dynamic Forms example (Form 3). This displayed the fieldLabel values but the components but they were still rendered vertically. I also tried the suggestion on this post but neither of these solutions worked for me.

In light of the fiddle in the first comment following this question, which uses EXT JS 5.0.1, I'd like to clarify I'm using EXT JS 3.4.0.


Solution

  • you can try like this as I see at the example link you provide above

    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 
          }]
        }]
     });
    

    I am not put the windowId for the test this is tested and as the rules, this working. you can see the result at https://fiddle.sencha.com/fiddle/efs/preview and the code you can see at https://fiddle.sencha.com/#fiddle/efs or http://jsfiddle.net/kapasaja/zn7e04so/

    hope this can help you