您的位置：首页 > Web前端 > JavaScript

ExtJs的Panel组件的简单使用

2011-02-12 00:19 489 查看

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>

效果图：

本文出自 “Mr__Lee__Home” 博客，谢绝转载！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航