当前位置: 代码迷 >> Web前端 >> ext运用总结(二)简单的hbox布局
  详细解决方案

ext运用总结(二)简单的hbox布局

热度:66   发布时间:2013-04-02 12:35:26.0
ext使用总结(二)简单的hbox布局
布局的合理利用:
如图:


{
                            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

                                        }
                                    ]
                                }
                            ]
                        }