学步园

       由于项目要做字体个性化。Ext很多组件中 字体的大小都要动态改变。 我通过 构造 <style>标签，插入css代码，然后达到效果。

所有的控件都有效果，唯独 tree的字体无法设置。我就在网上查找了一段时间的资料，发现还是无法搞定。

网上给的最多的方案就是 x-tree-node｛fontSize: xx px｝

其实根本就不可用。后来我就尝试了用

.x-tree-node-el {
font-size: 20px;
   line-height:22px;
   cursor:pointer;
    background-color:red; 
}

发现能够改变treeNode 样式。但是唯独字体大小无法改变。

后来我就发现 treeNode 字体的color可以改变。 我就顺藤摸瓜试试 

.x-tree-node a span｛

font-family:'宋体';

font-size:12px !important ;

｝

结果果然有用。

 所以，当我们想要改变 ExtJs 中树节点的大小时候，可以使用 .x-tree-node a span

附上在网上找的一些改变别的控件样式的 css

x-window-footer {
    position: relative;
    top: 0;
    right: 0;
}
.x-tab-strip SPAN.x-tab-strip-text {
    font-size: 12px;
}
.x-panel-header {
    font-size: 12px;
}
.x-tree-node {
    font-size: 12px;
}
.x-grid3-hd-row TD {
    font-size: 12px;
}
.x-grid3-row TD {
    font-size: 12px;
    LINE-HEIGHT: 16px;
}
.x-tip .x-tip-bd {
    font-size: 12px;
}
.x-tip h3{
    font-size: 12px;
}
.x-tip .x-tip-bd-inner{
    font-size:12px;
}
.x-panel-tl .x-panel-header {
    FONT: normal 12px tahoma,arial,verdana,sans-serif;
}
.x-form-field {
    FONT: 12px tahoma,arial,helvetica,sans-serif 
}
.x-small-editor .x-form-field {
    FONT: 12px tahoma,arial,helvetica,sans-serif 
}
.x-combo-list-item {
    FONT: 12px tahoma,arial,helvetica,sans-serif; 
} 
.x-menu-list-item {
    FONT: 12px tahoma,arial,sans-serif;
}
.x-window-tl .x-window-header {
    FONT: bold 12px tahoma,arial,verdana,sans-serif; 
}
.x-layout-split-west .x-layout-mini { 
    BACKGROUND-IMAGE: url(../images/mini-left.jpg); 
}
.ext-ie .x-form-text {
    margin-top:1px;
}
.x-form-item { 
    FONT: 12px tahoma,arial,helvetica,sans-serif
}
.x-grid-group-hd DIV { 
    FONT: bold 12px tahoma,arial,helvetica,sans-serif;
}

..x-btn-text-icon .x-btn-center .x-btn-text {ext-all.css (line 227)
background-position:0pt 2px;
background-repeat:no-repeat;
padding:3px 0pt 2px 18px;
}
.ext-gecko .x-btn button {ext-all.css (line 222)
padding-left:0pt;
padding-right:0pt;
}
.x-btn button{
    font-size:12px;
}

实际运行中，Ext.PagingToolbar中字体，Ext.LoadMask字体， Ext.ToolTip字体没有变化，通过FF可以查看对应的CLASS，增加以下代码，可以完美解决

.x-toolbar div.xtb-text{
    padding:2px 2px 0;
    line-height:16px;
 font-size:12px;
    display:block;
}
.x-tip .x-tip-header-text {
    font: bold 12px tahoma,arial,helvetica,sans-serif;
    color:#444;
}

.x-tip .x-tip-body {
    font: normal 12px tahoma,arial,helvetica,sans-serif;
    color:#444;
}
.ext-el-mask-msg div {
    background-color: #eee;
    border-color:#a3bad9;
    color:#222;
    font:normal 12px tahoma, arial, helvetica, sans-serif;
}