ExtJS - Changing default button styles and fonts

情到浓时终转凉″ 提交于 2020-01-15 09:12:54

问题


I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:

  1. Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?

  2. Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?

I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.

Thank you all in advance. Waiting for answers :)

Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.


回答1:


I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.




回答2:


If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:

Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html

CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css

JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js

Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.



来源:https://stackoverflow.com/questions/17608270/extjs-changing-default-button-styles-and-fonts

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!