Sencha Touch CSS 渲染
在 Sencha Touch 的環境中，所有的畫面顯示與配置都是統一透過 CSS 進行渲染。當然在使用 Sencha Touch 時我們也需要盡可能地遵循「使用 CSS 渲染設計模式」。一般來說在網頁中使用 CSS 語法可以分為內部套用 (Inline) 與外部套用兩種主要的方式，內部套用就是透過 style 參數進行設定，彈性低不推薦使用；而外部套用就是將 CSS 語法寫在另一個地方（通常是獨立的 CSS 檔案），然後載入進行串接與渲染。
我們可以在最原始的 app.json 看到預設就載入的 app.css（），如下：
...
"css": [
{
"path": "resources/css/app.css",
"update": "delta"
}
],
...
使用外部套用 CSS 是最推薦的方式，因此在套用時就需要 CSS Query，然而 CSS Query 最依賴的設計就是 ID 與 Class。那麼在 Sencha Touch 中要如何指定 Class 與 ID 呢？查閱一下文件，其實所有的 Ext.Component 都支援 id 與 class 的指定，我們可以透過以下方法在 config.id 中指定 ID：
Ext.define('Demo.view.Main', {
extend: 'Ext.Component',
config: {
id: 'my-super-id'
}
});
若是要指定 Class 可以透過 config.cls 或者 Ext.Component.setCls() / addCls() 來完成，如下所示：
Ext.define('Demo.view.Main', {
extend: 'Ext.Component',
config: {
cls: 'my-super-cls',
listeners: {
initialize: function () {
this.addCls('my-super-cls-add');
}
},
}
});
從上面的程式看來，這個元件一開始被指定了「my-super-cls」，此外在 initialize 又被新增了「my-super-cls-add」，因此擁有了這兩個 Class，Dom 結構如下圖：
上圖中我們可以看到確實有出現我們程式中指定的 Class，而由於我們沒有指定 id，因此 id 由 Sencha Touch 自行產生。注意看一下 class 還出現了其他莫名其妙的名稱，這些都是 Ext 既有的機制，這些機制是很有用的，可以應用在設計 CSS Query 上。
如果你想要使用內部套用直接指定 CSS 給元件也可以透過 config.style 來達成，當然這種方法上面提過彈性不高不建議使用。
Ext.define('Demo.view.Main', {
extend: 'Ext.Component',
config: {
style: 'border: 1px solid #000;'
}
});
Sencha Touch UI 機制
接下來我們來介紹 Sencha Touch 既有的 UI 機制，與其說是 UI 機制倒不如解釋為「預設自動將元件加入 Class 的機制」比較容易了解。原生的 Ext 元件都有一個 alias 名稱叫做 xtype，所有的元件也會依據這個特性自動加入 Class。此外除了上一節提到的 ID 與 Class 之外，Sencha Touch 還提供了 UI 設計模式，這個設計有點類似 Theme 的感覺，既有的元件很多都已經提供許多不同的 UI 來讓我們套用（例如: Ext.Button 等等），當然我們也可以自行定義自己需要的 UI。先來整理一下 Sencha Touch 自動加入Class 有哪些機制：
- 自動加入 xtype Class
- 自動加入 UI Class
- 自動加入特性 Class, 例如：x-sized, x-item-hidden 等
- 自動加入狀態 Class, 例如：x-stretched 等
假設我們使用了 button 這個 xtype 元件，並且指定了 ui 為 custom，那麼這個元件最少就會擁有 x-button 與 x-button-custom 這兩個 Class，配合 CSS 的設計我們就能夠搭配出適合的版面與顯示畫面了。
實作範例介紹
我們先在在 app.json 中加入自訂的 CSS 檔案 (custom.css)，如下：
...
"css": [
{
"path": "resources/css/app.css",
"update": "delta"
},
{
"path": "resources/css/custom.css",
"update": "delta"
}
],
...
建立 custom.css 檔案，來覆蓋預設樣式。內容如下：
/* 覆寫預設按鈕的邊框為黑色 */
.x-button {
border-color: #000;
}
/* 指定id=my-button-id邊框為紅色 */
#my-button-id {
border-color: #f00;
}
/* 指定class=my-button邊框為綠色 */
.my-button {
border-color: #0f0;
}
/* 指定ui=my-ui邊框為藍色 */
.x-button-my-ui {
border-color: #00f;
}
寫一個測試的 Panel 來套用我們自定的 CSS，程式碼如下：
Ext.define('Demo.view.Main', {
extend: 'Ext.Panel',
config: {
padding: 20,
items: [
{
xtype: 'button',
text: 'Default'
},
{
xtype: 'spacer',
height: 20
},
{
xtype: 'button',
text: 'id: \'my-button-id\'',
id: 'my-button-id'
},
{
xtype: 'spacer',
height: 20
},
{
xtype: 'button',
text: 'cls: \'my-button\'',
cls: 'my-button'
},
{
xtype: 'spacer',
height: 20
},
{
xtype: 'button',
text: 'ui: \'action\'',
ui: 'action'
},
{
xtype: 'spacer',
height: 20
},
{
xtype: 'button',
text: 'ui: \'my-ui\'',
ui: 'my-ui'
}
]
}
});
執行結果：
