Question

当在Sencha ExtJS 3.3.0 GridPanel中刷新页面时，如何使复选框保持不变？

我有一个GridPanel，它显示一些带复选框的信息。刷新页面时，仍应选中该复选框。

有任何建议，想法或代码示例吗？

Answer 1

有同样的问题，我以这种方式修复它 - 手动保存我在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);
}

Answer 2

您是否在ExtJS documentation或included samples查看了所有内容？有一个sample grid使用CheckColumn扩展，它完全符合您的要求。

在链接的示例中，请注意复选框列链接到布尔记录字段

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

并通过CheckColumn在网格的列模型中表示：

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

这样，当布尔数据以JSON或XML从服务器进入商店时，这些值在网格中表示为复选框。只要您将更改写入服务器，就会保留复选框布尔值。

如何使用在页面加载之间维护状态的复选框创建网格？

2 个答案: