小弟我们爱分享-Ext经验谈（一）

我们爱分享----Ext经验谈（一）
由于最近项目抓紧时间结项，所以时间不是很多，每次只能讲解1~2个经验了
废话不多说先看图：
小弟我们爱分享-Ext经验谈（一）
这张图是有问题的，大家可以看见很明显填报时间显示的日期空间不够，我想要的效果是：
填报时间显示的日期空间够用了而且还很紧凑
但是我调控出来的效果如下图：

好了下面开始上代码

/**
 * Ext JS Library 2.0 Extend
 * Crim Widget Libraries
 *
 * http://sourceforge.net/projects/Crim
 */
Ext.namespace('Crim.enterprisedatacollect.jinengjianpai');

/**
 * 新增用户表单
 * @class Crim.security.user.AddUserFormPanel
 * @extends Ext.FormPanel
 * @constructor
 *
 * @param {Object} config The configuration options
 */
Crim.enterprisedatacollect.jinengjianpai.AddFormPanel = function(config){

    // 初始化表单
    Crim.enterprisedatacollect.jinengjianpai.AddFormPanel.superclass.constructor.call(this, Ext.applyIf(config, {
        labelAlign: 'left',
        buttonAlign: 'right',
        labelWidth: 90,
        baseCls: 'x-plain',
        layout: 'form',
        items: [{
            xtype: 'fieldset',
            title: '2011年第一季度',
            autoHeight: true,
            bodyStyle: 'padding:0 0 0 60;',
            layout: 'column',
            defaults: {
                layout: 'column',
                baseCls: 'x-plain'
            },
            items: [{
                defaults: {
                    layout: 'form',
                    baseCls: 'x-plain'
                },
                items: [{
                    columnWidth: 1,
                    defaultType: "textfield",
                    defaults: {
                        anchor: "50%", 
 
                        labelStyle: 'width:200;'
                    },
                    items: [{
                        fieldLabel: '本季职工工资总额(万元)'
                    },{
                        fieldLabel: '本季职工平均人数(人)'
                    },{
                        fieldLabel: '本季职工增加人数(人)'
                    },{
                        fieldLabel: '本季末职工人数(人)'
                    },{
                        fieldLabel: '本季从业人员劳动报酬(万元)'
                    },{
                        fieldLabel: '本季从业人员平均人数(人)'
                    },{
                        fieldLabel: '本季末从业人员人数(人)'
                    },{
                        fieldLabel: '本季职工减少人数（不含自然减员）'
                    }]
                }]
            },{
                defaults: {
                    layout: 'form',
                    baseCls: 'x-plain'
                },
                items: [{
                columnWidth: 0.5,
                items: [{
                    xtype: 'label', 
 
                    fieldLabel: '填报时间',
labelStyle: 'width:80;',
value:'2011-06-10',
                    anchor: '70%'
                }]
            }, {
                columnWidth: 0.5,
                items: [{
                    xtype: 'textfield',
                    fieldLabel: '填报人',
labelStyle: 'width:60;',
                    anchor: '60%'
                }]
            }]
            }]
        }]
    }));
}

Ext.extend(Crim.enterprisedatacollect.jinengjianpai.AddFormPanel, Ext.FormPanel, {});

这个代码是我自定义的formpanel 其中labelWidth: 90属性是控制fieldLabel文本的长度这里我们设置宽度为90，是为了满足绝大部门控件的需求，但是填报时间和填报人就显的太长了后面的日期显示都变成了竖排，可是我明明属性里设置了 labelStyle: 'width:60;'宽度为60，为什么填报时间和日期之间距离那么大？后来经过我多次测试终于得出结论
：在formpanel里面的labelWidth属性是默认值，而且你之后单独指定labelWidth的时候（单独指定我这里用的是：labelStyle：‘width：60；’这个属性）必须要大于这个宽度才有效，我通过firefox查看了一下生产的html发现了最终的原因：就是每一个xtype定义的时候他的fieldlabel和具体数值都是被一个span包涵，他的宽度是labelWidth觉得的，但是我后来在单独指定的时候ext只是在那个包涵fieldLabel的span里面在加一层span并指定宽度为设定的，所以你要你设定的宽度小于formpanel属性labelWidth的宽度，效果是看不见的。所以大家以后在定义labelWidth的时候尽量小点，不然会没效果。

好了又有任务下来了，不能说了，最后说一下那个我的截图里大家应该看见了只有Y轴滚动条，这个是这设置了bodyStyle：‘overflow-x:hidden;overflow-y:auto;',就可以了还要把包含该控件的autoScroll属性设置成true才行。今天就到这里。
[解决办法]
咱也有用过，学习了~
[解决办法]
我也用段时间适合企业级开发
[解决办法]
b不错
[解决办法]
咱没有用过，学习了~
[解决办法]
学习下哈!
------解决方案--------------------

纯粹来学习！
[解决办法]
个人觉得Ext控件版Coolite Toolkit要比这个好用，配置页面比较简单，也不用写那么多代码。
[解决办法]
正在使用中，学习下。。
[解决办法]
呵呵，很好很强大！
[解决办法]
我就看看不说话
[解决办法]
en hao
[解决办法]
Mark ………………
[解决办法]
学习学习

小弟我们爱分享-Ext经验谈（一）

热点推荐