Define and use Ext JS-style html buttons in Ext JS

The button style of Ext JS is as follows:

insert image description here

The background color of the button defaults to the main color or gray color of the application. You can also set the background color of the button through the style. For details, please refer to:

Ext JS how to set toolbar buttons and general buttons to maintain a unified style

However, in the actual development scenario, some buttons may not be created through the Ext JS Button class, but the page effect needs to be consistent with the Ext JS buttons.

HTML natively uses input to implement buttons, and the button styles are as follows:
insert image description here

Obviously, this is too casual compared to the button style of Ext JS.

So, here comes the question, how to use HTML elements to implement Ext JS-style buttons?

You can see from the console of Chrome that the button implementation of Ext JS is to nest some span elements inside the a element. The specific implementation is as follows:
insert image description here

Through the above analysis, in the opposite direction, a similar Ext JS button can be obtained through the HTML element generated by the Ext JS button. Therefore, a function to get the HTML button is defined, with three parameters

Guess you like

Origin blog.csdn.net/oscar999/article/details/131775848