現在的項目使用Ext2做界面布局以及表格展示,其中遇到的小問題及其解決方法記錄下來,以便大家一起學習。

1、Grid滾動條

    Grid不顯示水平滾動條的辦法:

    在grid創建之后,或grid重新動態配置之后,加入下面兩行代碼即可

    this.grid.getView().mainBody.dom.style.width = this.grid.getView().getTotalWidth();
    this.grid.getView().mainBody.dom.style.height = '1px';

    注:this.grid為創建的grid

   控制滾動條位置

   grid.getSelectionModel().selectFirstRow();//第一行   
   grid.getSelectionModel().selectLastRow() ;//最后一行   
   grid.getView().focusRow(grid.getStore().getCount()-1);//指定行

2、讓ExtJs的Grid單元格顯示豎線

Ext GridPanel 的默認樣式的單元格沒有顯示豎線,若要顯示可在頁面中加入以下CSS樣式:

<style type=“text/css”>
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
</style>

然后發現豎線與表頭沒有對齊,有一個像素的誤差,再加入樣式,代碼就成了這樣:

<style type=“text/css”>
    /*顯示豎線*/
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
    /*與表頭對齊*/
    .x-grid3-row td, .x-grid3-summary-row td{
        padding-right: 0px;
    }
</style>

接著發現行間有一個像素的間隔,再改吧,代碼如下:

<style type=“text/css”>
    /*顯示豎線*/
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
    /*與表頭對齊*/
    .x-grid3-row td, .x-grid3-summary-row td{
        padding-right: 0px;
    }
    /*去掉行間空白*/
    .x-grid3-row {
        border-top-width: 0px;
        border-bottom-width: 0px;
    }
</style>

以后會把遇到的問題及其解決方法繼續添加。。。。