Extjs温习笔记（四）
日期：2014-05-16 浏览次数：20533 次
Extjs复习笔记（四）
在panel上加组件
?
1、设置大小，并加上按钮：
?
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:200,
height:300
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消"})) ;
_panel.render(Ext.getBody()) ;//把_panel绑到页面中去
}) ;
?其中frame:true指定有边框，使四个角变成圆角，并填充其中的颜色。如下，做一个比较(左边有frame:true)
?
2、再加两个输入框
有两种添加方法，如下：
?
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:300,
height:200,
layout:"form",
listeners:{
"render":function(_panel){
//“{}”表示一个类，用xtype指定类型
_panel.add({xtype:"textfield" , fieldLabel:"姓名"}) ;
//直接new 一个类
_panel.add(new Ext.form.TextField({
fieldLabel:"地址"
})) ;
}
}
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;
_panel.render(Ext.getBody()) ;
}) ;
?
3、让panel不靠边：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<title>不顶边面板</title>
<style type="text/css">
#contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center {
position:absolute;
top:30%;
left:43%;
text-align:left;
}
</style>
<script type="text/javascript" src="../../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../../ext-all.js">
</script>
<script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人员信息",
frame:true,
width:200,
height:300
}) ;
_panel.addButton({text:"确 定"}) ;
_panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
tag:"div",
id:"contain", //相当于<div id="contain"></div>
cn:[{
tag:"div",
cls:"center" //相当于<div class="center"></div>
}]
} , true).child("div")) ; //这边的true下面会讲到
}) ;
</script>
</head>
<body>
</body>
</html>
上面在applyToMarkup中动态地创建两个div元素，官方解释：Apply this component to existing markup that is valid. With this function, no call to render() is required.
其中有个“true”，它是append的第三个参数，表示返回的是Ext里面的元素，而不是一个html元素
child表示contain下面的center，因为append的内容是contain，而我们要把东西加到center上，所以取其孩子。
?
renderTo:指定到某个组件上
applyTo:在当前给定的对象之上构建组件，该对象就成为其父元素。
这两个没有什么本质的区别。只是位置有点不同，使用时可以不必太在意。
?
4、有了上面的基础，我们来写一个登陆框。
?
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"登 陆",
frame:true,
width:260,
height:130,
layout:"form",
labelWidth:45, //设置一下标签的宽度
defaults:{xtype:"textfield" , width:180}, //默认类型为textfield
items:[{ //这里面用items来添加组件。items指定的是一个数组，用“[]”引起来
fieldLabel:"账号" //上面已经默认为textfield所以
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
