`
lingyibin
  • 浏览: 196437 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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所以这里可以不写。
				},{
					fieldLabel:"密码"
				}],
				buttons:[{
					text:"确 定"
				},{
					text:"取 消"
				}]
			}) ;
		
		_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {
							tag:"div",
							cls:"contain",
							cn:[{
								tag:"div",
								cls:"center"
							}]
					  } , true).child("div")) ;
		
	}) ;
  • 大小: 3.3 KB
  • 大小: 2.5 KB
  • 大小: 3.4 KB
分享到:
评论

相关推荐

    Extjs复习笔记(二十)-- tree和grid结合

    在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    Extjs复习笔记(十五)-- JsonReader

    在“Extjs复习笔记(十五)-- JsonReader”这篇博文中,博主探讨了ExtJS中的JsonReader,这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包(Ext.data)的一部分,用于从服务器获取JSON格式的数据,...

    Extjs复习笔记(十八)-- TreePanel

    在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...

    ExtJS资料笔记(extjs各个属性的详解)

    ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)

    Extjs复习笔记(十一)--换肤

    在EXTJS框架中,换肤是一项重要的功能,它允许开发者根据用户需求或品牌风格改变应用程序的外观和感觉。本文将深入探讨EXTJS的换肤机制,以及如何利用提供的主题CSS文件实现这一特性。 EXTJS是一个强大的JavaScript...

    Extjs复习笔记(十七)-- 给grid里面的内容分组

    本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组,帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类,这样可以更清晰地组织和展示数据。这在处理大量数据时...

    extJs 2.1学习笔记

    23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) ...

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

    Extjs4.0学习笔记

    ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)...

    ExtJS 事件笔记

    本篇笔记将深入探讨ExtJS的事件处理,包括事件登记、事件对象、this的作用域以及ExtJS特有的事件管理方式。 1. **事件登记**: - **内联式登记**:在HTML元素中直接定义事件处理函数,如`onClick="popUp()"`。这种...

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    extjs4.0 笔记大全

    extjs4.0 笔记大全,按照这个笔记来,相信你一定能很快学会的

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录...

    ExtJs简明教程+Extjs学习笔记

    ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~

    ExtJS4.0开发笔记

    ExtJS4.0开发笔记

    extjs 学习心得笔记

    在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...

Global site tag (gtag.js) - Google Analytics