Layout SenchaTouch1.x，如何使用hbox创建包含两个组件的容器

我的数据存储中有一组数据，我使用.js视图中容器中的文本字段输出数据。我还禁用了仅用于显示数据和不可编辑的字段。我想知道除了使用“xtype:textfield”和“xtype:textareafield”之外，是否还有其他选择

有了这个问题，我将尝试使用hbox创建一个包含两个组件的容器作为替代方案，以下是我的代码：

    var formContainer1 = new Ext.Container({
        width: '100%',
        height: '65%',            
        layout: {
            type: 'vbox',
        //    type: 'hbox',
            align: 'stretch',
        },
        defaults: {
            labelAlign:'left',            
        //    labelWidth:'30%',
            labelWidth:'25%',
        },
        items: [
            { 
                bodyStyle: "background-color: #52ABD5;", //Color = Light Blue
                html: '<font face="Helvetica" size="4" color="white" ><p>Information</p>'
            },
            {
                xtype: 'textfield',
            //    xtype: 'component',
                name: 'Description',
                disabled: true,
                label: 'Desc',                    
            },{
                xtype: 'textfield',
            //    xtype: 'component',
                name: 'Number',
                disabled: true,
                label: 'ANumber',
                id: 'ANumber',
            },{
                xtype: 'textareafield',
            //    xtype: 'component',
                name: 'directions',
                disabled: true,
                label: 'Directions',
                height: 'auto',
            //    defaults: {
                    //required: true,
            //        labelAlign: 'left',
            //        labelWidth: '100%'
            //    },                        
            },
        ],
    /*    dockedItems: [
            {
                layout: 'hbox',
                xtype: 'toolbar',
                dock: 'top',
                title: 'Information',
            //    scroll: 'horizontal',
            }
        ]*/
    });

var formContainer1=新的外部容器({
宽度：“100%”，
身高：65%，
布局：{
键入：“vbox”，
//类型：“hbox”，
对齐：“拉伸”，
},
默认值：{
labelAlign:“左”，
//标签宽度：“30%”，
标签宽度：'25%'，
},
项目：[
{ 
bodyStyle:“背景色：#52ABD5；”，//颜色=浅蓝色
html:“信息
”
},
{
xtype:'textfield'，
//xtype:'组件'，
名称：'说明'，
残疾人:对,，
标签：“Desc”，
},{
xtype:'textfield'，
//xtype:'组件'，
姓名：'号码'，
残疾人:对,，
标签：'ANumber'，
id:'ANumber'，
},{
xtype:'textareafield'，
//xtype:'组件'，
名称：'方向'，
残疾人:对,，
标签：'方向'，
高度：“自动”，
//默认值：{
//要求：正确，
//labelAlign:'左'，
//标签宽度：“100%”
//    },                        
},
],
/*摘要：[
{
布局：“hbox”，
xtype:'工具栏'，
码头：“顶部”，
标题：“信息”，
//滚动：‘水平’，
}
]*/
});

现在这段代码运行得很好，只是我不想使用“textfield”或“textareafield”。我仍然在使用它们，因为我尝试使用xtype:component，但它不起作用。另外，当我在hbox版面中尝试此功能时，它并没有像我希望的那样显示出来（一行接一行）。我很确定我只是不理解“使用hbox的组件”部分，因为是的，我希望这个容器看起来非常接近这个：

Img网址：

（注：参考最右边的iphone图片和容器）

请为我澄清“w/2组件usnig hbox”部分。谢谢

顺便说一下：

---

我在那篇文章上的用户名：kevinjset。这是我在Sencha touch论坛上发布的原始帖子，问了同样的问题，我只是想看看你们是否对堆栈溢出感兴趣！你也可以帮我！谢谢，再见。

这相当乏味，但可能会帮到你

{
            xtype:'fieldset',
            title:'fieldset1',
            items:[{
                xtype:'container',
                layout:'hbox',
                items:[{
                    xtype:'container',
                    flex:1,
                    html:'1'
                },{
                    xtype:'container',
                    flex:1,
                    html:'2'
                },{
                    xtype:'container',
                    flex:1,
                    html:'3'
                }]
            },{
                xtype:'container',
                layout:'hbox',
                items:[{
                    xtype:'container',
                    flex:1,
                    html:'4'
                },{
                    xtype:'container',
                    flex:1,
                    html:'4'
                },{
                    xtype:'container',
                    flex:1,
                    html:'6'
                }]
            }]
        }