Ext JS中定义和使用类Ext JS风格的html 按钮

Ext JS 的按钮样式如下:

在这里插入图片描述

按钮的背景色默认为应用的主色调或是灰色系, 也可以通过样式设置按钮的背景色, 详细可以参考:

Ext JS 如何设置工具栏按钮和一般按钮保持统一样式

但是, 在实际开发的场景中有可能某些按钮是不能通过Ext JS的Button 类进行创建的, 但是页面效果上又需要和Ext JS的按钮保持一致。

HTML 原生使用的是input 实现按钮, 按钮的样式如下:
在这里插入图片描述

很显然, 这个相对于Ext JS的按钮风格来说,就显得过于随便了。

所以, 问题就来了,如何使用HTML的元素实现Ext JS风格的按钮呢?

通过Chrome的控制台可以看到,其实Ext JS 的按钮实现就是在 a 元素里面嵌套了一些 span元素, 具体实现如下:
在这里插入图片描述

通过上面分析,反其道而行,通过Ext JS按钮产生的HTML元素, 可以得到类似的Ext JS按钮。于是,定义了一个获取HTML 按钮的函数,有三个参数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/1066.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode第354场周赛补题

6889. 特殊元素平方和 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;模拟 class Solution { public:int sumOfSquares(vector<int>& nums) {int res 0;for(int i 0; i < nums.size(); i ){if(nums.size() % (i 1) 0) res nums[i] * nums[i];}r…

SQL Server 存储过程

Transact-SQL中的存储过程&#xff0c;非常类似于Java语言中的方法&#xff0c;它可以重复调用。当存储过程执行一次后&#xff0c;可以将语句缓存中&#xff0c;这样下次执行的时候直接使用缓存中的语句。这样就可以提高存储过程的性能。 存储过程的概念 存储过程Procedure是…

如何快速入门「组织结构图」?

组织结构图&#xff0c;对于公司老板和HR可谓是家常便饭&#xff0c;公司发展好&#xff0c;组织结构要升级和调整&#xff0c;人员“正常”流动&#xff0c;都需要用到它。组织结构图可以让人快速的了解公司的行政结构和权利体系&#xff0c;也是让新员工或客户快速了解公司相…

JAVA+Selenium最简单的处理登录弹窗的方式

在做自动化测试遇到需要处理登录弹窗情况&#xff0c;例如我的用户名为admin, 密码为admin, 那么想要登录http://10.10.168.1, 只需要使用以下链接访问即可立即登录, 并免除弹窗: http://账号:密码网址

python-函数用法-F.conv_transpose2d

F.conv_transpose2d torch.nn.functional.conv_transpose2d(input, weight, biasNone, stride1, padding0, output_padding0, groups1, dilation1) → Tensor对由多个输入平面组成的输入图像应用二维转置卷积算子, 有时也称为反卷积. >>> # With square kernels and…

C#设计模式之---外观模式

外观模式&#xff08;Facade Pattern&#xff09; 外观模式&#xff08;Facade Pattern&#xff09;提供了一个简单且公用的接口去处理复杂的子系统&#xff0c;并且没有减少子系统的功能。降低子系统的复杂性&#xff0c;避免了客户与子系统直接链接&#xff0c;它也减少了子…

composer的劈坑

现在是php8盛行的天下&#xff0c;安装php8我就不多说了&#xff0c;宝塔、小出面板一大堆&#xff0c;一键安装。真心说方便。&#xff08;好吧&#xff0c;不打广告了&#xff09;&#xff0c;以下是针对 linux 系统 1、安装composer 安装composer之前&#xff0c;需要要先在…

Android 13 设置自动进入wifi adb模式

Android 13 设置自动进入wifi adb模式 文章目录 Android 13 设置自动进入wifi adb模式一、前言&#xff1a;二、解决Android 13 wifi adb每次重启自动重置问题方法1、分析系统中每次重置wifi adb属性的代码2、在开机广播里面进行设置wifi adb 相关属性&#xff08;1&#xff09…

wpf控制垂直滚动条到最上方

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 使用场景上代码 使用场景 wpf项目中有个datagrid列表&#xff0c;当数据出现垂直滚动条时拉倒最下方&#xff0c;现在当数据刷新时需要自动返回到数据最上方。 提示…

Unity VR 开发教程 OpenXR+XR Interaction Toolkit(八)手指触控 Poke Interaction

文章目录 &#x1f4d5;教程说明&#x1f4d5;XR Poke Interactor&#x1f4d5;与 UI 进行触控交互⭐添加 Tracked Device Graphic Raycaster 和 XR UI Input Module 让 UI 可被交互 &#x1f4d5;与物体进行交互⭐XR Simple Interactable⭐XR Poke Filter 往期回顾&#xff1a…

Mysql四种常见备份表方式,历史表

1、将表备份到物理机 mysqldump -h 域名 -P 端口 -u用户 -p密码 库名 表名 > /路径/表名.{$date}.bak 2、将表备份在库里面&#xff08;create复制表结构、insert复制表内容&#xff09; create table one_bak like one; 复制表结构 insert into one_bak select * from …

简单工厂模式详解

文章目录 前言一、简单工厂模式定义二、举个例子三、简单工厂模式的缺点总结 前言 本篇我们了解一下简单工厂模式&#xff0c;它是设计模式的雏形&#xff0c;是学习设计模式的开端&#xff0c;我会结合案例说明它的设计思路。 一、简单工厂模式定义 简单工厂模式并不是GoF23…

看一眼Mysql查询语句

目录 &#x1f6fb; 查询数据 &#x1f6fb;基本查询语句 &#x1f6fb;单表查询 &#x1f695;查询所有字段 &#x1f695;查询指定字段 &#x1f695;查询指定记录 &#x1f695;带in关键字的查询 &#x1f695;带between and的范围查询 &#x1f695;带like的字符匹…

【Eigen】Eigen内存对齐超详细讲解

Eigen是一个非常常用的矩阵运算库&#xff0c;由于使用了SSE指令集进行向量化加速&#xff0c;因此它的矩阵运算能力还是很厉害的&#xff0c;在SLAM等领域是一个不可或缺的的工具。然而&#xff0c;有时候在vector容器或者class类中使用Eigen时&#xff0c;可能会出现一些奇奇…

10个在线ai文案自动生成器,轻松写出高质量原创文案

在数字营销时代&#xff0c;撰写引人注目的标题和吸引人的营销文案至关重要。然而&#xff0c;写作优质文案需要耗费时间和精力。幸运的是&#xff0c;现在有许多在线AI文案自动生成器可以帮助我们快速创作出高质量的标题和营销文案。本文将介绍十款值得推荐的在线AI文案自动生…

微信小程序事件点击跳转页面的五种方法

第一种:标签 这是最常见的一种跳转方式,相当于html里的a标签 <navigator url"/pages/main/main"></navigator>第二种:wx.navigateTo({})方法 1.前端wxml <button bindtap"getCeshi" type"primary"> 测试按钮 </button>…

flink水位线传播及任务事件时间

背景 本文来讲解一下flink的水位线传播及对其对任务事件时间的影响 水位线 首先flink是通过从源头生成水位线记录的方式来实现水位线传播的&#xff0c;也就是说水位线是嵌入在正常的记录流中的特殊记录&#xff0c;携带者水位线的时间戳&#xff0c;以下我们就通过图片的方…

springCloud通过两种方式配置热更新

该热更新实际就是通过改动nacos官网里面的配置管理的妹纸内容实现 定义一个config包&#xff0c;在该包下面复制该代码 package cn.itcast.user.config; import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.spring…

【C++】多线程编程二(std::thread详解)

目录 std::thread详解 &#xff08;1&#xff09;启动线程 ①无参无返回的函数作为入参 ②函数对象&#xff08;仿函数&#xff09;作为入参 &#xff08;2&#xff09;不等待线程detch() &#xff08;3&#xff09;等待线程完成join() &#xff08;4&#xff09;向线程…

力扣142. 环形链表 II

题目 给定一个链表的头节点head&#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回null。 链接&#xff1a;142. 环形链表 II - 力扣&#xff08;LeetCode&#xff09; 题解 方法一&#xff1a;设置两个指针&#xff0c;一个指针指向链表头结点&#…