如何製作一個網格，並在複選框之間保持頁面加載狀態？

Question

當在Sencha ExtJS 3.3.0 GridPanel中刷新頁面時，我們如何使複選框保持選中狀態？

我有一個GridPanel顯示一些信息與複選框。當頁面刷新時，複選框應該仍然被檢查。

任何建議，想法或代碼示例？

Answer 1

你看過所有在ExtJS documentation或included samples？有一個使用CheckColumn擴展的sample grid，完全符合你的要求。

在鏈接的例子，請注意該複選框列由CheckColumn鏈接到一個布爾值記錄字段

// in your record 
{name: 'indoor', type: 'bool'} 

，並表示在網格的列模型：

// in the grid's column model 
xtype: 'checkcolumn', 
header: 'Indoor?', 
dataIndex: 'indoor', 
width: 55 

這樣，當布爾數據以JSON或XML的形式從服務器進入存儲區時，這些值在網格中表示爲複選框。只要您將更改寫入服務器，您的複選框布爾值將被保留。

Answer 2

有同樣的問題，我以這種方式修復它 - 手動保存我在Cookie中顯示的記錄的ID。解決方案並不美觀，但適用於我。

store.on({ 
    'beforeload': function() {    
     var checkeditems = []; 
     for(var i=0;i<gridResources.selModel.selected.length;i++) 
     {       checkeditems.push(grid.selModel.selected.items[i].data.ID); 
     } 
     if(checkeditems.length>0) 
      setCookie("RDCHECKBOXES", checkeditems.join("|")); 
    }, 
    'load': function() { 
     if (getCookie("RDCHECKBOXES")) { 
      var checkeditems = getCookie("RDCHECKBOXES").split("|"); 
      for (var i = 0; i<gridResources.store.data.items.length && checkeditems.length>0; i++) { 
       for(var j=0;j<checkeditems.length;j++) { 
        if (gridResources.store.data.items[i].data.ID == checkeditems[j]) { 
         gridResources.selModel.select(gridResources.store.data.items[i], true); 
         checkeditems.splice(j, 1); 
         break; 
        } 
       } 
      } 
     } 
    } 
}); 

下面是功能的getCookie（）和setcookie（）函數代碼：

// Example: 
// setCookie("foo", "bar", "Mon, 01-Jan-2001 00:00:00 GMT", "/"); 
function setCookie (name, value, expires, path, domain, secure) { 
     document.cookie = name + "=" + escape(value) + 
     ((expires) ? "; expires=" + expires : "") + 
     ((path) ? "; path=" + path : "") + 
     ((domain) ? "; domain=" + domain : "") + 
     ((secure) ? "; secure" : ""); 
} 

// Example: 
// myVar = getCookie("foo"); 
function getCookie(name) { 
    var cookie = " " + document.cookie; 
    var search = " " + name + "="; 
    var setStr = null; 
    var offset = 0; 
    var end = 0; 
    if (cookie.length > 0) { 
     offset = cookie.indexOf(search); 
     if (offset != -1) { 
      offset += search.length; 
      end = cookie.indexOf(";", offset) 
      if (end == -1) { 
       end = cookie.length; 
      } 
      setStr = unescape(cookie.substring(offset, end)); 
     } 
    } 
    return(setStr); 
}