跳到主要內容

ZK 教學 - 常見錯誤用法 01 - 操作元件而不是其 model

好幾個 ZK 元件都支援以一個 model 物件為基礎來繪製其內容,例如 Listbox, Grid, Tree, Tabbox, Combobox。這種情況下,必須要以控制該 model 來控制元件的 rendering、選擇模式 (single or multiple choice)、被選定的項目 (selected items),而不是直接透過元件的 API 。

以下是常見的例子:

  • 要將 Listbox 設定成多選,應該要用 ListModel.setMultiple(true) 而不是 Listbox.setMultiple(true)。
  • 要刪掉某一個 Listitem,應該是刪掉 ListModel 中對應的資料物件,而不是直接呼叫Listitem.detach()。
  • 點選 Tabbox \ Tab 上的關閉按鈕時,不會關掉 Tab,因為其移除是要由 Model 控制。
  • 使用 TreeModel 時,要展開 Tree 上某個節點,要透過 TreeOpenableModel.addOpenPath() (or DefaultTreeModel.()) 而不是 Treeitem.setOpen()

什麼時候可以直接呼叫元件 API 來控制呢?就是你沒有給 Model 物件的時候。

留言

這個網誌中的熱門文章

iframe DOM 被移動造成重新載入

如果用 javascript 去搬動 iframe DOM 的位置, 瀏覽器會將其內容重新載入,這是現有 HTML 規格 > When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time". 範例: http://jsfiddle.net/pZ23B/ 測試結果: * Safari 3.1 / Win: reload * Opera 9.5 / Win: reload * IE10: reload * IE7 / IE8: not reload (部份摘自 https://bugzilla.mozilla.org/show_bug.cgi?id=254144 ) 參考: * https://bugzilla.mozilla.org/show_bug.cgi?id=254144

ZK 與響應式網頁設計(RWD)

響應式網頁設計 (RWD) 就現今而言應該是許多網站必備的條件之一,ZK 框架可以幫你從一個抽象層次較高的角度滿足 RWD,不需要了解 CSS Media Query 的細節。 元件層級 元件層級的 RWD 是由元件內部自動完成的。每個 ZK 元件都能區分瀏覽器的種類,因此會自動依據桌上型或行動裝置瀏覽器來自動調整元件的外觀,不需開發者介入,例如 datebox 在桌面瀏覽器會跳出小月曆: 在手機瀏覽器就會自動變成下方滾動條: 頁面層級 頁面層級的 RWD 因為牽涉到版面設計,因此無法靠元件自動完成,因為畢竟每個頁面需要的版面設計皆不相同,這通常不是一個技術性的決定,而是政策性或設計性上的決定,因此 ZK 提供一些工具讓你實現 RWD。以下根據你想要達成的效果,概述你可用的工具。 寬度、版面自動調整 如果你想要做出的效果是,畫面內各區域自動調整寬度,較窄時調整位置,我非常推薦搭配 Bootstrap Grid 與 ZK 一同使用,因為 易於整合 。使用 Grid system 只要在 div 套上 CSS class,如 col-md-4 ,因此跟 ZK 整合很容易,不需要特別的設定與程式。 元件變換 如果你希望畫面寬、窄時,各用不同的元件來顯示,例如側邊欄在畫面變窄時消失並換成小的選單圖示,這時元件本身當然無法得知要做這樣的轉換,你可以透過 onClientInfo 事件 或 @MatchMedia 來偵測畫面寬度變化,並針對該變化調整畫面元件。 更多細節可以參考以下資源: Use Bootstrap with ZK: Responsive Admin Template 範例專案 線上展示