在ext.grid.panel的「工具」配置選項中顯示自定義圖像

我只有一個月的時間，extjs仍在試驗。我的問題是：我有一個網格面板，並在其中的'工具'配置選項。我正在使用它來啓用/禁用Ext.grid.feature.Grouping變量。 2處理程序函數具有通過單擊標題右側出現的2個「十字」按鈕禁用/啓用2個視圖的邏輯。邏輯很好。但是，我想顯示一組自定義圖像來代替「十字」按鈕。這可以做到嗎？如果是，如何？我需要對CSS代碼做一些更改嗎？在ext.grid.panel的「工具」配置選項中顯示自定義圖像

我已經看過文檔，也做了一個很好的搜索，但似乎沒有回答我的問題。

來源

2012-07-10 user1415459

你的工具指定自定義type配置：

Ext.create('Ext.grid.Panel', { 
    ... 
    tools: [ 
     { 
     type: 'enable-grouping', 
     handler: function() { 
      ... 
     } 
     }, 
     { 
     type: 'disable-grouping', 
     handler: function() { 
      ... 
     } 
     } 
    ] 
});

然後在樣式表中定義了以下類風格你的新工具：

.x-tool-enable-grouping { 
    background-image: url('path/to/tool/image/enable-grouping.png'); 
} 

.x-tool-disable-grouping { 
    background-image: url('path/to/tool/image/disable-grouping.png'); 
}

工具圖像的大小應爲15 x 15 px

來源

2012-07-10 23:48:32

嗨Russ ....感謝您的及時回覆。我理解這個邏輯。但是，我不清楚我到底需要定義新類嗎？這應該是我的項目還是在extjs庫中的某個地方？如果在圖書館裏，在哪裏？我可以把它放在一個自定義的CSS文件中並運行我的項目嗎？ – user1415459 2012-07-11 19:08:28

因此，我添加了該類型並創建了一個特定於該項目的css文件。在css文件中，我定義了兩個類。我還更改了sass文件_tabs.scss中的圖像尺寸。這使得「十字」按鈕消失，但自定義圖像仍然沒有顯示在他們的位置。「圖像」是放置自定義圖像的文件夾，此文件夾存在於項目中。我哪裏錯了？ – user1415459 2012-07-11 21:22:57

我會離開ext CSS和SASS，只需在ext-all.css中包含一個自定義樣式表，您可以在其中定義自己的CSS覆蓋。如果您在加載圖像時遇到問題，請在螢火蟲或鍍鉻中檢查工具元素，您可以更改背景圖像屬性以找到圖像的正確路徑。 – 2012-07-11 21:47:11

在ext.grid.panel的「工具」配置選項中顯示自定義圖像

回答

相關問題