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

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

}]

无论如何我可以将组合框向下移动到 texfield 旁边吗？

请帮忙！

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