實在厭煩了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