`

Ext表單中一行多列的布局

EXT 
阅读更多


var simpleForm = new Ext.FormPanel({
            labelAlign : 'left',
            title : '表单例子',
            buttonAlign : 'right',
//            bodyStyle : 'padding:5px',
            width : 600,
            frame : true,
            labelWidth : 80,
            items : [{
                        layout : 'column', // 定义该元素为布局为列布局方式
                        border : false,
                        labelSeparator : ':',
                        items : [{
                                    columnWidth : .5, // 该列占用的宽度,标识为50%
                                    layout : 'form',
                                    border : false,
                                    items : [{ // 这里可以为多个Item,表现出来是该列的多行
                                        cls : 'key',
                                        xtype : 'textfield',
                                        fieldLabel : '用户名',
                                        name : 'name',
                                        anchor : '90%'
                                    }]
                                }, {
                                    columnWidth : .5,
                                    layout : 'form',
                                    border : false,
                                    items : [{
                                                cls : 'key',
                                                xtype : 'textfield',
                                                inputType : 'password',
                                                fieldLabel : '口令',
                                                name : 'passwd',
                                                anchor : '90%'
                                            }]
                                }]
                    }]

        });
       

  • 大小: 6.6 KB
分享到:
评论

相关推荐

    EXT动态新增一行

    在EXT中,"动态新增一行"是指在表格或者布局中,通过用户操作(比如点击按钮)来动态地添加新的行元素,这些元素可以是文本框、下拉框等交互组件。 EXT中的Column Layout是一种布局方式,适用于创建网格或表格形式...

    EXT4.3实现动态表单全动态

    - **联动交互**:在EXT4.3中,表单和grid可以相互关联,例如,选中grid的一行数据后,表单自动填充对应的字段值。 - **编辑模式**:grid可以设置为编辑模式,允许用户直接在grid中修改数据,这时通常会结合使用`...

    Ext Column+Form布局画复杂页面

    这个布局模式非常适合那些需要在一行内并排放置多个组件的应用场景。 接下来是Form Layout(表单布局),它专为创建表单而设计。表单布局会自动处理表单元素的对齐和间距,使其看起来整洁且易于填写。它支持各种...

    ExtJs中表单formPanel的横向布局

    `column`布局是一种允许元素按列分布的布局方式,非常适合于创建多列表单或界面。在本例中,通过在`items`数组内嵌套使用`column`布局,可以实现在同一行内元素的并列显示。例如,在第一行中,我们定义了三个列宽...

    ext 3.0中文API

    在EXT 3.0中,这些组件已经经过优化和增强,提供了更多定制选项和更好的性能。例如,EXT的GridPanel允许开发者创建数据驱动的表格,支持排序、分页和行编辑等功能。TreePanel则用于展示层次结构的数据,支持动态加载...

    Extjs fieldset两行两列布局

    - 使用`column`布局可以轻松地将元素分成多列。 - `ColumnWidth`属性用于精确控制每列的宽度。 - 在设置`ComboBox`或`DateField`时,可以根据具体需求调整样式和其他属性。 #### 五、代码示例总结 ```javascript ...

    Ext10种布局

    列布局(Column Layout) - **定义**:通过 `Ext.layout.ColumnLayout` 类定义,布局名称为 `column`。 - **特点**: - 将容器视为一列,子元素可通过 `columnWidth` 或 `width` 属性指定其占据的列宽比例。 - `...

    Ext 表单布局实例代码

    在`items`中,我们使用了`layout: 'column'`来创建多列布局。这意味着内部的`items`将按照列进行排列。每列的宽度通过`columnWidth`属性来设定。`layout: 'form'`表示列内的组件按照从上到下的顺序排列。 最后,`...

    ext中文帮助文档最终版

    4. **表格和网格**:EXT 2.0中的GridPanel组件提供了高度可定制的表格功能,包括排序、分页、行编辑和列重排等。这对于展示大量数据非常有用。 5. **树形视图**:TreePanel组件提供了灵活的树形数据结构显示,支持...

    Ext2.0中文文档

    3. **布局管理**:Ext 2.0有多种内置布局,如表布局、流布局、绝对布局等,用于管理组件在容器中的排列方式。布局管理器可以根据容器大小的变化自动调整子组件的位置和大小,确保界面在不同屏幕尺寸下都能正常显示。...

    ExtJs布局教程Ext详细布局

    这种布局模式适用于需要按比例分配空间的场景,比如创建表格或者多列表单。 在文中提到的例子中,作者首先创建了一个窗口(win),其宽度和高度是通过另一个JavaScript文件动态计算得出的,目的是确保窗口始终占据...

    Ext3.0 + 中文API

    5. **表格和数据网格**:Ext3.0的表格功能强大,支持多列排序、分页、行编辑、列隐藏等功能,数据网格则可以展示大量结构化数据,同时支持数据操作。 6. **表单组件**:丰富的表单组件,如文本框、下拉框、复选框、...

    EXT学习心得,ext

    如果一个面板没有设置中心布局(center),它可能不会按预期显示在页面的中心位置,或者在多面板布局中无法正确对齐。因此,对于需要居中显示的组件,如主窗口、对话框或特定的面板,使用`layout: 'center'`是必不可...

    Ext 制作的CSS布局编辑器

    Flexbox主要用于一维布局(行或列),而Grid则支持二维布局,让开发者能够更精确地控制元素的位置和大小。 ExtJS 的CSS布局编辑器可能包含以下功能: 1. **实时预览**:用户可以直观地看到CSS布局的即时效果,无需...

    Ext 3.0 中文文档.zip

    一、Store:在Ext 3.0中,Store是数据管理的核心。它负责存储和管理数据,与各种UI组件(如Grids和Trees)进行交互。Store可以连接到不同的数据源,如JSON、XML或CSV,并提供数据加载、过滤、排序和分页功能。通过...

    ext实例 ext操作步骤

    3. **Column布局**:使用`Ext.layout.ColumnLayout`,将容器视为一列,通过`columnWidth`或`width`属性来设定子组件占据的列宽,适合创建多列并行展示的内容。 4. **Card布局**:由`Ext.layout.CardLayout`定义,只...

    搜集来的ext布局材料

    - `table` 布局:未在代码中出现,用于表格样式的布局,组件按行和列分布。 4. **工具栏(tbar/bbar)**: - `tbar`(top toolbar)和 `bbar`(bottom toolbar)属性用于在面板的顶部和底部添加工具栏,包含多个...

    EXT2.0中文教程

    2.8.2. 添加一行,再把它踢掉 2.8.3. 一切就绪,你可以按保存按钮了。 2.8.4. 天马行空,保证提交的数据绝对有效 2.8.5. 限制类型,让用户只能选择我们提供的数据 2.9. 连坐法,关于选择模型 2.10. 2.0有,1.x里没有...

    ext布局(Layout.html)例子.pdf

    以下是对EXT布局中几种常见布局方式的详细说明: 1. Column布局: Column布局将容器分割成多列,每列的宽度可以通过`columnWidth`指定为百分比,或者通过`width`指定为像素值。例如,如果你想创建三列等宽的布局,...

    ext布局(Layout.html)例子[参考].pdf

    以下将详细介绍EXT布局中的几种主要类型及其应用场景。 1. **Column布局**:此布局将容器划分为多列,每列的宽度可以通过`columnWidth`指定为百分比值。例如,设置`layout: "column"`后,可以分配列的相对宽度,...

Global site tag (gtag.js) - Google Analytics