RSS

Ext.window III (de dojochina)

01 Aug

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

<html>

  <head>

    <metahttp-equiv=“Content-Type”content=“text/html; charset=utf-8”>

    <title></title>

    <linkrel=“stylesheet”href=“../../resources/css/ext-all.css”/>

    <scripttype=“text/javascript”src=“../../adapter/ext/ext-base.js”></script>

    <scripttype=“text/javascript”src=“../../ext-all.js”></script>

  </head>

  <body>

  <scripttype=“text/javascript”>

       /*

       * 默认的布局是panel的,如果定义了默认布局,要修改,就用xtype

       * _window.findByType(“textfield”)[7].getEl().dom.src = “../image/pic.jpg”

       * findByType根据xtype查询

       * 不能使用render来添加该监听listener,因为render只是load大框架,

       * 这里使用show来监听,show是所有组件都加在才秀出来

       * 为了提高程序性能,自定义一个属性showLock,默认值为false

       * 在时间里锁定它的值,可以避免重复加载。

       */

      Ext.onReady(function () {

          new Ext.Window({

              title: “添加人员”,

              width: 500,

              height: 350,

              plain: true,

              layout: “form”,

              defaultType: “textfield”,

              labelWidth: 65,

              items: [{

                  xtype: “panel”,

                  style: “padding:5px”,

                  layout: “column”,

                  baseCls: “x-plain”,

                  items: [{

                      columnWidth: .5,

                      layout: “form”,

                      defaultType: “textfield”,

                      defaults: {

                          width: 160

                      },

                      baseCls: “x-plain”,

                      labelWidth: 60,

                      items: [{

                          fieldLabel: “姓名”

                      }, {

                          fieldLabel: “年龄”

                      }, {

                          fieldLabel: “出生日期”

                      }, {

                          fieldLabel: “联系电话”

                      }, {

                          fieldLabel: “手机号码”

                      }, {

                          fieldLabel: “电子邮件”

                      }, {

                          fieldLabel: “性别”

                      }]

                  }, {

                      columnWidth: .5,

                      layout: “form”,

                      baseCls: “x-plain”,

                      labelWidth: 55,

                      items: {

                          xtype: “textfield”,

                          fieldLabel: “个人照片”,

                          inputType: “image”,

                          width: 170,

                          height: 175

                      }

                  }]

              }, {

                  fieldLabel: “身份证号”,

                  width: 410

              }, {

                  fieldLabel: “具体地址”,

                  width: 410

              }, {

                  fieldLabel: “职位”,

                  width: 410

              }],

              showLock: false,

              listeners: {

                  “show”: function (_window) {

                      if (!_window.showLock) {

                          _window.findByType(“textfield”)[7].getEl().dom.src =“../image/pic.jpg”;

                          _window[“showLock”] =true;

                      }

                  }

              },

              buttons: [{

                  text: “确定”

              }, {

                  text: “取消”

              }]

          }).show();

      });

  </script>

  </body>

</html>

Advertisements
 
Leave a comment

Posted by on 08/01/2009 in EXTJS

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: