Extjs复习笔记（四）

lingyibin

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

最近访客更多访客>>

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

查看图片附件

分享到：

Extjs复习笔记（五） | Extjs复习笔记（三）

2010-10-28 20:02
浏览 1309
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

chrome-headless-shell-win64-135.0.7004.0 (Canary).zip: chrome-headless-shell-win64-135.0.7004.0 (Canary).zip

建筑工地个人防护装备分割系统源码＆数据集分享.zip: 建筑工地个人防护装备分割系统源码＆数据集分享

车牌字符识别系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示].zip: 车牌字符识别系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]

实时可调的DDS信号发生器设计：基于FPGA的Verilog编程，灵活控制波形与频率的调制系统,(可实时切波形并控制频率)DDS信号发生器设计 FPGA设计，verilog设计，DDS信号发生器：基: 实时可调的DDS信号发生器设计：基于FPGA的Verilog编程，灵活控制波形与频率的调制系统,(可实时切波形并控制频率)DDS信号发生器设计。 FPGA设计，verilog设计，DDS信号发生器：基于调制方式灵活可控的信号发生器DDS。可生成ASK调制波、FSK调制波、正弦波、矩形波、三角波、锯齿波等多种波形。方案采用三个按键控制，可按键控制不同信号、不同频率输出。按键1:控制切六种波形(ASK调制波，FSK调制波，正弦波，矩形波，三角波，锯齿波)。按键2:每按下一次，频率增加1 10。按键3:每按下一次，频率减小1 10。频率相位可灵活调整。 ,核心关键词： 1. DDS信号发生器设计 2. FPGA设计 3. Verilog设计 4. 调制方式 5. 波形切换 6. 频率控制 7. 按键控制 8. 频率相位调整用分号分隔的关键词结果为：DDS信号发生器设计;FPGA设计;Verilog设计;调制方式;波形切换;频率控制;按键控制;频率相位调整;,灵活控制的FPGA设计：基于DDS技术的信号发生器实现方案

FIRC资源搜索工具.zip: 一个windows上使用的搜索小工具

在线考试系统 2024免费JAVA毕设: 2024免费毕业设计成品，包括源码+数据库+往届论文资料启动教程：https://www.bilibili.com/video/BV11ktveuE2d 讲解视频：https://www.bilibili.com/video/BV1YfkHYwEME 二次开发教程：https://www.bilibili.com/video/BV1Cw2rY1ErC

南大洋印度洋扇区沉积物核心记录的新见解: 标题：基于放射虫和硅藻的温度重建揭示南大洋印度洋扇区表面及亚表面温度变化内容：一项最新的研究在南大洋印度洋扇区的四个沉积物核心中提出了五项新的温度记录。这项研究使用了名为SORAD的数据集作为训练集，应用Imbrie和Kipp方法对经过对数转换的数据进行分析，重建了基于放射虫的亚表面温度（subST）。此外，通过利用Crosta等人于2020年编制的包含249个样本的数据集，并采用现代类似种技术应用于33个硅藻分类单元的相对丰度，预测了基于硅藻的海表温度（SST）。特别地，来自DCR-1PC（Crosta等人，2020年）和MD19-3580（本研究）的核心SST记录以及来自MD19-3575CQ和MD19-3580（本研究）的核心subST记录被重采样至每3千年一个间隔，以便从SST中减去subST在这两个核心站点的值（DCR-1PC/MD19-3575CQ和MD19-3580），从而重建表面与亚表面之间温度差（deltaT）的演变过程。本研究包括了这些重采样数据和deltaT记录，为理解该地区过去气候条件提供了重要线索。

人脸表情行为识别系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示].zip: 人脸表情行为识别系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]

