實在厭煩了EXTJS自帶樣式的那種風格,最近搞了個這樣的，大夥覺得咋樣...，有喜歡的我整理下貢獻原始碼

1.還是基於EXTJS的 自己用SASS改了些樣式

2.用了些bootstrap裡的一些樣式

3.圖示用的Font Awesome字型樣式

不到200字還不讓發 附上整理的ExtJS-4.2.1自定義樣式指南

ExtJS-4.2.1自定義樣式指南
1. 準備工作
需要安裝準備下列工具:
JAVA,安裝JRE 7;
RUBY,安裝過程中勾選中path環境變數設定;
SENCHA CMD;
ExtJS-4.2.1 SDK;

2. 建立自定義樣式例項
第一步:設定工作區,輸入下列命令, 以解壓好的ExtJS SDK 目錄 替換"~/extjs-4.2.0/".
sencha -sdk ~/ext-4.2.0 generate workspace my-workspace

第二步:在my-workspace 目錄下,輸入下列命令
sencha -sdk ext generate app ThemeDemoApp theme-demo-app
cd theme-demo-app
sencha app build
sencha generate theme my-custom-theme
1) 設定要擴充套件的風格樣式
找到"packages/my-custom-theme/package.json"檔案,修改其中內容:
"extend": "ext-theme-neptune"
"theme-demo-app"目錄下,輸入下列命令:
sencha app refresh

2) 設定要全域性樣式變數 (第一種修改樣式方法)
在"my-custom-theme/sass/var/"目錄下新建Component.scss 檔案.並寫入一下內容:
$base-color: #317040 !default;
在"packages/my-custom-theme/"目錄下,輸入以下命令
sencha package build
3) 使用樣式
找到 theme-demo-app/.sencha/app/sencha.cfg 檔案
app.theme=ext-theme-classic
修改為:
app.theme=my-custom-theme
在" theme-demo-app"目錄輸入如下命令,清理並重建應用
sencha ant clean
sencha app build
在瀏覽器中開啟"theme-demo-app/index.html"檔案,可看到變化.
4) 配置元件變數(第二種修改樣式方法)
新建 "packages/my-custom-theme/sass/var/panel/Panel.scss"此檔案,內容為:
$panel-header-font-family: Times New Roman !default;

重建應用:
sencha app build
5) 建立自定義元件樣式(第三種修改樣式方法)

建立 "packages/my-custom-theme/sass/src/panel/Panel.scss"檔案,內容為:
@include extjs-panel-ui(
$ui-label: 'highlight-framed',
$ui-header-background-color: red,
$ui-border-color: red,
$ui-header-border-color: red,
$ui-body-border-color: red,
$ui-border-width: 5px,
$ui-border-radius: 5px
);
修改"theme-demo-app/app/view/Viewport.js"內容,如下:
items: [{
// default UI
region: 'west',
xtype: 'panel',
title: 'West',
split: true,
width: 150
}, {
// custom "highlight" UI
region: 'center',
xtype: 'panel',
layout: 'fit',
bodyPadding: 20,
items: [
{
xtype: 'panel',
ui: 'highlight',
frame: true,
bodyPadding: 10,
title: 'Highlight Panel'
}
]
}, {
// neptune "light" UI
region: 'east',
xtype: 'panel',
ui: 'light',
title: 'East',
split: true,
width: 150
}]
重建應用:
sencha app build
瀏覽器開啟"theme-demo-app/index.html",可看到變化.
6) 修改圖片資源(第四種修改樣式方法)
在"packages/my-custom-theme/resources/images/shared/"目錄中新建ExtJS資源同名檔案,如icon-info.png.應用中使用如下程式碼時將使用新圖片:
...
title: 'Highlight Panel',
items: [{
xtype: 'button',
text: 'Show Message',
handler: function() {
Ext.Msg.show({
title: 'Info',
msg: 'Message Box with custom icon',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
}]
...

7) 使用JS進行覆蓋(第五種修改樣式方法)
建立"packages/my-custom-theme/overrides/panel/Panel.js"檔案,內容如下:
Ext.define('MyCustomTheme.panel.Panel', {
override: 'Ext.panel.Panel',
titleAlign: 'center'
});

"packages/my-custom-theme/"目錄輸入下列命令
sencha package build

"theme-demo-app"目錄下,輸入下列命令:
sencha app refresh
sencha app build
瀏覽器開啟"theme-demo-app/index.html",可看到變化.

1) 為檢視建立樣式(第五種修改樣式方法)
建立"sass/src/view/Viewport.scss",內容如下:
.content-panel-body {
background-color: #ccc;
}

在Viewport中使用
...
xtype: 'panel',
ui: 'highlight',
bodyCls: 'content-panel-body',
frame: true,
...

在"/build/ThemeDemoApp/production/resources"中可得到產出的樣式檔案及圖片資源.

例項應用已放置在此資料夾中.
英文指南http://docs.sencha.com/extjs/4.2.1/#!/guide/theming