ExtJS——添加个用户页面

效果图如上

源代码为：

   

Ext.onReady(function() {

        new Ext.Window({

            title : "添加人员",

            width : 500,

            height : 400,

            plain : true,

            items:[{

                xtype:"panel",

                layout:"column",

                style:"padding:5px",

                baseCls:'x-plain',

                items:[{

                    columnWidth:.5,

                    layout:"form",

                    labelWidth:55,

                    baseCls:'x-plain',

                    defaultType:"textfield",

                    items:[{

                        fieldLabel:"姓名"

                    },{

                        fieldLabel:"年龄"

                    },{

                        fieldLabel:"出生日期"

                    },{

                        fieldLabel:"联系电话"

                    },{

                        fieldLabel:"手机号码"

                    },{

                        fieldLabel:"电子邮件"

                    },{

                        fieldLabel:"性别"

                      

                    }]

                },{

                    columnWidth:.5,

                    layout:"form",

                    baseCls:'x-plain',

                    labelWidth:55,

                    items:[{

                        xtype:"textfield",

                        inputType:"image",

                        width:220,

                        height:220,

                        fieldLabel:"个人照片"

                    }]

                      

                }]

            },{

                xtype:"panel",

                layout:"form",

                baseCls:'x-plain',

                labelWidth:55,

                style:"padding:5px",

                items:[{

                    xtype:'textfield',

                    fieldLabel:"你好",

                    width:350

                }]

            }],

            showLock:false,

            listeners:{

                  

                "show":function(win){//当window show的时候才会显示在进行图片显示的时候添加

                    if(!win["showLock"]){

                        win.findByType("textfield")[7].getEl().dom.src = "default_pic.gif"//得到元素EL是ExtJs的，在.dom获得html的内容

                        win["showLock"] = true

                    }

                    //如何防止window中的图片被多次加载可以使用：

                      

                }              

            },

            buttons:[

                    {text:"确 定"},{

                    text:"取 消"

                }

            ]

        }).show();

    });

知识点：

首先需要明白是如何布局的：

   

   

   

   

   

   

   

   

   

   

   

   

注意panl的布局

知识点：

如果为引入一张图片呢，在window show方法执行的时候，可以通过win.findByType("textfield");得到一个textfield的数组对象，可以通过该数组的下表来找到对应的textfield，A

通过A.getEl()可以获得ExtJs元素对象B

有B.dom可以获得html元素对象，在通过该对象的src可以指定图片的位置

在window自定义名称，通过win["name"]该那么为自定的名称来访问或者修改变量，当然也可以通过win.showLock来得到该属性

   

   

   

   

   

   

   

红色的部分是个window

一个panl使用的列布局一个是个人信息表

另一个是个人照片

下面的布局，你好表单

   

buttons所在的位置