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

心已赠人 2024-03-17 21:19 77阅读 0赞

Ext JS 的按钮样式如下：

![在这里插入图片描述][86b3c540fedb453cbe09597eb860a25e.png]

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

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

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

HTML 原生使用的是input 实现按钮， 按钮的样式如下：  
![在这里插入图片描述][b562eafe2c86413084b058a1b5ea8c90.png]

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

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

通过Chrome的控制台可以看到，其实Ext JS 的按钮实现就是在 a 元素里面嵌套了一些 span元素， 具体实现如下：  
![在这里插入图片描述][78629a5a0e034d4196ce7fb56350fcb4.png]

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

[86b3c540fedb453cbe09597eb860a25e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ff92f0832ab24423b247cdea2a7b4155.png
[Ext JS]: https://blog.csdn.net/oscar999/article/details/131586796
[b562eafe2c86413084b058a1b5ea8c90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/539792c8425b4c3dabe7a4320f27848d.png
[78629a5a0e034d4196ce7fb56350fcb4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c222950703324fdfa45531b8b26add61.png

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ext JS之Ext Direct快速入门

Ext Direct是一个专有名词， Direct是直接的意思。 Ext Direct 是 Ext JS 框架中的一个功能模块，用于简化前端 JavaScript 应用程序与

我不是女神ヾ/ 2024年03月24日 23:51/ 0 赞/ 77 阅读

相关 [Ext JS]3.6 Ext JS 表格(Grid)概览

Grid, 翻译过来是网格，也就是表格。 Grid 的基本构成面板：`Ext.grid.Panel` 表格视图：`Ext.view.Table`。

落日映苍穹つ/ 2024年03月23日 14:20/ 0 赞/ 90 阅读

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

Ext JS 的按钮样式如下： ![在这里插入图片描述][86b3c540fedb453cbe09597eb860a25e.png] 按钮的背景色默认为应用的主色调或是灰色

心已赠人/ 2024年03月17日 21:19/ 0 赞/ 78 阅读

相关 Ext JS 4 概述

Ext 4概述 [全文详见：http://www.sencha.com/learn/Guide:Ext\_4\_Overview(Chinese)][http_www.s

电玩女神/ 2022年09月30日 00:50/ 0 赞/ 165 阅读

相关 Ext.js datagrid编辑

使用grid的编辑功能的时候，一般都需要保存修改后的信息，这时只需要在store中添加update事件，将修改的数据保存到后台！代码： //在grid中修改的信息在

不念不忘少年蓝@/ 2022年04月25日 09:24/ 0 赞/ 177 阅读

相关 Ext JS 4 (5) —— Ext.MessageBox.show()

在介绍了 alert( ), confirm( ) 和 prompt( ) 后，在 Ext.Message 里还有一个很重要方法 show( ) ，它是 Ext 自定义的一个消

绝地灬酷狼/ 2022年04月14日 03:57/ 0 赞/ 239 阅读

相关 Ext JS 4 (4) —— Ext.MessageBox.prompt()

上一节我们讲了 confirm 消息框的用法，这节继续讲下一个消息框 prompt ，和 JS 里的也一样，在Ext中的用法和 alert 、confirm 也相差不多，先看下

﹏ヽ暗。殇╰゛Y/ 2022年04月14日 03:57/ 0 赞/ 296 阅读

相关 Ext JS 4 (3) —— Ext.MessageBox.confirm()

上一节我们讲了 Ext.MessageBox.alert() 的用法，这节继续讲下一个消息框 confirm ，用法基本和 alert 类似，例子还是沿用上一次的例子，代码如下

落日映苍穹つ/ 2022年04月14日 03:57/ 0 赞/ 245 阅读

相关 Ext JS 4 (2) —— Ext.MessageBox.alert()

在上一节用 Ext 写了第一个页面 Hello World，其中用到了 Ext 封装好的 alert ，如 JavaScript 中经常用到的 alert、confirm 等都

我不是女神ヾ/ 2022年04月14日 03:57/ 0 赞/ 225 阅读

相关谈谈Ext JS的组件——组件基类：Ext.Component

概述 Ext.Component是所有Ext组件的基类，这在Ext.Component的API中第一句话就提到了。然后第二段说明了它包含的基本功能：隐藏/显示、启用/禁

红太狼/ 2022年04月03日 06:47/ 0 赞/ 297 阅读