zabbix监控系统软件包: Zabbix 适用于各种规模的企业和组织，特别是那些需要监控复杂 IT 基础设施的用户。以下是一些使用 Zabbix 的优势：开源免费：Zabbix 是开源软件，可以免费使用，且社区活跃，文档丰富。高度可定制：用户可以根据需求自定义监控项、告警规则和报表。跨平台支持：支持多种操作系统（Linux、Windows、Unix等）和数据库（MySQL、PostgreSQL、Oracle等）。强大的社区支持：Zabbix 拥有庞大的用户社区，用户可以轻松找到解决方案和最佳实践。企业级功能：支持高可用性、分布式监控和自动化运维，适合企业级应用。该软件包使用rockylinux8、mysql、nginx。软件使用：解压，createrepo创建本地yum仓库，创建仓库文件，可yum或dnf 下载，详细见：https://blog.csdn.net/m0_74744227/article/details/145389193

豆类苗叶检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示].zip: 豆类苗叶检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]

PHP魔众视频管理系统 v4.1.0.zip: 魔众视频管理系统是由国内领先的技术团队开发商进行开发的，是搭建视频系统最佳选择的程序源码，支持多端同步浏览。魔众视频管理系统，轻量级视频管理系统。 2022年08月19日魔众视频管理系统发布v4.1.0版本，增加了以下27个特性： ·[新功能] 文件上传切片最大2M，分片文件根据配置动态清除 ·[新功能] 图标库中新增cube图标 ·[新功能] UEditorPlus升级到2.3.0 ·[新功能] bodyProperties可为body标签增加属性 ·[新功能] 图标库新增 check-simple ·[新功能] Cookie库新增属性参数 ·[新功能] 后台管理员角色新增备注字段 ·[新功能] Grid编辑操作名称可自定义 ·[新功能] FileUtil新增文件大小精简格式化 ·[新功能] 登录界面全新改版大气美观 ·[新功能] Type类型数据新增导出JS配置文件 ·[新功能] 富文本组件新增 editor-ready 自定义事件 ·[新功能] Response新增停止执行抛出消息的方法 ·[新功能] Grid新增批量弹窗快捷操作方式 ·[新功能] Json组件增加高度可配

永磁同步电机Q15焦点：无传感自适应滑膜算法及SMO-C语言定点代码与仿真模型示例解析,永磁同步电机无传感自适应滑模滑膜观测器(SMO)-示例C语言定点代码和仿真模型，Q15 foc pmsm 使用: 永磁同步电机Q15焦点：无传感自适应滑膜算法及SMO_C语言定点代码与仿真模型示例解析,永磁同步电机无传感自适应滑模滑膜观测器(SMO)_示例C语言定点代码和仿真模型，Q15 foc pmsm 使用“自适应”滑模算法消除一阶滤波器 ,核心关键词：永磁同步电机; 无传感自适应滑模; 滑膜观测器(SMO); C语言定点代码; Q15; foc pmsm; 自适应滑模算法; 一阶滤波器。关键词用分号分隔为：永磁同步电机; 无传感; 自适应滑模; 滑膜观测器(SMO); C语言定点代码; Q15; foc pmsm; 一阶滤波器。,"自适应滑模算法在永磁同步电机中的应用：Q15定点代码与仿真模型示例"

Python泰勒图实现多模型可视化对比：源码高逼格版展示与使用教程,Python高逼格泰勒图及源码~，多模型对比~可视化工具 ,Python; 泰勒图; 高逼格; 多模型对比; 可视化工具,Pytho: Python泰勒图实现多模型可视化对比：源码高逼格版展示与使用教程,Python高逼格泰勒图及源码~，多模型对比~可视化工具 ,Python; 泰勒图; 高逼格; 多模型对比; 可视化工具,Python泰勒图高逼格展示：多模型对比可视化工具源码

基于WOA-XGBoost的回归预测：以优化XGBoost树参数的改进算法研究（基于MATLAB代码，包括评价指标）,基于鲸鱼算法优化极限梯度提升树的数据回归预测(WOA-XGBoost) 鲸鱼算法W: 基于WOA-XGBoost的回归预测：以优化XGBoost树参数的改进算法研究（基于MATLAB代码，包括评价指标）,基于鲸鱼算法优化极限梯度提升树的数据回归预测(WOA-XGBoost) 鲸鱼算法WOA优化极限梯度提升树XGBoost树的数量、树的深度和学习率基于MATLAB环境替自己的数据即可代码注释清晰适合学习回归预测的评价指标包括平均绝对误差均方误差均方根误差平均绝对百分比误差以及关联系数 ,WOA-XGBoost; 鲸鱼算法优化; 树的数量; 树的深度; 学习率优化; MATLAB环境; 代码注释清晰; 回归预测; 评价指标,基于WOA-XGBoost算法的数据回归预测模型

