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

时间:2013-08-29 13:47:47

标签: java extjs combobox playframework textfield

所以我试图添加一个组合框,它在我的文本字段的同一行上有2个值,但是我很难这样做。

这就是它现在的样子: enter image description here

我希望能够将组合框移动到我拥有的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的旁边吗?

请帮忙!

1 个答案:

答案 0 :(得分:0)

为什么不和文本字段一样?

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