ExtJs的Panel组件的简单使用实例，如下代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style type="text/css">
        .contain{
            width:100%;
            height:100%;
            top:0;
            left:0;
        }

        .center{
            position:absolute;
            top:30%;
            left:40%;
            text-align:left;
        }

    </style>

    <title>Panel</title>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/adapter/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function(){
            var _panel=new Ext.Panel({
                title:"注册信息",
                width:300,
                height:200,
                //如果这里的frame属性默认（不写），或者是设置为false，则Panel的背景色为透明的，
                // 而且Panel中添加的组件将会跑到Panel的外面来
                frame:true,
                layout:"form", //指定这个Panel是一个表单
                listeners:{
                    "render":function(_panel){
                        //运行时添加组件的方式
                        _panel.add({xtype:"textfield",fieldLabel:"姓名",id:"userName"});

                        _panel.add(new Ext.form.TextField({
                            id:"address",
                            fieldLabel:"地址",
                            width:150
                        }));
                    }
                }


            });
            //addButton的两种方式:(这里都是设计时的添加组件的方式)
            //1.这种addButton的方式，则是Panel来管理按钮的样式
            _panel.addButton({text:"确 定",listeners:{
                "click":function(){
                    var _userName=Ext.getCmp("userName");
                    var _address=Ext.getCmp("address");
                    alert("用户名为："+_userName.getValue()+"\n地址是："+_address.getValue());
                }
            }
            });
            //2.这种addButton的方式，则是程序员自己管理button的样式
            _panel.addButton(new Ext.Button({
                text:"取  消",
                width:100,
                listeners:{
                    "click":function(){
                        alert("取消");
                    }
                }
            }));

            //在页面注册2个DIV标签，并把Panel渲染到class为center的标签中，从而达到了通过css控制Panel的位置
            _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
                tag:"div",
                cls:"contain",
                cn:[{
                    tag:"div",
                    cls:"center"

                }]

            },true).child("div"));

            //渲染Panel
//            _panel.render(Ext.getBody());

 

        });


    </script>

</head>
<body></body>
</html>

 

 

效果图：