`
xiaozhi7616
  • 浏览: 198850 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext学习笔记04 - UI组件 - Component, Button

    博客分类:
  • Ext
阅读更多

 

Component

 

在Ext中对常用的UI组件都进行了一系列的封装,而各个组件都具有一些相同的属性或者事件,这些相同的属性被封装起来成为Component类,每个UI组件都继承Component类,可见Ext在面向对象方面有很好的实现。看一下Component中的定义:

//构造方法,传入config参数
Ext.Component = function(config){
	config = config || {};
	if(config.initialConfig){...};
	this.initialConfig = config;
	Ext.apply(this, config);
	this.addEvents(...);
	this.getId();

	Ext.ComponentMgr.register(this);
	Ext.Component.superclass.constructor.call(this);

	if(this.baseAction){
	        this.baseAction.addComponent(this);
	}

	//初始化组件
	this.initComponent();

	if(this.plugins){....}

	//初始化状态
	if(this.stateful !== false){
	        this.initState(config);
	}

	if(this.applyTo){....}
};

// private
Ext.Component.AUTO_ID = 1000;

//继承Observable,实现事件机制
Ext.extend(Ext.Component, Ext.util.Observable, {
	blur : function(){....},
	focus:function(){....},
	enable: function(){....},
    
	.......
});

通过继承Observable,所有的UI Component都实现了事件机制,在使用的过程中可以方便的注册我们所需要的事件。

 

 

Button

对传统的Button,Submit,Reset进行封装,在放置Ext文件的source → widgets 目录下找到 Button.js 源文件,我们可以看到

Ext.Button = Ext.extend(Ext.Component, {.....});

 

可见Button是继承于Component类,  Button可以直接使用父类中定义的构造方法和事件机制。

 

看一个简单的例子:

<script type="text/javascript">
	Ext.onReady(function() {
		new Ext.Button({
			renderTo:Ext.getBody(),
			text:"确定"
		});
	});
</script>

 

构造方法中涉及的参数:

  • renderTo:将当前对象所生成的HTML对象放到指定的对象中,这个例子中就是把new 出来的Button对象放到页面的Body中
  • Ext.getBody:Ext中封装Dom Element的Body对象,在document.body的基础上进行的封装,document.body = Ext.getBody.dom
  • text:按钮上显示的文字

 

看一个漂亮的Button就出来了: ,和通常HTML中的Button明显不一样吧,EXT不但封装了UI Component中的属性、方法、事件,连显示的样式一样做了很好的封装,还有一点要啰嗦的,就是new 一个 Component 出来一定最后是以HTML对象表现出来的,这样浏览器才可以进行解析,也就是不管怎么花哨怎么变,最终的结果还得回到根儿上来。

 

 

 

来看Button中的一些常用的构造参数、属性、方法和事件: 

 

再看一个例子:

<script type="text/javascript">
	Ext.onReady(function() {
		var _button = new Ext.Button({
			renderTo:Ext.getBody(),
			text:"确定",
			minWidth:100,
			handler:function() {
				alert("this Button be clicked!");
			}
		});
		
		alert(_button.text);
		
		_button.setText("Hello World");
		
		alert(_button.text);
		
	});
</script>

 

 

构造参数

  • handler:指定一个函数句柄,在默认事件触发是调用,这里的默认事件是click
  • listeners:在对象初始化之前,就将一系列事件定义的手段,在进行组件化编程时,非常有用
  • 简单应用只有一个事件的时候只需要定义handler就可以了,如果响应的事件比较多需要定义listeners
  • listeners的使用:
  • <script type="text/javascript">
    	Ext.onReady(function() {
    		var _button = new Ext.Button({
    			renderTo:Ext.getBody(),
    			text:"确定",
    			minWidth:100,
    			
    			listeners:{
    				"click":function() {
    					alert("fired listeners property");
    				}
    			}
    		});	
    	});
    </script>
    
     
  • 另外一种订阅事件的方法 on ,在上一篇  事件  部分中已经介绍过,实际调用的是addListener()方法
  • Ext.onReady(function() {
    		var _button = new Ext.Button({
    			renderTo:Ext.getBody(),
    			text:"确定"
    		});
    		
    		_button.on("click", function() {
    			alert("fired add listener event");
    	});

属性

  • minWidth:按钮的最小宽度,注意:这里是没有单位的,不能在数值后面加上px、em等单位
  • text:和构造参数中的text不同,属性text是获得当前按钮上的名称,构造参数text是设置Button显示的文字,而且该属性是一个Read Only的属性,我们不能直接修改这个属性,像button.text = "test",如果要更改text的值需要调用它的setText()方法。
  • 那么如何知道一个Component是ReadOnly的呢?这就从它的API里面找了,这个版本的API中没有写出来text属性,估计是认为它太简单了,换一个属性看一下

 方法

  • setText:设置按钮上的名称

事件

  • click:当点击按钮时触发

好了,Button先到这里,当然上面所介绍的是最基础的部分,后面遇到问题再回来补充。

 

 

Ext学习笔记01 - NameSpace,类实例属性,类实例方法,类静态方法

Ext学习笔记02 - 构造方法,类继承,类实例方法重写

Ext学习笔记03 - 事件

Ext学习笔记04 - UI组件 - Component, Button

Ext学习笔记05 - UI组件 - Panel,TextField

Ext学习笔记06 - Window

Ext学习笔记07 - Window及Window中的布局

Ext学习笔记08 - 日期控件

Ext学习笔记09 - ComboBox

 

 

 

 

 

 

  • 大小: 806 Bytes
  • 大小: 4.5 KB
分享到:
评论

相关推荐

    EXT_JS实用开发指南_个人整理笔记.docx

    - **基本组件**:如BoxComponent(带边框的组件)、Button(按钮)、ColorPalette(调色板)、Component(通用组件)等。 - **工具栏组件**:如Toolbar(工具栏)、TBBUTTON(工具栏按钮)等。 - **表单及元素...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    ExtJS使用笔记

    ExtJS是一个开源的JavaScript库,主要用于...通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件和管理器的使用方法,以及一些针对特定浏览器的布局技巧,为创建美观、高效的用户界面打下坚实的基础。

    基于MATLAB GUI与CNN的模糊车牌识别系统:从图像预处理到字符识别全流程解析

    内容概要:本文详细介绍了基于MATLAB GUI界面和卷积神经网络(CNN)的模糊车牌识别系统。该系统旨在解决现实中车牌因模糊不清导致识别困难的问题。文中阐述了整个流程的关键步骤,包括图像的模糊还原、灰度化、阈值化、边缘检测、孔洞填充、形态学操作、滤波操作、车牌定位、字符分割以及最终的字符识别。通过使用维纳滤波或最小二乘法约束滤波进行模糊还原,再利用CNN的强大特征提取能力完成字符分类。此外,还特别强调了MATLAB GUI界面的设计,使得用户能直观便捷地操作整个系统。 适合人群:对图像处理和深度学习感兴趣的科研人员、高校学生及从事相关领域的工程师。 使用场景及目标:适用于交通管理、智能停车场等领域,用于提升车牌识别的准确性和效率,特别是在面对模糊车牌时的表现。 其他说明:文中提供了部分关键代码片段作为参考,并对实验结果进行了详细的分析,展示了系统在不同环境下的表现情况及其潜在的应用前景。

    嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip

    嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip

    嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip

    嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip

    开关磁阻电机技术参数与建模技术深度解析:4kW电机性能详述

    内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。

    少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip

    少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip

    少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip

    少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip

    四象限直流电机速度驱动控制系统PID控制仿真模型设计与实现

    内容概要:本文详细介绍了基于PID控制器的四象限直流电机速度驱动控制系统仿真模型及其永磁直流电机(PMDC)转速控制模型。首先阐述了PID控制器的工作原理,即通过对系统误差的比例、积分和微分运算来调整电机的驱动信号,从而实现转速的精确控制。接着讨论了如何利用PID控制器使有刷PMDC电机在四个象限中精确跟踪参考速度,并展示了仿真模型在应对快速负载扰动时的有效性和稳定性。最后,提供了Simulink仿真模型和详细的Word模型说明文档,帮助读者理解和调整PID控制器参数,以达到最佳控制效果。 适合人群:从事电力电子与电机控制领域的研究人员和技术人员,尤其是对四象限直流电机速度驱动控制系统感兴趣的读者。 使用场景及目标:适用于需要深入了解和掌握四象限直流电机速度驱动控制系统设计与实现的研究人员和技术人员。目标是在实际项目中能够运用PID控制器实现电机转速的精确控制,并提高系统的稳定性和抗干扰能力。 其他说明:文中引用了多篇相关领域的权威文献,确保了理论依据的可靠性和实用性。此外,提供的Simulink模型和Word文档有助于读者更好地理解和实践所介绍的内容。

    嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip

    嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip

    少儿编程scratch项目源代码文件案例素材-驾驶通关.zip

    少儿编程scratch项目源代码文件案例素材-驾驶通关.zip

    小区开放对周边道路通行能力影响的研究.pdf

    小区开放对周边道路通行能力影响的研究.pdf

    冷链物流路径优化:基于NSGA-2遗传算法与软硬时间窗策略的研究

    内容概要:本文探讨了冷链物流车辆路径优化问题,特别是如何通过NSGA-2遗传算法和软硬时间窗策略来实现高效、环保和高客户满意度的路径规划。文中介绍了冷链物流的特点及其重要性,提出了软时间窗概念,允许一定的配送时间弹性,同时考虑碳排放成本,以达到绿色物流的目的。此外,还讨论了如何将客户满意度作为路径优化的重要评价标准之一。最后,通过一段简化的Python代码展示了遗传算法的应用。 适合人群:从事物流管理、冷链物流运营的专业人士,以及对遗传算法和路径优化感兴趣的科研人员和技术开发者。 使用场景及目标:适用于冷链物流企业,旨在优化配送路线,降低运营成本,减少碳排放,提升客户满意度。目标是帮助企业实现绿色、高效的物流配送系统。 其他说明:文中提供的代码仅为示意,实际应用需根据具体情况调整参数设置和模型构建。

    少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip

    少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip

    基于STM32F030的无刷电机高压FOC控制方案:滑膜无感FOC技术及保护机制

    内容概要:本文详细介绍了基于STM32F030的无刷电机控制方案,重点在于高压FOC(磁场定向控制)技术和滑膜无感FOC的应用。该方案实现了过载、过欠压、堵转等多种保护机制,并提供了完整的源码、原理图和PCB设计。文中展示了关键代码片段,如滑膜观测器和电流环处理,以及保护机制的具体实现方法。此外,还提到了方案的移植要点和实际测试效果,确保系统的稳定性和高效性。 适合人群:嵌入式系统开发者、电机控制系统工程师、硬件工程师。 使用场景及目标:适用于需要高性能无刷电机控制的应用场景,如工业自动化设备、无人机、电动工具等。目标是提供一种成熟的、经过验证的无刷电机控制方案,帮助开发者快速实现并优化电机控制性能。 其他说明:提供的资料包括详细的原理图、PCB设计文件、源码及测试视频,方便开发者进行学习和应用。

    基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf

    基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf

    嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip

    嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip

    少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip

    少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip

Global site tag (gtag.js) - Google Analytics