更新记录
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587153.html
2022年8月15日 发布。
2022年8月13日 从笔记迁移到博客。
ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html
Ext.Buttion(按钮)
说明
按钮组件,常用于处理程序的单击事件
Ext.Buttion定义在Modern包中
Ext.button.Button定义在Classic包中
实例:定义按钮的文本
使用text配置项定义按钮的文本
Ext.create('Ext.button.Button', {
text: 'PandaButton',
renderTo: Ext.getBody(),
});
实例:设置按钮的外边距
使用margin配置项即可
Ext.create('Ext.button.Button', {
margin: '100 0 0 0', //外边距
text: 'PandaButton',
renderTo: Ext.getBody(),
});
实例:设置按钮的内边距
使用padding配置项即可
Ext.create('Ext.button.Button', {
padding: '100 0 0 0', //内边距
text: 'PandaButton',
renderTo: Ext.getBody(),
});
实例:设置按钮的大小(缩放)
使用scale配置项,支持值:small、medium、large
注意:也可以使用width和height设置按钮的大小
Ext.create('Ext.button.Button', {
text: 'PandaButton',
scale: 'large', //设置缩放
renderTo: Ext.getBody(),
});
Ext.create('Ext.button.Button', {
text: 'PandaButton',
scale: 'medium', //设置缩放
renderTo: Ext.getBody(),
});
Ext.create('Ext.button.Button', {
text: 'PandaButton',
scale: 'small', //设置缩放
renderTo: Ext.getBody(),
});
实例:设置按钮的图标(自定义图标)
使用iconCls配置项
提示:可以配合scale配置项使用
Ext.create('Ext.button.Button', {
text: 'My Button',
iconCls:'fa fa-car',
renderTo: Ext.getBody(),
});
实例:设置按钮的图标位置
使用iconAlign配置项,支持的值:left/ top/ right/bottom
Ext.create('Ext.button.Button',{
text:'left icon',
iconCls:'addicon-16',
iconAlign:'left', //左侧
renderTo:Ext.getBody()
});
Ext.create('Ext.button.Button',{
text:'top icon',
iconCls:'addicon-16',
iconAlign:'top', //顶部
renderTo:Ext.getBody()
});
Ext.create('Ext.button.Button',{
text:'right icon',
iconCls:'addicon-16',
iconAlign:'right', //右侧
renderTo:Ext.getBody()
});
Ext.create('Ext.button.Button',{
text:'bottom icon',
iconCls:'addicon-16',
iconAlign:'bottom', //底部
renderTo:Ext.getBody()
});
实例:按钮绑定点击事件
使用handler配置项即可
注意:也可以去绑定click事件
Ext.create('Ext.button.Button', {
text: 'My Button',
renderTo: Ext.getBody(),
handler: function () {
console.log('click');
}
});
实例:按钮绑定多个事件
使用listeners配置项即可
Ext.create('Ext.button.Button', {
text: 'My Button',
renderTo: Ext.getBody(),
listeners: {
click: {
fn: function () {
//Handle click event
console.log('click');
}
},
mouseout: {
fn: function () {
//Handle double click event
console.log('Mouse out');
}
}
}
});
实例:定义Link Button
使用href配置项即可
Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Link Button',
href: 'https://www.panda666.com/'
});
实例:定义menu button
使用menu配置项即可
每个菜单项还可以监听事件
Ext.create('Ext.Button', {
text: 'My Button',
renderTo: Ext.getBody(),
menu: [
{
text: 'Item 1',
listeners:{ //绑定事件
click:function(){
Ext.Msg.alert("Click event", "You Chick");
}
}
},
{
text: 'Item 2'
},
{
text: 'Item 3'
}
]
});
标签:text,Button,Ext,UI,button,Buttion,renderTo,ExtJS,getBody
From: https://www.cnblogs.com/cqpanda/p/16587153.html