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 按钮的函数,有三个参数

猜你喜欢

转载自blog.csdn.net/oscar999/article/details/131775848
ext
今日推荐