Ext学习笔记一（使用Ext.Panel创建一个登录面板）

来源：互联网发布：hypervisor软件编辑：程序博客网时间：2024/05/16 13:49

Ext1.0的写法

<html>
  <head>
    <title>登录面板程序</title>
    <link rel="stylesheet" type="text/css" href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function() {
        var _panel = new Ext.Panel({
            frame: true,
            layout:"form",
            width: 260,
            height: 130,
            labelWidth: 70,
            title: "登录",
            listeners:{
                "render": function(p) {
                    p.add(new Ext.form.TextField({
                            id: "txt_name",
                            fieldLabel: "登录账号",
                            width: 160
                         })
              );
              p.add(new Ext.form.TextField({
                            id: "txt_psd",
                            fieldLabel: "登录密码",
                            width: 160
                         })
              );
                 }
            }
        });
        _panel.addButton({text:"确 定", handler: function(){alert("你输入了：" + Ext.getCmp("txt_name").getValue()); }});
        _panel.addButton({text:"取 消", handler: function(){alert("你输入了：" + Ext.getCmp("txt_name").getValue()); }});
        _panel.render(Ext.getBody());
        
      });   
    </script>
  </head>
  <body>
  </body>
</html>

Ext2.0的写法

<html>
  <head>
    <title>登录面板程序</title>
    <link rel="stylesheet" type="text/css" href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function() {
        var _panel = new Ext.Panel({
            frame: true,
            layout:"form",
            width: 260,
            height: 130,
            labelWidth: 70,
            title: "登录",
            defaults: {xtype:"textfield", width: 160},
            items:[{
                fieldLabel: "登录账号"
            },{
                fieldLabel: "登录密码"
            }
            ],
            buttons:[{
                text: "确 定"
            },{
                text:"取 消"
            }
            ]
        });
        _panel.render(Ext.getBody());
      });   
    </script>
  </head>
  <body>
  </body>
</html>