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.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
在Ext JS框架中,`Ext.Button` 是一个基础组件,用于创建各种按钮。它提供了丰富的样式和事件处理功能,能够适应各种用户界面需求。而"Ext.Button的扩展"则是在这个基础上进行了定制化开发,增加了更个性化的交互...
extjs 主要应用了button的布局,和事件提交
**1.2 Button (Ext.Button)** - **xtype**: `button` - **功能描述**:Button 是一个简单的按钮控件,用于触发某些操作或事件。 - **主要用途**:用于各种用户交互操作,如提交表单、执行某个动作等。 **1.3 Color...
Ext.create('Ext.button.Button', { text: '点击我', iconCls: 'icon-save', // 这里的'icon-save'对应于图标库中的一个类名 handler: function() { console.log('按钮被点击'); } }); ``` 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...
var selectAllBtn = Ext.create('Ext.button.Button', { text: '全选', handler: function() { comboBox.getStore().each(function(record) { record.set('selected', true); }); comboBox.setValue(comboBox....
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...
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 ...
var button = Ext.create('Ext.button.Button', { text: '保存', iconCls: 'save-icon' // 使用预定义的CSS类来显示图标 }); ``` 这里的`iconCls`属性是指定CSS类名,这些类通常在ExtJs的CSS文件中定义,对应于每...
15. **buttons**: 一个`Ext.Button`配置数组,用于在面板的footer区域添加按钮。 16. **cls**: 为组件的外部元素(`this.el`)添加自定义的CSS类。 17. **collapseFirst**: 当显示标题栏时,是否始终将折叠/展开...
在本示例“Ext2_Button”中,我们将聚焦于ExtJS 2.x版本中的按钮(Button)组件,它是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方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...
在本文中,我们将深入探讨EXT JS库中的Panel、Toolbar和Button组件,并通过一个带注释的实作案例来帮助初学者理解这些概念。EXT JS是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件模型和...
4.此组件继承的是Ext.Panel,而不是Button,所以此组件并没有所有Ext.Button的功能但是拥有所有Ext.Panel功能并新增了点击事件(使用规范请参照js附件的onReady函数)。本人现正在研究如何重写Ext.Button,如有所收获,...
在登录页面中,我们会用到`Ext.form.field.Text`(文本输入框)和`Ext.button.Button`(按钮)。 2. **Ext.container.Container**: 用于组合其他组件,如`Ext.container.Viewport`可以作为整个应用的容器,包含登录...
如`Ext.Toolbar`,`Ext.Toolbar.Button`(已废弃,建议使用`button`),`Ext.Toolbar.Fill`,`Ext.Toolbar.Separator`等。 - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`...
- **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用方法**: - `Ext.create()`: 创建一个组件实例...