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)


Extjs复习笔记(四)Extjs复习笔记(四)

 

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、有了上面的基础,我们来写一个登陆框。


Extjs复习笔记(四)

 

	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")) ;
		
	}) ;

你可能感兴趣的:(JavaScript,html,css,XHTML,ext)