Extjs 項目中常用的小技巧,也許你用得著(1)

小編:管理員 328閱讀 2022.09.07

我在項目中遇到的一些知識點:

1.在GridPanel中顯示圖片,效果

對應的代碼實現

{
                    text: '是否啟用',
                    width: 80,
                   // xtype: 'checkcolumn',
                    dataIndex: 'IsEnabled',
                    renderer: function boolFromValue(val) {

                        if (val) {
                            return '<img src=../../Content/images/true.png>'
                        }
                        else {
                            return '<img src=../../Content/images/false.png>'
                        }
                    }
復制

2.隱藏panel的標題欄

這個很簡單,直接把

header: false,
復制

3.調整Extjs中的所有字體的大小

  • 只需把ext-all.css樣式文件中的所有11px換成12px,這樣就為統一的12px的字體了。

但是如果再想增大,那么這時候不光是把源文件的11px換成15px,而且需要把里面和font有關的12px換成15px。

改完之后按鈕出現毛邊,在樣式文件中加

.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text {   
    padding:3px 0px 0px 0px; 
}
復制

毛邊就不見了!

  • 由于在不同瀏覽器中,或者不同版本的同款瀏覽器中顯示的Extjs字體大小不一樣。而且看起來比較小。不順眼。

在網上查之,獲得一條有用信息:Extjs 在很多情況下使用 11px 字體,11px 大小是一種邊緣字體,不同的瀏覽器對 11px 的渲染各不相同,IE 的渲染和12px 相似,而在 Firefox 中,則和 10px相似,導致字體在FF 中過小的問題。 為了能夠徹底的解決字體大小問題,直接打開ext-all.css,查找所有的11px并替換為12px。問題解決了

上網找了好多資料,都說是加上

.x-btn-text{
 font-size:15px;    
}
復制

這樣就好了,但是在IE9和FF下還是不好用。

后來到ext-all.css里慢慢試,才找到設置的地方。

把如下代碼放到別的css里引用就行了:

.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
    background-position: 0 center;/*默認*/
    background-repeat: no-repeat;/*默認*/
    padding-left:18px;/*默認*/
    height:16px;/*默認*/
    font-size:15px;/*字體大小設置*/
}
復制

4.相對應的,調整了字體大小,tabpanel的標題就會被遮擋住一部分,問題就出來了,怎么調整tabpanel的tab標題:

tabBar : {
        height : 28,
        defaults : {
            height : 28
        }
    },
復制

暫時總結這么幾個,隨后我會繼續添加

關聯標簽:
亚洲国产欧美图片,亚洲aⅴ在线av,日韩亚洲综合图片视频,日本av精品在线中文