WadeHuang的學習迷航記

閉包 Closure 閉包可以用來解偶 function 之間的依賴。 // 用閉包的方式建立一個通用的單例模式 var getSingle = function (fn) { var result; return function () { return result || (result = fn.apply( this .arguments)); } } // 建立登入彈跳視窗 var createLoginDiv = function () { var div = document .createElement( 'div' ); div.innerHTML = '我是登入彈出視窗' ; div.style.display = 'none' ; document .body.appendChild(div); return div; } // 套用 getSingle 閉包 var createSingleLoginDiv = getSingle(createLoginDiv); // 當按下登入按鈕時建立並顯示「登入彈跳視窗」 document .getElementById( 'loginBtn' ).onclick = function () { var loginLayer = createSingleLoginDiv(); loginLayer.style.display = 'block' ; }; /** * getSingle 可以輕鬆套用其他 function */ var createScript = function () { ... } var createIframe = function () { ... } var createButton = function () { ... } var createSingleScript = getSingle(createScript); var createSingleIframe = getSingle(creat

===== Ext.grid.Panel =====  Grid 是在客戶端上顯示大量表格資料的好幫手！實際上就是專門用來顯示類似資料庫Table 的格式的UI 元件。 讓大量的表格資料變得容易存取、甚至還提供 排序 和 過濾 功能。 由於 Grid 繼承自 Panel 類別，因此也可以設定上工具列 tbar 與下工具列 bbar 。 xtype 為: gridpanel, grid Grid 繼承自 Ext.panel.Panel類別 :   * Ext.panel.Panel     * Ext.panel.Table       * Ext.grid.Panel 一個完整的Grid 分為兩個部分: 一個顯示欄位標題的Columns。 一個儲存資料的Store 元件。 === Columns   簡介 ===   Columns 用來Grid 的定義表格欄位，是一個具有text 與 dataIndex 屬性的物件陣列。   利用text 屬性來決定Grid 的欄位名稱。   利用dataIndex 屬性來與Store 的資料相配對。   Grid 的欄位顯示順序完全由此Columns 加入的順序決定。 === Store  簡介 ===  用來存取表格的原始資料，可以是近端的二維陣列(Array )，或是遠端的JSON 或XML 資料。  利用fields 屬性來與columns 欄位相配對。  reader 用來解析原始資料，如原始資料格式為json，reader的type 就填json 。  type 可以是 array, json, xml 先來看看由json 提供近端資料的範例程式: var store = Ext.create('Ext.data.Store', {     fields: ['name', 'email', 'phone'],  //利用fields 與Columns 的dataIndex 做配對。     data: {'items': [             //原始資料             {'name': 'Lisa&#