首页 > 其他分享 >ExtJS - UI组件 - Buttion

ExtJS - UI组件 - Buttion

时间:2022-08-15 09:45:17浏览次数:78  
标签:text Button Ext UI button Buttion renderTo ExtJS getBody

更新记录
转载请注明出处: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(),
});

实例:设置按钮的大小(缩放)

image

使用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配置项使用

image

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

使用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

相关文章

  • ExtJS - Sencha Fiddle
    更新记录转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587154.html2022年8月15日发布。2022年8月13日从笔记迁移到博客。ExtJS教程汇总:https://www.cnblog......
  • 数据库中GUID的生成
    GUID,即GloballyUniqueIdentifier(全球唯一标识符)也称作UUID(UniversallyUniqueIDentifier)。GUID是一个通过特定算法产生的二进制长度为128位的数字标识符,用于指......
  • Mac环境安装 Selenuim
    一、安装Selenuim1、安装selenium直接在终端执行命令:pipinstallselenium注:pipinstallselenium==版本号,可以下载对应版本的selenium。2、安装成功后,输入python,进......
  • stackstorm webui安装
    stackstormwebui安装1配置账号和密码yum-yinstallhttpd-tools#添加账号st2admin密码Ch@ngeMe,用来登录WEBUIecho'Ch@ngeMe'|sudohtpasswd-i/etc/st2/htpas......
  • IOS OpenGL ES GPUImage 色彩减淡混合 GPUImageColorDodgeBlendFilter
    目录一.简介二.效果演示三.源码下载四.猜你喜欢零基础OpenGL(ES)学习路线推荐:OpenGL(ES)学习目录>>OpenGLES基础零基础OpenGL(ES)学习路线推荐:......
  • dotnet build error CS5001: Program does not contain a static 'Main' method suita
    前言Docker环境编译.Net6项目,出现诡异的CS5001Programdoesnotcontainastatic'Main'methodsuitableforanentrypoint排查从报错信息看是Program.csMain方......
  • M5Stack使用GUIslice库2 使用buider画UI并添加控件事件
    guisilce有对应的拖曳式画ui工具  buider 是java写的  需要安装jdk 并且配置环境变量。话说lvgl也有同样的设计器,官方squarelinestdio,nxp的guiguider主页GUIs......
  • M5Stack使用GUIslice库1 官方例程5,多页面切换
      针对M5s的按键修改的例程#include<Arduino.h>/////GUIsliceLibraryExamples//-CalvinHass//-https://www.impulseadventure.com/elec/guislice-gui.h......
  • Qt6.2 Widgets Application 解决 'ui_xxxx.h' file not found 问题
    参考【Qt】Qt登录对话框(设计器实现)error:‘ui_mainwindow.h‘filenotfound(ui头文件未创建)环境环境版本windows10QT6.2.4QtCreator8.0.1(C......
  • ExtJS - ExtJS最佳实践
    更新记录转载请注明出处:https://www.cnblogs.com/cqpanda/p/16583543.html2022年8月14日发布。2022年8月13日从笔记迁移到博客。ExtJS教程汇总:https://www.cnblogs......