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

ExtJS column布局后labelField无法显示的问题

阅读更多
第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考。column布局时常会碰见label不能显示或者控件显示错位等 问题,导致这些问题的常见原因如下:

1.formPanel上的控件显示不出来,控件的宽度太大,formpanel的宽度相对太小导致。

2. 为FormPanel设定了defaultType属性,没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3. 在每个column里再加上form layout,再在form里加textfield。

4.在新建TabPanel时,将其属性 layoutOnTabChange设置为true即可。(此方法不通用)

在Extjs开发的时候,如果想要并排的显示两个textField或者datefield,那肯定要用column样式的layout,但是当在其items中显示项目的时候,所有的fieldLabel都显示不出来,原因是,其column样式无法显示label,应该在中间层再嵌套一个layout:'form',然后要显示label的项作为此form层的子项即可

var pneast8 = new Ext.Panel({
    region: 'center',
    //    layout:'form',
    frame: true,
    bodyStyle: 'padding:5px 5px 0',
    items: [
    {
        xtype: 'fieldset',
        height: 100,
        width: 500,
        layout: 'column', //解决横向并排的方法
        items: [{
            width:220,
            layout: 'form',
            labelWidth: 60,
            defaults: {width: 120},
            items: [
            {
                xtype: 'datefield',
                fieldLabel: '开始日期',
                name: 'startdt8',
                id: 'startdt8',
                endDateField: 'enddt8' // id of the end date field
            }]
        }, {
            width: 220,
            layout: 'form',
            labelWidth: 60,
            defaults: {width: 120},
            items:[
            {
                xtype: 'datefield',
			    fieldLabel: '结束日期',
			    name: 'enddt8',
			    id: 'enddt8',
			    startDateField: 'startdt8' // id of the start date field/
	        }]
        }
        ]
    }]
})
分享到:
评论

相关推荐

    学习ExtJS Column布局

    在ExtJS众多功能中,Column布局是一个非常实用的布局类型,它允许开发者在容器中灵活地安排子项,按照列的形式排列。通过本篇学习ExtJS Column布局,将会掌握Column布局的基本属性和应用方式,以便在实际开发中能够...

    ExtJs常用布局--layout详解实例代码

    ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...

    ExtJs布局教程Ext详细布局

    总之,ExtJS的Column布局提供了一种强大而灵活的方法来组织和显示多个组件。开发者可以通过精细调整`columnWidth`和`bodyStyle`,实现自定义的列宽和间距,以适应各种界面设计需求。同时,理解布局的原理和规则,...

    Extjs4.1布局与树

    纯Extjs代码,对初学Ext有点点帮助

    ExtJS布局之border实例

    资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...

    extjs页面布局生成器

    很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...

    Extjs中布局的组合使用中文WORD版

    资源名称:Extjs中布局的组合使用 中文WORD版内容简介:本文档主要讲述的是Extjs中布局的组合使用;Extjs4.1中布局很经典,也很好用,关键是如何组合布局,组合布局,不仅要达到我们想要的界面效果,还要注意因为...

    ExtJS4.1布局后台系统

    用ExtJS4.1布局后台系统,这个是自写的js,extjs4.1的源码包,需要到extjs.org.cn下载。

    Extjs布局实例

    Extjs布局实例

    ExtJS之布局详解

    - **列布局(ColumnLayout)**:使用`layout: "column"`,子组件按列排列,可通过`columnWidth`或`width`指定列宽。 - **填充布局(FitLayout)**:通过`layout: "fit"`,使子组件完全填充其容器,适用于需要...

    ExtJs4 layout 布局

    ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助

    ExtJS3.2列布局

    列布局(Column Layout)是ExtJS的一种布局策略,它允许你在同一行内创建多个并排显示的区域,每个区域可以包含不同的组件,如文本框、选择框、按钮等。这种布局方式非常适合用来构建表格化的表单,使得数据输入和...

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    Extjs折叠布局中添加树

    在ExtJS中,折叠布局(Accordion Layout)是一种特殊的布局方式,它将所有子组件(Panels)垂直堆叠,并且在任何时刻只允许一个面板展开显示其内容,其他面板则保持折叠状态。`layout: 'accordion'` 就是用来设置...

    ExtJs4.2首页布局示例

    左边菜单,右边是内容,北边是log图片 简单首页布局示例

    Extjs之布局

    ### Extjs布局详解 在深入探讨Extjs布局之前,我们先简单回顾一下Extjs是什么。Extjs是一款基于JavaScript的企业级富客户端应用框架,它提供了一系列的UI组件和强大的数据处理能力,使得开发者能够构建出高性能的...

    extjs本地布局编辑器

    extjs本地布局编辑器~开发extjs的好工具,推荐下载。html页面,方便

    ExtJS布局练习例

    文件中的示例使用了`column`布局,这是ExtJS中的一种常用布局方式,用于将子元素按列排列。例如,在代码中,可以看到一个`Ext.Panel`对象被创建,并指定了`layout:'column'`,这意味着所有包含在`items`数组中的子...

    extjs4中panel的accordion布局以及treepanel导航

    这种布局模式常用于空间有限但需要显示多个相关但内容独立的部分的情况,如设置面板或选项卡。 使用accordion布局有以下几点需要注意: 1. 每个子Panel的`layout`属性应设置为`'accordion'`,这样它们才能在父Panel...

Global site tag (gtag.js) - Google Analytics