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

extjs多列显示

阅读更多
var detailForm = new Ext.FormPanel({   
        id:"detail",   
        layout:"form",   
        labelWidth: 60,   
        labelAlign:"right",   
        border:false,   
        frame:true,   
        width: 600,//宽度设置要合理,如果FormPanel的宽度小于控件的宽度,column布局时控件不能正常显示   
        height:400,   
//      autoHeight:true,   
//      defaultType: 'textfield',//column布局时不能设置该属性,否则不能正常显示   
        items: [{//第一行   
            layout:"column",   
            items:[{   
                columnWidth:.3,//第一列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同编号',   
                    name: 'contractId',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第二列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同名称',   
                    name: 'contractId1',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第三列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同',   
                    name: 'contractId2',   
                    width:100   
                    }]   
            }]},//第一行结束   
            {//第一行   
            layout:"column",   
            items:[{   
                columnWidth:.3,//第一列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同编号',   
                    name: 'contractId',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第二列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同名称',   
                    name: 'contractId1',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第三列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同',   
                    name: 'contractId2',   
                    width:100   
                    }]   
            }]},//第一行结束   
            {//第一行   
            layout:"column",   
            items:[{   
                columnWidth:.3,//第一列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同编号',   
                    name: 'contractId',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第二列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同名称',   
                    name: 'contractId1',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第三列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同',   
                    name: 'contractId2',   
                    width:100   
                    }]   
            }]}//第一行结束   
           ]   
      });

 

分享到:
评论

相关推荐

    ExtJS3.2列布局

    总结来说,ExtJS3.2的列布局是一个强大的工具,能够帮助开发者轻松地构建多列的form表单。配合灵活的样式定制,可以实现美观且功能丰富的用户界面。理解并熟练运用这一布局模式,对于提升Web应用的用户体验至关重要...

    Extjs4.0 列隐藏和滚动条动态加载

    Grid Panel是ExtJS中用于展示数据的主要组件,它支持多列、排序、过滤和分页等功能。在4.0版本中,Grid Panel的可定制性和性能得到了增强。列可以设置各种样式、对齐方式、宽度,并可以添加自定义的编辑器和渲染器...

    ExtJS 使用grid显示数据

    这篇博客文章 "ExtJS 使用grid显示数据" 可能详细阐述了如何利用ExtJS的Grid面板来展示和操作数据。 在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    - 当 `ComboBox` 的下拉列表需要展示复杂数据结构时,如多列或带有自定义样式的数据,可以使用 `GridComboBox`。 - `GridComboBox` 可以设置为单选或多选模式,根据业务需求选择合适的交互方式。 4. **配置与实现...

    ExtJS grid过滤操作

    - **Column Filters**:在列头中显示过滤图标,用户可以直接在列上设置过滤条件。 2. **动态操作** - **创建过滤器**:通过`grid.columns[i].filter`属性为特定列创建过滤器,并设置初始过滤条件。 - **应用过滤...

    extjs 数据导出到Excel,数据列自选

    EXTJS Grid的列可以通过配置进行隐藏或显示,用户可以通过交互式菜单或者按钮来控制。在实现时,可能需要监听列的显示/隐藏事件,更新一个列选择列表,然后在导出时参考这个列表。 “中文不会有乱码问题”意味着在...

    extjs3多表头

    在ExtJS 3中,多表头(Multi-Header)功能允许用户创建复杂的、多层次的表格列布局,以更好地组织和展示数据。这种功能在数据展示和分析时非常有用,尤其是在处理大量信息时,可以提高用户体验和数据可读性。 多...

    给Extjs的GridPanel增加“合计”行

    在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要...

    extjs扩展标记

    - **TabPanel**:用于组织多个视图,每个视图都可以在一个标签页中展示。 - **FormPanel**:用于创建各种表单,支持多种输入控件,如文本框、复选框、下拉框等,有验证和提交数据的能力。 - **Panel**:基础...

    extjs grid 多表头插件

    在ExtJS Grid中,多表头能够帮助用户更清晰地理解列的分组和关系,提高数据的可读性和分析性。 首先,我们来详细解释一下多表头的概念。在传统的表格中,表头通常只有一个层次,而在多表头中,我们可以设置多个层次...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    Extjs6 下拉列表

    - GridCombo通过`store`连接到数据源,数据源可以包含多列,其中一列作为ComboBox的值,其他列则在下拉列表展开时显示为表格格式。 - GridCombo的`displayField`和`valueField`依然适用,但可以扩展到多个字段,...

    ExtJs Filter 表格过滤

    5. **多条件过滤(Multiple Filters)**:用户可以为不同列设置多个过滤条件,这些条件可以组合成逻辑“与”或“或”关系,提供更灵活的筛选能力。 6. **自定义过滤器(Custom Filters)**:除了内置的过滤器类型,...

    EXTJS2.2.1中Grid表头的下拉菜单很难看

    1. **更新EXTJS版本**:尽管升级到最新版本可能会带来更多的功能和更好的样式,但是这需要确保与现有代码库的兼容性。 2. **自定义CSS样式**:通过编写和应用自定义CSS样式,可以精确控制Grid表头下拉菜单的外观。...

    一个非常好的用extjs开发的股票信息显示的例子

    ExtJS是一种基于JavaScript的开源富客户端框架,由Sencha公司开发,主要用于构建桌面Web应用程序。...通过深入学习和实践,开发者可以利用ExtJS的强大功能,创建出更多功能丰富的股票分析或者其他数据展示应用。

    extjs grid

    5. **排序**:EXTJS Grid支持单列或多列排序,只需点击列头即可改变排序顺序。排序配置项如`sortable`定义列是否可排序,`sortInfo`设置初始排序状态。 6. **过滤**:Grid可以添加过滤器来筛选数据,用户可以根据...

    extjs 动态表格完整版

    同时,`store.load()`方法可以按需加载更多数据。 4. **列动态添加和移除**:在运行时,可以使用`addColumn`和`removeColumn`方法动态添加或移除列,适应不同场景的需求。 5. **表格编辑**:ExtJS提供两种编辑模式...

    ExtJs开发实战

    3. 动态列显示:在数据展示时,用户可能需要根据自己的需求选择显示哪些列。ExtJs支持列的动态显示和隐藏,开发者可以灵活控制哪些列需要显示或隐藏。 4. 本地及远程分页:随着数据量的增大,直接展示所有数据变得...

    EXTJS 行列转换

    EXTJS 行列转换是一种在...以上就是一个简单的EXTJS行列转换并实现分页的示例,实际应用中可能还需要处理更多的细节,如错误处理、动态加载列等。EXTJS的灵活性和强大的数据处理能力使得这种复杂的数据展示变得可能。

Global site tag (gtag.js) - Google Analytics