Ext.Grid之记录用户使用习惯

Ext.Grid之记录用户使用习惯—隐藏列

Ext.Grid的强大功能想必用过Ext的园友们都体会到，可以隐藏列，可以拖放，可以排序等等，但是如果用户隐藏了某一些列后，下次登录时还是要看到上次隐藏后的列该怎么办呢？这就涉及到一个用户使用习惯的问题。想到记录用户习惯，当然首选使用Cookie。但是问题来了，在什么时候记录Cookie？什么事件触发后我们去写Cookie？其实最完美的当然就是在隐藏列这一事件（暂且叫它事件吧，具体的我也不太清楚Ext隐藏列的原理）触发时把剩下的列写入Cookie，但是小生才疏学浅，没有找到这个“隐藏列”事件，没法重写，只好另辟蹊径。反反复复试了Grid自带的方法比如：Close,BeforeClose,打算在用户关闭Grid的时候记录，但是没有效果，最后才找到beforedestroy这一事件，匪夷所思，关闭grid的时候不是触发beforeclose或者close,偏偏来个beforedestroy(英文就是摧毁，销毁)，难道是Ext的人的命名习惯？不解。说到这里思路就清楚了，实现原理及步骤如下：
1、在用户关闭Grid时，触发BeforeDestroy事件，判断那些列是隐藏的，写入Cookie：
grid.on("beforedestroy", CloseWriteCookie, grid);
// 按用户习惯，隐藏某列
if (boolHasClosedGrid == false)// 首次浏览
{
  HiddenMyColumn(grid, varHiddenColumn);
  // alert(varHiddenColumn);
}
// 关闭grid但未关闭浏览器
else {
  HiddenMyColumn(grid, varHiddenColumnColseGrid);
}

//写入CooKie事件
2

function CloseWriteCookie(obj) {
4

var cms = obj.getColumnModel(); // 获得网格的列模型
5

var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)
6

// alert(cms.getColumnCount());
7

for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列
8

if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列
10

strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始
11

}
12

}
13

// 把隐藏列存到Cookie中的同时返回隐藏列的值。
14

Ext.Ajax.request({
15

timeout : 3000000,
16

url : '/ajax/SetUserColumnCookie.aspx',
17

params : "ParaCkUserColumn=Write&UserHiddenColumn="
18

+ strHiddenColoumnIndex,
19

success : function(response, options) {
20

Ext.MessageBox.hide();
21

varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid
22

// alert(varHiddenColumnColseGrid);
23

boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真
24

},
25

failure : function(response, options) {
26

Ext.Msg.alert('错误', Ext.util.JSON
27

.decode(response.responseText).data.msg);
28

}
30

}
31

)
33

}
34

2、用户再次打开这个页面时先用Ajax读Cookie中的隐藏列，然后调用HiddenColumn函数，执行隐藏列。

Ext.Ajax.request({
   timeout : 3000000,
   url : '/ajax/SetUserColumnCookie.aspx',
   params : "ParaCkUserColumn=Read",
   success : function(response, options) {
    Ext.MessageBox.hide();
    varHiddenColumn = response.responseText
    // alert(varHiddenColumn);
   },
   failure : function(response, options) {
    Ext.Msg.alert('错误',
      Ext.util.JSON.decode(response.responseText).data.msg);

}
})

1 // 隐藏列函数
2 function HiddenMyColumn(vargrid, varColumnIndex) {
3
4 if (varColumnIndex != "") {
5 var cms = vargrid.getColumnModel(); // 获得网格的列模型
6 var strarrayUserColumn = new Array();
7 strarrayUserColumn = varColumnIndex.split(",");
8 for (var i = 0; i < strarrayUserColumn.length; i++) {
9 cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型
10 }
11 }
12 }

实现效果如下：不能上传图片了，提示空间不足什么的。下次贴图。欢迎各位批评指正。如果有更好的实现方法，请您不吝赐教。

附上完整的JS文件吧，后台aspx,cs文件就不贴了，有需要联系我
TotalJS.js

var ds;

var varHiddenColumn = "";

var boolHasClosedGrid = false;

