`

Ext.Button

    博客分类:
  • ext
阅读更多
Ext.Button组件的基本用法
<div id="btn"></div>
	<script type="text/javascript">
		Ext.onReady(function() {
			Ext.QuickTips.init();
			var _btn = new Ext.Button({
				renderTo : 'btn',
				id : 'ext_button',
				text : 'Ext Button组件的基本用法',
				minWidth : 300,
				tooltip : '提示信息:Ext Button组件的基本用法',
				tooltipType : 'title',//默认为 gtip,还有 title,区别在于样式不同,gtip漂亮一点
				handler : function() {
					alert(this.text);
					//3
				},
				listeners : {
					'click' : function() {
						alert("listeners的click响应");
						//1
						//这个方法将会在handler之前运行
					}
					/*,'mouseover' : function() {
						alert("mouseover");
						//可以添加很多的事件
					}*/
				}
			});

			alert("直接使用_btn.text来获取按钮的显示的名称,_btn.text=" + _btn.text);
			//通过Button的setText方法来改变Button的显示的名称
			_btn.setText("通过Button.setText()方法来设置Button的显示的名称");
			//这个非常bt
			_btn.on('click',function(){
				//2
				alert(this.text+"使用on()方法绑定事件");
			});
		});
	</script>

获取按钮的显示的名称直接使用对象".",如:_btn.text,但是BT的是设置text的使用setText方法的。
对于Button的事件,有三种方式。
第一种:handler,这种方式默认的事件是"click"。
第二种:listeners,设置事件监听器(暂且这么理解),可以设置多个不同种类的事件。
第三种:on()方法,这种是比较好理解和复合我个人的使用习惯的一种做法。因为我写jquery比较多。
对于click事件上面的三种方法的执行顺序是, listeners最先,再是on()方法,其次是handler。
分享到:
评论

相关推荐

    EXT dojoChina按钮控件示例 Ext.Button.rar

    EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar

    Ext.Button的扩展

    在Ext JS框架中,`Ext.Button` 是一个基础组件,用于创建各种按钮。它提供了丰富的样式和事件处理功能,能够适应各种用户界面需求。而"Ext.Button的扩展"则是在这个基础上进行了定制化开发,增加了更个性化的交互...

    ext-3-button-sample.rar_Ext.Button samp_ext_extjs button

    extjs 主要应用了button的布局,和事件提交

    Ext组件描述,各个组件含义

    **1.2 Button (Ext.Button)** - **xtype**: `button` - **功能描述**:Button 是一个简单的按钮控件,用于触发某些操作或事件。 - **主要用途**:用于各种用户交互操作,如提交表单、执行某个动作等。 **1.3 Color...

    extjs小图标(项目小图标大全)

    Ext.create('Ext.button.Button', { text: '点击我', iconCls: 'icon-save', // 这里的'icon-save'对应于图标库中的一个类名 handler: function() { console.log('按钮被点击'); } }); ``` ExtJS的图标库通常...

    EXT核心API详解

    41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext...

    解决ext下拉列表全选和去全选功能

    var selectAllBtn = Ext.create('Ext.button.Button', { text: '全选', handler: function() { comboBox.getStore().each(function(record) { record.set('selected', true); }); comboBox.setValue(comboBox....

    extjs4.1-ux.rar

    3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext.ux.grid.plugin.SortMenu 9、Ext.ux...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    ExtJs实用图标大全

    var button = Ext.create('Ext.button.Button', { text: '保存', iconCls: 'save-icon' // 使用预定义的CSS类来显示图标 }); ``` 这里的`iconCls`属性是指定CSS类名,这些类通常在ExtJs的CSS文件中定义,对应于每...

    Ext-window属性

    15. **buttons**: 一个`Ext.Button`配置数组,用于在面板的footer区域添加按钮。 16. **cls**: 为组件的外部元素(`this.el`)添加自定义的CSS类。 17. **collapseFirst**: 当显示标题栏时,是否始终将折叠/展开...

    Ext2_Button示例

    在本示例“Ext2_Button”中,我们将聚焦于ExtJS 2.x版本中的按钮(Button)组件,它是ExtJS用户界面中的一个重要元素。 按钮组件在ExtJS中扮演着各种角色,如触发事件、导航、提交表单等。让我们深入了解一下ExtJS ...

    ExtJS入门教程(超级详细)

    41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...

    ext Panel+toolbar+button 实作带注释

    在本文中,我们将深入探讨EXT JS库中的Panel、Toolbar和Button组件,并通过一个带注释的实作案例来帮助初学者理解这些概念。EXT JS是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件模型和...

    ExtJS如何自定义图片按钮组件

    4.此组件继承的是Ext.Panel,而不是Button,所以此组件并没有所有Ext.Button的功能但是拥有所有Ext.Panel功能并新增了点击事件(使用规范请参照js附件的onReady函数)。本人现正在研究如何重写Ext.Button,如有所收获,...

    Ext登陆login

    在登录页面中,我们会用到`Ext.form.field.Text`(文本输入框)和`Ext.button.Button`(按钮)。 2. **Ext.container.Container**: 用于组合其他组件,如`Ext.container.Viewport`可以作为整个应用的容器,包含登录...

    Ext js Xtype

    如`Ext.Toolbar`,`Ext.Toolbar.Button`(已废弃,建议使用`button`),`Ext.Toolbar.Fill`,`Ext.Toolbar.Separator`等。 - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`...

    extjs帮助文档pdf版

    - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用方法**: - `Ext.create()`: 创建一个组件实例...

Global site tag (gtag.js) - Google Analytics