2025最新唯美社区StarFree源码: 介绍：在2025年，随着技术的不断进步和用户需求的多样化，社区平台的设计与功能也在不断演变。StarFree作为一款全新的唯美风格社区源码，凭借其独特的设计理念和强大的功能，迅速成为了开发者与用户关注的焦点。本文将为您详细介绍StarFree源码的特点、功能以及应用场景。 1. 唯美设计，极致视觉体验 StarFree源码以“唯美”为核心设计理念，采用了简约而不失优雅的UI设计。整体界面以柔和的色调为主，搭配流畅的动画效果，为用户带来极致的视觉享受。无论是社区主页、个人中心，还是帖子详情页，每一个细节都经过精心打磨，确保用户在浏览时感受到舒适与愉悦。 2. 模块化架构，灵活扩展 StarFree采用模块化架构设计，开发者可以根据需求自由组合或扩展功能模块。无论是社交互动、内容发布，还是用户管理，每个模块都独立且高效，便于二次开发与定制。这种设计不仅降低了开发难度，还提高了系统的可维护性。 3. 多端适配，无缝体验 StarFree源码支持多端适配，包括Web端、移动端（iOS/Android）以及小程序。无论用户通过哪种设备访问社区，都能获得一致且流畅的体验。源码内置响应式布局

open3d qt6demo示例: open3d qt6demo示例

武理多媒体信息共享平台 2024免费JAVA毕设: 2024免费毕业设计成品，包括源码+数据库+往届论文资料启动教程：https://www.bilibili.com/video/BV11ktveuE2d 讲解视频：https://www.bilibili.com/video/BV1YfkHYwEME 二次开发教程：https://www.bilibili.com/video/BV1Cw2rY1ErC

二维码与条形码检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示].zip: 二维码与条形码检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]

数据集 + 爱琴海翼足类生物丰度数据（1994年9月和12月）: 内容：该数据集由Moraitou-Apostolopoulou, M、Zervoudaki, S和Kapiris, K于2013年发布，提供了1994年9月和12月在爱琴海收集的翼足类（一种浮游软体动物）丰度数据。数据集包含了90个数据点，详细记录了这两个时间点翼足类的数量情况。此研究有助于了解气候变化对海洋生态系统中特定物种的影响。访问以下链接获取完整数据集：请注意，直接点击上述链接将引导您至数据集的官方页面，而非直接下载页面。

大学生志愿者信息管理系统: 1. 用户管理用户注册与登录：支持志愿者（学生）、管理员（指导老师）等角色的注册与登录。角色权限管理：根据不同角色分配相应的权限，如志愿者可以查看活动信息、报名，管理员可以管理活动及志愿者信息。 2. 志愿者信息管理志愿者档案管理：记录志愿者的基本信息，包括姓名、学号、联系方式、专业等。技能特长登记：志愿者可以添加自己的技能、特长，为活动匹配合适的志愿者。 3. 活动管理活动信息发布：管理员可以创建、编辑和删除志愿者活动信息，包括活动名称、时间、地点、人数限制等。活动查询与搜索：志愿者可以查看所有活动，支持按标签、时间等条件搜索活动信息。 4. 报名管理在线报名：志愿者可在线报名参加活动，系统自动更新参与人员信息。报名状态查询：志愿者可以查看自己报名的活动及其状态（已报名、待审核、已结束等）。 5. 反馈与评价活动反馈：参与完活动后，志愿者可以填写反馈表，评价活动内容和组织。统计分析：管理员可以对反馈进行统计分析，改进后续活动的安排。 6. 通知管理消息推送：通过系统向志愿者发送活动提醒、重要通知等。公告板：展示志愿者最新动态、活动报道等信息。 7. 系统管理

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论