Ext.Ajax.request({

timeout : 3000000,

url : '/ajax/SetUserColumnCookie.aspx',

params : "ParaCkUserColumn=Read",

success : function(response, options) {

Ext.MessageBox.hide();

varHiddenColumn = response.responseText

// alert(varHiddenColumn);

failure : function(response, options) {

Ext.Msg.alert('错误',

Ext.util.JSON.decode(response.responseText).data.msg);

}

})

function QueryWebTraceByAll() {

var varDefaultState = "";

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

Ext.QuickTips.init();

// var fm = Ext.form;

var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {

header : '编号',

width : 40,

dataIndex : 'Id',

sortable : true

}, {

header : '域名',

width : 100,

dataIndex : 'HostName',

renderer : change,

sortable : true

}, {

header : '流量',

width : 50,

dataIndex : 'PageView',

sortable : true

}, {

header : '测试域名',

width : 100,

dataIndex : 'TestHostName',

renderer : change,

sortable : true

}, {

header : '服务器IP',

width : 140,

dataIndex : 'WebSpace',

sortable : true

}, {

header : '空间用户名',

width : 100,

dataIndex : 'WebSpaceUserName',

sortable : true

}, {

header : '空间名',

width : 100,

dataIndex : 'WebSpaceNumber',

sortable : true

}, {

header : "Ftp密码",

width : 100,

dataIndex : 'FtpPwd',

sortable : true

{

header : '备案号',

width : 140,

dataIndex : 'BeiAn',

sortable : true

},// renderer:renderFoo,

{

header : '域名服务商',

width : 140,

dataIndex : 'HostNameSP',

sortable : true

},// renderer:renderFoo,

{

header : '域名注册时间',

width : 140,

dataIndex : 'HostNameRegDate',

sortable : true

},// renderer:renderFoo,

{

header : '域名到期时间',

width : 140,

dataIndex : 'HostNameExpireDate',

sortable : true

},// renderer:renderFoo,

{

header : '类型',

width : 50,

dataIndex : 'WebType',

sortable : true

}, {

header : '主关键字',

width : 100,

dataIndex : 'KeyWords',

sortable : true

}, {

header : '副关键词',

width : 100,

dataIndex : 'SubKeyWords',

sortable : true

}, {

header : '状态',

width : 100,

dataIndex : 'State',

sortable : true

}, {

header : '分配人',

width : 100,

dataIndex : 'Assumer',

sortable : true

}, {

header : '制作人',

width : 40,

dataIndex : 'Producer',

sortable : true

}, {

header : '模板',

width : 56,

dataIndex : 'Template',

sortable : true

}, {

header : '负责人',

width : 40,

dataIndex : 'Maintainer',

sortable : true

}, {

header : '组长',

width : 40,

dataIndex : 'TeamLeader',

sortable : true

}, {

header : '维护人51la',

width : 65,

dataIndex : 'MaintainerStatisId',

sortable : true

}, {

header : '网站51la',

width : 51,

dataIndex : 'StatisId',

sortable : true

}, {

header : '密码',

width : 45,

dataIndex : 'MaintainerFivelaPwd',

sortable : true

}, {

header : '收录',

width : 30,

dataIndex : 'Baidu',

sortable : true

}, {

header : '分配时间',

width : 100,

dataIndex : 'ToTeamLeaderDate',

sortable : true

}, {

header : '制作时间',

width : 100,

dataIndex : 'StartDoDate',

sortable : true

}, {

header : '完成时间',

width : 100,

dataIndex : 'EndDoDate',

sortable : true

}, {

header : '审核时间',

width : 100,

dataIndex : 'CheckDate',

sortable : true

}, {

header : '组员评分',

width : 100,

dataIndex : 'Score',

sortable : true

}, {

header : '分配人评分',

width : 100,

dataIndex : 'AssumerScore',

sortable : true

}, {

header : '综合评分',

width : 100,

dataIndex : 'TotalScore',

sortable : true

}]);

// proxy直接去读取josn数据【

ds = new Ext.data.Store({

proxy : new Ext.data.HttpProxy({

url : 'WebTask/WebsiteGeneral/ShowWebSiteAsZWToLeader.aspx'

}),

reader : new Ext.data.JsonReader({

totalProperty : 'totalProperty',

root : 'Head',

successProperty : 'success'

}, [{

name : 'Id',

mapping : 'Id',

type : 'int'

}, {

name : 'HostName',

mapping : 'HostName',

type : 'string'

}, {

name : 'TestHostName',

mapping : 'TestHostName',

type : 'string'

}, {

name : "FtpPwd",

mapping : "FtpPwd",

type : "string"

}, {

name : 'WebSpaceNumber',

mapping : 'WebSpaceNumber',

type : 'string'

}, {

name : 'WebSpaceUserName',

mapping : 'WebSpaceUserName',

type : 'string'

}, {

name : 'BeiAn',

mapping : 'BeiAn',

type : 'string'

}, {

name : 'State',

mapping : 'State',

type : 'string'

}, {

name : 'WebSpace',

mapping : 'WebSpace',

type : 'string'

}, {

name : 'Assumer',

mapping : 'Assumer',

type : 'string'

}, {

name : 'HostNameSP',

mapping : 'HostNameSP',

type : 'string'

}, {

name : 'HostNameRegDate',

mapping : 'HostNameRegDate',

type : 'string'

}, {

name : 'HostNameExpireDate',

mapping : 'HostNameExpireDate',

type : 'string'

}, {

name : 'MaintainerStatisId',

mapping : 'MaintainerStatisId',

type : 'string'

}, {

name : 'StatisId',

mapping : 'StatisId',

type : 'string'

}, {

name : 'MaintainerFivelaPwd',

mapping : 'MaintainerFivelaPwd',

type : 'string'

}, {

name : 'Baidu',

mapping : 'Baidu',

type : 'string'

}, {

name : 'PageView',

mapping : 'PageView',

type : 'string'

}, {

name : 'WebType',

mapping : 'WebType',

type : 'string'

}, {

name : 'KeyWords',

mapping : 'KeyWords',

type : 'string'

}, {

name : 'SubKeyWords',

mapping : 'SubKeyWords',

type : 'string'

}, {

name : 'StartTaskDate',

mapping : 'StartTaskDate',

type : 'string'

}, {

name : 'CheckDate',

mapping : 'CheckDate',

type : 'string'

}, {

name : 'StartDoDate',

mapping : 'StartDoDate',

type : 'string'

}, {

name : 'EndDoDate',

mapping : 'EndDoDate',

type : 'string'

}, {

name : 'TeamLeader',

mapping : 'TeamLeader',

type : 'string'

}, {

name : 'Maintainer',

mapping : 'Maintainer',

type : 'string'

}, {

name : 'Producer',

mapping : 'Producer',

type : 'string'

}, {

name : 'Template',

mapping : 'Template',

type : 'string'

}, {

name : 'ToTeamLeaderDate',

mapping : 'ToTeamLeaderDate',

type : 'string'

}, {

name : 'ToTeamDate',

mapping : 'ToTeamDate',

type : 'string'

}, {

name : 'Score',

mapping : 'Score',

type : 'string'

}, {

name : 'AssumerScore',

mapping : 'AssumerScore',

type : 'string'

}, {

name : 'TotalScore',

mapping : 'TotalScore',

type : 'string'

}]),

remoteSort : true

});

var store = new Ext.data.Store({

proxy : new Ext.data.HttpProxy({

url : "WebTask/WebsiteGeneral/GetEmployeeAsGroup.aspx?type=z"

}), // 数据源

reader : new Ext.data.JsonReader({

totalProperty : "totalPorperty",

root : "Head",

successProperty : 'success',

fields : [{

name : 'id',

mapping : 'id',

type : 'string'

}, {

name : 'username',

mapping : 'username',

type : 'string'

}]

})

// 如何解析

});

store.load();

var storeddl = new Ext.data.Store({

proxy : new Ext.data.HttpProxy({

url : "WebTask/WebsiteGeneral/GetParaList.aspx?MenuId=0010"

}), // 下拉框数据源

reader : new Ext.data.JsonReader({

totalProperty : "totalPorperty",

root : "Head",

successProperty : 'success',

fields : [{

name : 'ParaName',

mapping : 'ParaName',

type : 'string'

}, {

name : 'ParaValue',

mapping : 'ParaValue',

type : 'string'

}]

})

// 如何解析

});

// 状态数据集，非数据库

var DdlState = new Ext.data.SimpleStore({

fields : ['ParaName', 'ParaValue'],

data : [['所有', ''], ['准备制作', '准备制作'], ['正在制作中', '正在制作中'],

['已制作完成', '已制作完成'], ['已审核', '已审核'],

['已分配给组长', '已分配给组长'], ['已分配给组员', '已分配给组员']]

});

storeddl.load();

// 网站制作状态静态数据

var liebie = new Ext.form.ComboBox({

id : 'dropdownliststate',

emptyText : '请选择网站制作状态

mode : 'local', // 数据模式,local为本地模式

readOnly : true,

hidden : true,

displayField : 'ParaName',

valueField : 'ParaValue',

triggerAction : 'all',

name : 'identity', // 作为form提交时传送的参数

store : DdlState,

listeners : {

select : {

fn : function(combo, record, index) {

// 先清理数据

ds.removeAll();

ds.baseParams = {

paraname : grid.topToolbar.items.items[0].value,

paravalue : record.get('ParaValue')

};

ds.load({

callback : function(r, options, success) {

if (success == false) {

// 如果没有数据就清空

ds.removeAll();

Ext.MessageBox.alert('提示',

'Sorry,没有符合条件的数据');

}

});

ds.reload({

params : {

start : 0,

limit : 20

}

});

}

});

var grid = new Ext.grid.EditorGridPanel({

renderTo : 'grid3',

ds : ds,

sm : sm,

stripeRows : true,

cm : cm,

width : 700,

height : 280,

loadMask : true,

tbar : new Ext.Toolbar({

items : [new Ext.form.ComboBox({

id : 'ComSearch',

emptyText : '请选择搜索项目

mode : 'remote', // 数据模式,local为本地模式

readOnly : true,

displayField : 'ParaName',

valueField : 'ParaValue',

triggerAction : 'all',

name : 'identity', // 作为form提交时传送的参数

store : storeddl,

listeners : {

select : {

fn : function(combo, record, index) {

if (record.get('ParaValue') == 'State') {

liebie.show();

Ext.get('txtsearchword')

.setDisplayed('none');

Ext.get('btnSearch')

.setDisplayed('none');

} else {

liebie.hide();

Ext.get('txtsearchword')

.setDisplayed('block');

Ext.get('btnSearch')

.setDisplayed('block');

}

}),

// 网站状态静态数据

liebie, new Ext.form.TextField({

id : 'txtsearchword',

fieldLabel : '搜索文字',

width : 150,

name : 'SearchWord',

allowBlank : false,

blankText : '请输入搜索文字',

listeners : {

specialKey : function(field, e) {

if (e.getKey() == Ext.EventObject.ENTER) {

ds.removeAll();

ds.baseParams = {

paraname : grid.topToolbar.items.items[0].value,

paravalue : Ext.get('txtsearchword').dom.value

};

ds.load({

callback : function(r, options, success) {

if (success == false) {

Ext.MessageBox.alert('提示',

'Sorry,没有符合条件的数据');

}

});

ds.reload({

params : {

start : 0,

limit : 20

}

});

}

}),

{

id : 'btnSearch',

text : '搜索',

iconCls : 'search',

handler : function() {

ds.removeAll();

ds.baseParams = {

paraname : grid.topToolbar.items.items[0].value,

paravalue : Ext.get('txtsearchword').dom.value

};

ds.load({

callback : function(r, options, success) {

if (success == false) {

// 如果为空就清空原来数据

Ext.MessageBox.alert('提示',

'Sorry,没有符合条件的数据');

}

});

ds.reload({

params : {

start : 0,

limit : 20

}

});

}

}]

}),

bbar : new Ext.PagingToolbar({

pageSize : 20,

store : ds,

displayInfo : true,

displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',

emptyMsg : "没有记录",

items : [{

text : '导出Excel',

iconCls : 'add',

tooltip : "点击导出Excel文件",

handler : function() {

// 导出Excel文件

var cms = grid.getColumnModel(); // 获得网格的列模型

var strColoumnNames = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)

var strColoumnNamesHeader = "";

var strAllSql = "";

for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列

if (!cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列及是否列名为空（因为如果有选择框和默认序号，则为空）

strColoumnNames = Ext.util.Format.trim(cms

.getDataIndex(i));// 获得列名

// 判断是否是综合评分这列，如果是要把列名换成原始的

strColoumnNamesHeader = escape(Ext.util.Format

.trim(cms.getColumnHeader(i)));// 获得列标题

strAllSql += strColoumnNames + " as "

+ strColoumnNamesHeader + ",";// 拼接Sql查询语句，格式

// 字段 as

// 中文标题

}

// self表示在本窗口打开

var varparaname = grid.topToolbar.items.items[0].value;

var varparavalue = Ext.util.Format.trim(Ext

.get('txtsearchword').dom.value);

var varparanametext = Ext.get('ComSearch').dom.value

var gridtoexcelwindow;

if (typeof(varparaname) == "undefined") {

varparaname = "State";

varparavalue = varDefaultState;

varparanametext = "默认首要业务数据";

}

gridtoexcelwindow = window

.open( "Ajax/GridToExcel.aspx?sql=" + strAllSql

+ "&FromTable=WebTrace&ParaName="

+ escape(varparaname)

+ "&ParaNameText="

+ escape(varparanametext)

+ "&ParaValue="

+ escape(varparavalue), "_self",

"menubar=0,scrollbar=0,resizable=0,channelmode=0,location=0,status=0");

gridtoexcelwindow.focus();

}

}]

})

});

// el:指定html元素用于显示grid

grid.render();// 渲染表格

ds.baseParams = {

paraname : 'State',

paravalue : varDefaultState

};

ds.load({

callback : function(r, options, success) {

if (success == false) {

ds.removeAll();

Ext.MessageBox.alert('提示', 'Sorry,没有符合条件的数据');

}

});

ds.reload({

params : {

start : 0,

limit : 20

}

});

var win = new Ext.Window({

layout : 'fit',

maximizable : true,

collapsible : true,

width : 1000,

height : 600,

modal : true,

title : "公共查询界面:在这里您可以查询您需要的网站并可以导出所需数据 小提示： 1、您可以点击任一列名右侧出现的箭头，在出现的下拉框中，隐藏某些您不需要的列。您再次进入此页面时将保持您上次保留的列。 2、搜索支持回车键。 3、在窗体底部有'导出Excel'按钮，你可以导出您需要的数据",

items : grid

});

win.show();

grid.on("afteredit", afterEdit1, grid);

grid.on("beforedestroy", CloseWriteCookie, grid);

// 按用户习惯，隐藏某列

if (boolHasClosedGrid == false)// 首次浏览

{

HiddenMyColumn(grid, varHiddenColumn);

// alert(varHiddenColumn);

}

// 关闭grid但未关闭浏览器

else {

HiddenMyColumn(grid, varHiddenColumnColseGrid);

}

// 隐藏列函数

function HiddenMyColumn(vargrid, varColumnIndex) {

if (varColumnIndex != "") {

var cms = vargrid.getColumnModel(); // 获得网格的列模型

var strarrayUserColumn = new Array();

strarrayUserColumn = varColumnIndex.split(",");

for (var i = 0; i < strarrayUserColumn.length; i++) {

cms.setHidden(strarrayUserColumn[i], true);// 隐藏列模型

}

// 关闭时写cookie

function CloseWriteCookie(obj) {

var cms = obj.getColumnModel(); // 获得网格的列模型

var strHiddenColoumnIndex = "";// 存储当前网格已经显示的列名(列名之间用 "," 分隔)

// alert(cms.getColumnCount());

for (var i = 0; i < cms.getColumnCount(); i++) {// 处理当前显示的列

if (cms.isHidden(i) && cms.getDataIndex(i) != "") {// 判断是否是隐藏列

strHiddenColoumnIndex += Ext.util.Format.trim(i) + ",";// 获得列序号数字从0开始

}

// 把隐藏列存到Cookie中的同时返回隐藏列的值。

Ext.Ajax.request({

timeout : 3000000,

url : '/ajax/SetUserColumnCookie.aspx',

params : "ParaCkUserColumn=Write&UserHiddenColumn="

+ strHiddenColoumnIndex,

success : function(response, options) {

Ext.MessageBox.hide();

varHiddenColumnColseGrid = response.responseText// 把最新的隐藏列赋值给全局变量varHiddenColumnColseGrid

// alert(varHiddenColumnColseGrid);

boolHasClosedGrid = true;// 设置关闭grid但未关闭浏览器为真

failure : function(response, options) {

Ext.Msg.alert('错误', Ext.util.JSON

.decode(response.responseText).data.msg);

}

)

}

// 编辑时的检验是否合法，不合法不更新

function afterEdit1(obj) {

var r = obj.record;// 获取被修改的行

var l = obj.field;// 获取被修改的列

var o = obj.originalValue;

var id = r.get("Id");

var lie = r.get(l);

Ext.Ajax.request({

url : '/Ajax/WebsiteOper.aspx?type=3',

params : "id=" + id + "&name=" + l + '&value=' + lie

});

var cursor = this.getBottomToolbar().cursor;

ds.load({

params : {

start : cursor,

limit : this.getBottomToolbar().pageSize

}

});

}

function DEL(Obj) {

var cursor = Obj.getBottomToolbar().cursor;

ds.load({

params : {

start : cursor,

limit : Obj.getBottomToolbar().pageSize

}

});

}