ext4使用总结（二）简单的hbox布局

最新推荐文章于 2024-06-16 21:19:36 发布

原创最新推荐文章于 2024-06-16 21:19:36 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了如何通过合理布局和容器应用来优化网页设计，提高用户体验。通过详细解析实例，展示了如何利用Flexbox布局实现内容的灵活展示，并通过属性设置达到最佳视觉效果。

布局的合理利用：
如图：
[img]http://dl.iteye.com/upload/attachment/0082/0500/1fc27d18-aefb-3107-86e1-563e0ca65687.png[/img]


{
                            xtype:'container',
                            margins:'5 0 0 0',
                            layout:{
                                align:'stretch',
                                type:'hbox'
                            },
                            items:[
                                {
                                    xtype:'fieldcontainer',
                                    margins:'5 0 0 0',
                                    fieldLabel:'AAAA',
                                    combineErrors: true,
                                    labelWidth: 130,
                                    labelAlign: 'right',
                                    flex:1,
                                    defaults:'hideLabel: true',
                                    layout:{
                                        align:'stretch',
                                        type:'hbox'
                                    },
                                    items:[
                                        {
                                            xtype:'textfield',
                                            flex:1
                                        },
                                        {
                                            xtype:'displayfield',
                                            margins: '0 5 0 5',
                                            value:'至'
                                        },
                                        {
                                            xtype:'textfield',
                                            flex:1
                                        }
                                    ]
                                },
                                {
                                    xtype:'fieldcontainer',
                                    margins:'5 0 0 0',
                                    fieldLabel:'BBBB',
                                    combineErrors: true,
                                    labelWidth:130,
                                    labelAlign:'right',
                                    flex:1,
                                    defaults:'hideLabel: true',
                                    layout:{
                                        align:'stretch',
                                        type:'hbox'
                                    },
                                    items:[
                                        {
                                            xtype:'textfield',
                                            flex:1
                                        },
                                        {
                                            xtype:'displayfield',
                                            margins: '0 5 0 5',
                                            value:'至'

                                        },
                                        {
                                            xtype:'textfield',
                                            flex:1

                                        }
                                    ]
                                }
                            ]
                        }