ExtJs 4.2使用指南針編譯主題

Question

根據Sencha的文檔，創建和編譯新主題應該使用Sencha CMD完成。

我想創建一個新的主題（將從現有的主題繼承），並能夠使用指南針而不是 Sencha CMD進行編譯。

任何想法該怎麼做？

Answer 1

如果你想從頭開始創建一個新的主題，那可能會有點壓倒性的，我建議先嚐試擴展一個現有的主題。基本上，一個主題由兩個大部分組成：CSS模板和JavaScript覆蓋; CSS依次被分成SASS代碼，mixins和變量。

有Theming guide討論4.2的主題建設;對於繼承示例，您可以查看現有主題：例如，擴展經典主題的灰色主題，繼而繼承以中性主題爲主的基礎主題作爲父項。海王星也可以給你很多JavaScript重寫的例子。

Answer 2

我們已經在我們的應用程序中爲最後一個分機4發佈了，但沒有使用sencha命令工具。請記住，這是4.1代碼，自4.2版本以來它可能已經發生了變化。你需要安裝ruby/compass併爲compass創建一個配置文件，它會告訴它加載ext特定的變量，你可以設置指南針配置變量。 http://compass-style.org/help/tutorials/configuration-reference/

下面是一個示例配置文件命名爲config.rb（我認爲它需要被命名config.rb但不要引用我的。）這是從extDir採取/資源/上海社會科學院

# $ext_path: This should be the path of where the ExtJS SDK is installed 
# Generally this will be in a lib/extjs folder in your applications root 
# <root>/lib/extjs 
$ext_path = "../extjs/4.1" 

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder 
sass_path = File.dirname(__FILE__) 

# css_path: the directory you want your CSS files to be. 
# Generally this is a folder in the parent directory of your Sass files 
css_path = File.join(sass_path, "css") 

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins 
load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes') 

#Compass config variable 
relative_assets = true 

這裏是DIR結構

• SASS/config.rb
• SASS/redTheme.sass
• SASS/CSS

的redTheme.sass可能看起來像：

$base-color: red; 

@import 'compass'; 
@import 'ext4/default/all'; 

後羅盤在SASS目錄編譯它會創建redTheme.css

• SASS/CSS/redTheme.css