将文本字段对齐容器中的右侧

Question

我正在尝试将文本字段对齐

From : _____________           To:____________  

       **Textbox here**          **Textbox here**

我使用列布局来输入和输入，但我不能让文本框在每列中右对齐。

Ext.define('AY.view.Temperature', {
    requires: "Ext.form.field.ComboBox",
    extend: 'Ext.form.Panel',
    alias: 'widget.tempForm',

    title: 'Temperature Convertor',
    layout: 'column',
    autoShow: true,

        initComponent: function() {
            this.items = [

                        {
                            xtype: 'form',

                            bodyStyle : Ext.isIE
                                ? 'padding:5px 5px 5px 5px;'
                                : 'padding:5px 5px 5px;',
                          //  border: 'true',

                            items: [
                                {
                                xtype:'combo',
                                fieldLabel: 'From',
                                store: tempTypes,
                                queryMode: 'local',
                                displayField: 'name',
                                valueField: 'abbr',

                                renderTo: Ext.getBody()
                                },
                                {
                                    xtype: 'tbspacer',
                                    height: 10
                                },
                                {
                                    xtype: 'panel',
                                    layout: {
                                        type:'hbox',
                                        align: 'middle'
                                    },
                                    items:[
                                        {
                                            xtype: 'tbfill',
                                            flex: 1
                                        },
                                        {
                                        xtype: 'textfield',
                                        hideLabel: true,
                                        ctCls : 'spaces',
                                        name: 'from',
                                            flex: 2,
                                        allowBlank: 'false'
                                        }
                                        ]
                                }
                                ]
                },
                {
                    xtype :'form',
                    items: [
                                {
                                xtype: 'combo',
                                fieldLabel: 'To',
                                store: tempTypes,
                                queryMode: 'local',
                                displayField: 'name',
                                valueField: 'abbr',
                                renderTo: Ext.getBody()
                                },
                                 {
                                 xtype: 'textfield',
                                name: 'to',
                                     hideLable: true,
                             readOnly: 'true'
                        }
                       ]
                }]


                    /*buttons:[{
                        text: 'convert',
                        handler: function(){
                          //  convertTemp()
                        }
                    }]*/



        //console.log("Here it is "+tempTypes);
        this.callParent(arguments);
        }

如何在文本字段之前引入空格？

Answer 1

像这样（见fiddle）：

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    title: 'Temperature Convertor',

    autoShow: true,

    items: [

        {
            xtype: 'combo', 
            fieldLabel: 'From',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr'
        }, {
            xtype: 'tbspacer',
            height: 10
        }, {
            xtype: 'fieldcontainer',
            anchor: '100%',
            layout: {
                type: 'hbox'
            },
            items: [{
                xtype: 'container',
                width: 105, // need to match the fieldLabel width
                height: 10
            }, {
                xtype: 'textfield',
                flex: 1,
                ctCls: 'spaces',
                name: 'from',
                allowBlank: 'false'

            }]
        } // rest of the form...
    ],
    renderTo: Ext.getBody()
});

注意：您不得以其他形式嵌套表单！并且renderTo: Ext.getBody()不得用于嵌套项目！