Extjs复习笔记（四）

lingyibin

浏览: 196424 次
性别:
来自: 长沙

最近访客更多访客>>

apex53

辽东小小

bsll

我们快跑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Extjs等js的Ajax框架

EXT JavaScript CSS XHTML HTML

在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所以这里可以不写。
				},{
					fieldLabel:"密码"
				}],
				buttons:[{
					text:"确 定"
				},{
					text:"取 消"
				}]
			}) ;
		
		_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
							tag:"div",
							cls:"contain",
							cn:[{
								tag:"div",
								cls:"center"
							}]
					  } , true).child("div")) ;
		
	}) ;