`
李宏喜
  • 浏览: 118758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext4使用总结(二)简单的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

                                        }
                                    ]
                                }
                            ]
                        }
  • 大小: 1.4 KB
分享到:
评论

相关推荐

    Ext常用属性总结

    本文将深入探讨"Ext常用属性总结"这一主题,帮助开发者更好地理解和利用ExtJS的特性。 首先,让我们了解几个基本的ExtJS概念。`Ext.Component`是所有UI组件的基础类,它拥有众多属性来控制组件的行为、外观和交互。...

    Ext学习笔记

    以上知识点总结涵盖了ExtJS4组件创建、动态加载、窗口组件创建和显示、HBox布局使用以及布局属性配置等方面,这将有助于开发者更好地理解ExtJS4的使用方法和布局管理,从而有效地开发出复杂的用户界面。

    Ext3.0最经典的学习教程.pdf

    例如,可以使用`HBox`或`VBox`布局来水平或垂直排列组件,从而实现表单元素的横向排列。 #### 八、结语 《Ext3.0最经典的学习教程》深入浅出地介绍了ExtJS的核心概念和技术细节,对于希望利用ExtJS构建高效、美观的...

    Ext Js权威指南(.zip.001

    9.4.4 盒子布局、垂直布局与水平布局:ext.layout.container.box、ext.layout.container.vbox与ext.layout.container.hbox / 442 9.4.5 为盒子模型提供调整大小的功能:ext.resizer.splitter / 445 9.4.6 手风琴...

    ext-word文档

    ExtJS提供了多种布局策略,如`fit`、`vbox`、`hbox`等,可以根据需要选择合适的布局策略。 #### Grid组件 `Grid`是ExtJS中用于展示表格数据的组件。它可以轻松地从服务器获取数据,并以表格形式展示出来。此外,`...

    Ext增加,修改,删除,查询

    常见的布局类型包括:'fit'(完全适应容器)、'border'(边框布局,用于多区域划分)、'hbox'(水平布局)和'vertical'(垂直布局)。每个组件可以根据需要设置自己的布局,并可以通过调整大小和位置参数来优化显示...

    ExtJS使用笔记

    例如,在布局时,推荐避免使用column布局方式,尤其是在IE6浏览器中存在兼容性问题,而应该使用hbox布局。对于复杂组件的布局,应尽量避免使用form布局,特别是在form中嵌套其他布局的情况,因为这也可能导致IE6兼容...

    ExtJs4.0.7年月日时分秒、时分秒控件

    layout: 'hbox', // 水平布局 items: [ datePicker, timePicker ] }); ``` 4. **样例文件**: 附件中的css文件可能包含了自定义样式,以改变日期和时间选择器的外观。js文件可能包含了一些预定义的配置或...

    ExtJS实用开发指南

    3. **布局管理器**:布局管理器控制组件如何在容器中排列,常见的有`fit`、`card`、`vbox`、`hbox`等。 4. **数据绑定**:ExtJS提供了强大的数据绑定功能,可以将组件的状态与数据模型绑定起来,实现自动更新。 ###...

    G4studio教程

    #### 二、创建“我的页面” 本教程的目标是创建一个名为“我的页面”的功能页,该页面包含一个文本区域(input textarea)、一个确定按钮和一个展示面板。用户可以在文本区域内输入中文内容,点击确定按钮后,在展示...

    Extjs中文教程2.x

    - **类型**: 包括 `form`, `vbox`, `hbox` 等布局方式。 - **示例**: `layout: 'form'`。 **17.2 初始化** - **过程**: 在表单加载时初始化组件的状态和数据。 - **示例**: 使用 `initComponent()` 方法初始化表单...

Global site tag (gtag.js) - Google Analytics