天天看点

Ext Window布局以及空间基本使用

<html>

<head>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" target="_blank" rel="external nofollow" />

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-all.js"></script>

<script>

Ext.onReady(function(){

 new Ext.Window({

  title:"添加人员",

  width:500,

  height:380,

  plain:true,

  layout:"form",

  defaultType:"textfield",

  labelWidth:55,

  bodyStyle:"padding:5px",

  items:[

  {

   xtype:"panel",

   baseCls:"x-plain",   

   layout:"column",

   items:[{

    columnWidth:.5,

    layout:"form",

    labelWidth:55,

    defaultType:"textfield",

    defaults:{width:160},

    baseCls:"x-plain",

    items:[{

     fieldLabel:"姓名"

    },{

     fieldLabel:"年龄",

     readOnly:true

    },{

     xtype:"datefield",

     format:"Y-m-d",

     value:"1988-04-22",

     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:"性别"

    }]

   },{

    columnWidth:.5,

    layout:"form",

    labelWidth:55,

    baseCls:"x-plain",

    items:{

     xtype:"textfield",

     fieldLabel:"个人照片",

     width:160,

     height:177,

     inputType:"image"

    }

   }]

  },{

   bodyStyle:"padding:5px",

   fieldLabel:"身份证号",

   width:400

  },{

   bodyStyle:"padding:5px",

   fieldLabel:"具体地址",

   width:400

  },{

   bodyStyle:"padding:5px",

   fieldLabel:"职位"

  }],

  showLock:false,

  listeners:{

   "show":function(_window){

   if(!_window["showLock"])

   {

   }

    _window.findByType("textfield")[7].getEl().dom.src="C://Documents and Settings//Administrator//桌面//图片//0.jpg";

    _window["showLock"]=true;

   }

  },

  buttons:[{

   text:"确定"

  },{

   text:"取消"

  }]

 }).show();

})

</script>

</head>

<body>

</body>

</html>