CSS - ExtJS 4 - 造型Grid Panel列標題

美好的一天。我正在開發一個Web應用程序。我有一個表格，我有一個Grid Panel。我希望Grid Panel在它和列之間有一個邊框。我已經爲網格視圖實現了這一點，但是，我正在努力將邊框放在列標題上。這裏是我的網格面板看起來像：CSS - ExtJS 4 - 造型Grid Panel列標題

Grid Panel

正如你可以看到，網格視圖（列標題下方的一個），讓他們周圍的邊框，而列標題沒有。下面是我使用的CSS資源：

.child-row .x-grid-cell{ 
    font-size: 17px; 
    font-weight: bold; 
    font-style: italic; 
    font-family: 'Times New Roman'; 

    border-bottom-color: #000000; 
    border-bottom-style: solid; 
    border-top-color: #000000; 
    border-top-style: solid; 
    border-right-color: #000000; 
    border-right-style: solid; 
    border-left-color: #000000; 
    border-left-style: solid; 

    line-height: 17px; 
    height: 100px; 
    padding: 0px; 
    margin: 0px; 
    vertical-align: middle; 
} 

.child-row .x-grid-cell-inner{ 
    text-align:center !important; 
    white-space: normal !important; 
}

而且到目前爲止，它的工作以及爲造型的網格單元。我用這個在我的GridView這樣：

viewConfig: { 
    getRowClass: function(record, rowIndex, rowParams, store) { 
     return 'child-row'; 
    }, 
    itemId: 'pfReceiptGrid', 
    style: 'border: solid Black 1px' 
},

我需要把邊境碼在那裏，否則，僅列內將有它們之間的邊界。

任何人都可以幫助我嗎？我不擅長CSS，我是ExtJS 4的新手。我在這裏呆了很長一段時間，嘗試使用各種.x-grid-代碼，希望能夠完成某些工作，但無濟於事。預先感謝您的幫助。

來源

2014-11-06 Razgriz

以下內容將着色所有Extjs 4網格的標題（基於應用程序http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/array-grid.html）。如果您不想影響其他網格組件，您需要爲此網格添加ID並限制CSS應用於此特定網格（#myGrid）。

.x-grid-header-ct { border: 1px solid #000; } 
.x-grid-header-ct .x-box-inner { border-bottom: 1px solid #000;} 
.x-grid-header-ct .x-box-inner .x-column-header-inner { border-right: 1px solid #000; }

來源

2014-11-06 10:11:40

此解決方案按原樣運行。但是，當我將它包含在我的.child-row css中時，它不起作用。我不能使用ID選擇器，因爲我正在以編程方式複製我的表單，並且多個ID會導致問題。 – Razgriz 2014-11-06 14:06:27

您的.child-row類僅應用於單個網格行，因此列標題不受影響。既然你不能在組件上放置一個id，你仍然可以放置一個自定義的類。例如： 'extend：'Ext.grid.Panel'， cls：「myGrid」，'這個類被應用到你的網格周圍的x面板，所以那麼css規則的格式應該是'.myGrid .x-grid- header-ct ...' – 2014-11-06 15:19:46

好吧對不起，我剛剛意識到如何使用這個，當我發佈了另一個關於樣式屬性網格的問題 – Razgriz 2014-11-07 00:46:44

當我有類似的問題，我嘗試檢查的HTML代碼，希望找到正確的CSS類。您是否嘗試過

.x-column-header { border-right: 1px solid #7e7e7e; /*your style here*/ }

來源

2014-11-06 10:11:54

CSS - ExtJS 4 - 造型Grid Panel列標題

回答

相關問題