java - 组合框和文本字段对齐问题

Question

因此，我尝试添加一个组合框，该组合框与我的文本字段在同一行上有 2 个值，但这样做时遇到问题。

这就是现在的样子:

我希望能够将组合框移动到我拥有的 2 个文本字段的左侧。

这是我放置在 Formpanel 之外的组合框的代码:

var cbTemplate = new Ext.form.ComboBox({
    typeAhead: false,
    width: 125,
    hideTrigger:true,
    allowBlank: true,
    displayField: 'val',

});

// ComboBox for switching status
var carWeightData={lstValueRecords: [{val: 'Item 1'},{val: 'Item 2'}]};
var cbCombo = jQuery.extend(true, {}, cbTemplate);
cbCombo.id = 'cbCarWeight';
cbCombo.name = 'cbCarWeight';
cbCombo.emptyText = 'Please Select';
cbCombo.hideTrigger = false;
cbCombo.mode = 'local';
cbCombo.triggerAction = 'all';
cbCombo.store = new Ext.data.Store({
    data: comboData,
    reader: new Ext.data.JsonReader({
        root: 'lstValueRecords',
        fields: [
                    {name: 'val', mapping: 'val'}
                ]
    })
});

因此，我尝试添加一个组合框，该组合框与我的文本字段在同一行上有 2 个值，但这样做时遇到问题。

这就是现在的样子:组合框

我希望能够将组合框移动到我拥有的 2 个文本字段的左侧。

这是我放置在 Formpanel 之外的组合框的代码:

var cbTemplate = new Ext.form.ComboBox({
    typeAhead: false,
    width: 125,
    hideTrigger:true,
    allowBlank: true,
    displayField: 'val',

});

// ComboBox for switching status
var carWeightData={lstValueRecords: [{val: 'Item 1'},{val: 'Item 2'}]};
var cbCombo = jQuery.extend(true, {}, cbTemplate);
cbCombo.id = 'cbCarWeight';
cbCombo.name = 'cbCarWeight';
cbCombo.emptyText = 'Please Select';
cbCombo.hideTrigger = false;
cbCombo.mode = 'local';
cbCombo.triggerAction = 'all';
cbCombo.store = new Ext.data.Store({
    data: comboData,
    reader: new Ext.data.JsonReader({
        root: 'lstValueRecords',
        fields: [
                    {name: 'val', mapping: 'val'}
                ]
    })
});

这是我的文本字段部分，位于 FormPanel 内和列内:

columnWidth:.6,
layout: 'form',
items: [
cbCombo,{
  xtype: 'container',
  layout: 'hbox',
  hideLabel: true,
  labelStyle: 'width: 105px',
  fieldLabel: 'Combo Data',
  anchor: '90%',
  items:[{
     xtype:'textfield',
     name: 'locationId1',
     flex: 12
  },{                       
      xtype: 'label',
      margins: '0 0 0 5',
      text:'-',
      flex: 1
  },{
      xtype:'textfield',
      name: 'locationId2',
      flex: 12
  }]

}]

我是否可以将组合框向下移动到文本字段旁边？

请帮忙!

Answer 1

为什么不做与文本字段相同的事情呢？

items: [
    {
        xtype: 'combo',
        // combobox configuration
    },{
        xtype:'textfield',
        name: 'locationId1',
        flex: 12
    },
    ...
]

没有什么可以阻止您将实例化的组件放在那里:

items: [
    new Ext.form.ComboBox({
        // combobox configuration
    }),
    {
        xtype:'textfield',
        name: 'locationId1',
        flex: 12
    },
    ...
]

使用 jQuery 扩展 Ext 组件是我不会做的事情，但是 o_O