ExtJS3.0之人员信息实例一

本人在运行这个实例时，在IE6中是空白，什么都不显示。在FF中正常。原创作者不知在IE中测试过没>

 

下面来看一个比较复杂的人员信息实例，实例功能登记人员信息，人员的出生日期跟年龄互动，代码如下：

 /// 
Ext.onReady(function(){
     var person = new Ext.FormPanel({ 
            baseCls:"x-plain",
//            style:"padding:5px",
            layout:"column",
            items:[{
                columnWidth:.5,
                layout:"form",//form布局
                labelWidth:55,
                baseCls:"x-plain",
                defaultType:"textfield",
                defaults:{width:160},
                items:[{
                    fieldLabel:"姓名"
                },{
                    fieldLabel:"年龄",
                    value:"29",
                    readOnly:true
                },{
                    xtype:"datefield",
                    format:"Y-m-d",      //格式化日期，默认：'m/d/Y'
                    value:"1981-10-15",
                    readOnly:true,       //设为只读
                    fieldLabel:"出生日期",
                    listeners:{
                        "blur":function(_df){  //监听失去焦点事件，年龄随着出生日期改变
                            var _age = _df.ownerCt.findByType("textfield")[1];
                            _age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1);
                        }
                    }
                },{
                    fieldLabel:"联系电话"
                },{
                    fieldLabel:"手机"
                },{
                    fieldLabel:"电子邮件"
                },{
                    xtype:"combo",
                    fieldLabel:"性别",
                    typeAhead: true,
                    triggerAction: 'all',//选择模式
                    lazyRender:true,
                    value:1,
                    mode: 'local',
                    store: new Ext.data.ArrayStore({
                        id: 0,
                                
                            'myId',
                            'displayText'
                        ],
                        data: [[1, '男'], [2, '女']]
                    }),
                    valueField: 'myId',
                    displayField: 'displayText'
                }]
            },{
                columnWidth:.5,
                layout:"form",
                labelWidth:55,
                baseCls:"x-plain",
                items:{
                    xtype:"textfield",
                    fieldLabel:"个人照片",
                    width:170,
                    height:177,
                    inputType:"image"
                }
            }]
        });            
    var win = new Ext.Window({ 
        title:"添加人员",
        width:500,
        height:355,
        plain:true,
        layout:"form",
        labelWidth:59,
        defaultType:"textfield",
        defaults:{anchor:"98%"},
        
         bodyStyle:"padding:5px",//整个窗口统一设置内边距
        items: [person,{
            fieldLabel:"身份证号",
            width:409
        },{
            fieldLabel:"具体地址",
            width:409
        },{
            xtype:"combo",
            fieldLabel:"职位",
            anchor:"50%",
            typeAhead: true,
            triggerAction: 'all',//选择模式
            lazyRender:true,
            value:4,
            mode: 'local',
            store: new Ext.data.ArrayStore({
                id: 0,
                fields: [
                    'myId',
                    'displayText'
                ],
                data: [[1, '程序员'], [2, '工程师'],[3,'主管'],[4,'经理']]
            }),
            valueField: 'myId',
            displayField: 'displayText'
        }],
        showLock:false,  //自定义一个开关，为了保证图像只加载一次
        listeners:{
//            "render":function(_window){              //事件render：当当前对象被正确构造后触发使用，_window.findByType("textfield")[7].getEl()取出来是'undefined'
////                Ext.MessageBox.alert("提示",_window.findByType("textfield")[7].fieldLabel);
//                alert(_window.findByType("textfield")[7].getEl());
//            }
            "show":function(_window){
//                Ext.MessageBox.alert("提示",_window.findByType("textfield")[7].fieldLabel);
//                alert(_window.findByType("textfield")[7].getEl());
                if(!_window["showLock"]){
                    var _img = _window.findByType("textfield")[7];
                    _img.getEl().dom.src="images/sun_blog.jpg";
                    
                    _window["showLock"] = true;
                }
//                    var _job = _window.findByType("combo")[1];
//                    var _store = _job.store;//getStore();
//                    _job.setValue(_store.getAt(0).get("job"));
            }
        },
        buttons:[{
                text:"确定",
                handler:function(){  //属性renderTo：将当前对象所生成的HTML对象存放到指定的对象中
                    alert(this.ownerCt.buttons);
//                    alert(this.ownerCt.items.itemAt(1));
                }
            },{
                text:"取消"
            }] 
    });  
    win.show();
});
 

　　执行上述代码，如下图所示：

　　年龄随着出生日期改变，如下图所示：