Sencha Touch 2 教學 – CSS 渲染與 UI 套版


SenchaTouch_PreviewSencha Touch CSS 渲染

在 Sencha Touch 的環境中,所有的畫面顯示與配置都是統一透過 CSS 進行渲染。當然在使用 Sencha Touch 時我們也需要盡可能地遵循「使用 CSS 渲染設計模式」。一般來說在網頁中使用 CSS 語法可以分為內部套用 (Inline)外部套用兩種主要的方式,內部套用就是透過 style 參數進行設定,彈性低不推薦使用;而外部套用就是將 CSS 語法寫在另一個地方(通常是獨立的 CSS 檔案),然後載入進行串接與渲染。

我們可以在最原始的 app.json 看到預設就載入的 app.css(),如下:

使用外部套用 CSS 是最推薦的方式,因此在套用時就需要 CSS Query,然而 CSS Query 最依賴的設計就是 ID 與 Class。那麼在 Sencha Touch 中要如何指定 Class 與 ID 呢?查閱一下文件,其實所有的 Ext.Component 都支援 id 與 class 的指定,我們可以透過以下方法在 config.id 中指定 ID:

若是要指定 Class 可以透過 config.cls 或者 Ext.Component.setCls() / addCls() 來完成,如下所示:

從上面的程式看來,這個元件一開始被指定了「my-super-cls」,此外在 initialize 又被新增了「my-super-cls-add」,因此擁有了這兩個 Class,Dom 結構如下圖:

safari-dom

上圖中我們可以看到確實有出現我們程式中指定的 Class,而由於我們沒有指定 id,因此 id 由 Sencha Touch 自行產生。注意看一下 class 還出現了其他莫名其妙的名稱,這些都是 Ext 既有的機制,這些機制是很有用的,可以應用在設計 CSS Query 上。

如果你想要使用內部套用直接指定 CSS 給元件也可以透過 config.style 來達成,當然這種方法上面提過彈性不高不建議使用。

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 等
下圖說明了 xtype Class 與 UI Class 的命名規則:
sencha-component

假設我們使用了 button 這個 xtype 元件,並且指定了 ui 為 custom,那麼這個元件最少就會擁有 x-button 與 x-button-custom 這兩個 Class,配合 CSS 的設計我們就能夠搭配出適合的版面與顯示畫面了。

實作範例介紹

我們先在在 app.json 中加入自訂的 CSS 檔案 (custom.css),如下:

建立 custom.css 檔案,來覆蓋預設樣式。內容如下:

寫一個測試的 Panel 來套用我們自定的 CSS,程式碼如下:

執行結果:

safari-button

參考資料

Facebook 留言

廣告

樂樂童鞋