使用 extjs 将组合框放置在文本字段旁边

Question

我的代码：

var mpanel = new Ext.Panel({
        baseCls: 'x-plain',
        //layout: 'anchor',
        width: 290,
        height: 500,
        items: [{
            {
                width: 140,
                border: 1,
                readOnly: true,
                value: "combovalue",
                style: {
                    borderColor: 'black',
                    borderStyle: 'solid',
                    float: 'left'
                },
                xtype: 'textfield',

            }, {

                name: 'comp',
                id: 'compId',
                bodyStyle: 'margin-left:140px'
                triggerAction: 'all',

                mode: 'local',
                store: new Ext.data.SimpleStore({

                    fields: [
                        'myId',
                        'displayText'
                    ],
                    data: [
                        [1, 'item1'],
                        [2, 'item2']
                    ]
                }),

                displayField: 'displayText',
                xtype: 'combo',

            }]
        })

这里我想要宽度为 140px 的文本字段，在它旁边我想放置组合框，所以我包含了 css margin-left:140px 但样式没有被附加。

如何解决？

Answer 1

将两个字段包装在 HBox layout 中，将文本字段放在左侧（第一项），将组合放在右侧（第二项）。不要忘记删除您在 css 或 "style" 配置选项中设置的所有样式。

使用 extjs 将组合框放置在文本字段旁边

Combo box placed next to the textfield using extjs

javascript

css

extjs