Ext Grid 狀態儲存
直接進入主題
一直使用Ext開發系統，遇到grid 列比較多的時候 ，有些人需要有些人不需要，則需要儲存grid 的狀態。
目前有三種方法
1.啟用自帶cookie儲存
2.使用擴充套件SessionProvider
3.使用擴充套件HttpProvider
這次主要使用1和3。
1，啟用自帶cookie儲存狀態
啟用cookie儲存狀態，使用起來既方便又簡單，網上相關資料也比較多。
第一步：修改grid配置項 啟用 stateful:true,新增狀態ID stateId:xxxxx
第二步：Ext.onReady 裡面新增初始化函式：
Ext.state.Manager.setProvider( new Ext.state.CookieProvider({expires: new Date(new Date().getTime()+(1000*60*60*24*365))})); //設定過期時間，這裡設定一年
以上兩項設定好，就能使用cookie儲存狀態了，是不是很簡單。是！。但是使用cookie有個侷限，每個客戶端cookie是有大小的，大概4K的資料，所以這個就要大家自己衡量了。
2，跳過。
3， 使用擴充套件HttpProvider
httpProvider 是ext 的擴充套件類，在ext官網社群有人釋出，這裡也順帶張貼一下程式碼：
/**
* @class Ext.air.FileProvider
* @extends Ext.state.Provider
*
* An Ext state provider implementation for Adobe AIR that stores state in the application
* storage directory.
*
* @constructor
* @param {Object} config
*/
Ext.air.FileProvider = function(config) {
Ext.air.FileProvider.superclass.constructor.call(this);
this.defaultState = {
mainWindow: {
width: 780,
height: 580,
x: 10,
y: 10
}
};
Ext.apply(this, config);
this.state = this.readState();
var provider = this;
air.NativeApplication.nativeApplication.addEventListener('exiting', function() {
provider.saveState();
});
};
Ext.extend(Ext.air.FileProvider, Ext.state.Provider, {
/**
* @cfg {String} file
* The file name to use for the state file in the application storage directory
*/
file: 'extstate.data',
/**
* @cfg {Object} defaultState
* The default state if no state file can be found
*/
// private
readState: function() {
var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
if (!stateFile.exists) {
return this.defaultState || {};
}
var stream = new air.FileStream();
stream.open(stateFile, air.FileMode.READ);
var stateData = stream.readObject();
stream.close();
return stateData || this.defaultState || {};
},
// private
saveState: function(name, value) {
var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
var stream = new air.FileStream();
stream.open(stateFile, air.FileMode.WRITE);
stream.writeObject(this.state);
stream.close();
}
});
asp.net 需要處理兩個環節，A 接收狀態data，進行資料庫儲存 B 根據使用者ID或者特點條件取出狀態輸出
處理A環節頁面 命名為 save-state.aspx ，程式碼如下：
private void SaveState()
{
string dataJSON = Request.Form["data"]; //接收前臺丟擲的data
if (!string.IsNullOrEmpty(dataJSON))
{
JavaScriptSerializer jss = new JavaScriptSerializer();
int userID = AdminPassport.SysUserId;
SysUserOP sysUserOP = new SysUserOP();
SysUserInfo sysUserInfo = sysUserOP.GetUserInfoById(userID);
List<ExtStateItem> st = null;
BinaryFormatter formatter = new BinaryFormatter();
MemoryStream ms = new MemoryStream();
if (sysUserInfo != null && sysUserInfo.UserGridstatus != null)
{
//byte[] buffer = Encoding.UTF8.GetBytes(sysUserInfo.UserGridstatus);
ms.Write(sysUserInfo.UserGridstatus, 0, sysUserInfo.UserGridstatus.Length);
ms.Seek(0, SeekOrigin.Begin);//移動到最前面
st = (List<ExtStateItem>)formatter.Deserialize(ms);
}
if (st == null)
{
st = new List<ExtStateItem>();
}
HttpCookie delCookie;
//new List<ExtStateItem>();
List<ExtStateItem> updateItems = null;
ExtStateItem delItem = null;
ExtStateItem updateItem = null;
foreach (string cookItem in Request.Cookies.AllKeys) //因客戶端會記錄cookie，這裡我們把它刪除掉，不刪除應該也可以吧。
{
if (cookItem.IndexOf("ys-") > -1)
{
delCookie = new HttpCookie(cookItem);
delCookie.Expires = DateTime.Now.AddDays(-1);
Response.Cookies.Add(delCookie);
}
}
updateItems = jss.Deserialize<List<ExtStateItem>>(dataJSON);
//開始更新st
if (updateItems != null && updateItems.Count > 0)
{
updateItem = updateItems[updateItems.Count - 1];
}
if (updateItem != null)
{
foreach (ExtStateItem extStateItem in st)
{
if (extStateItem.name == updateItem.name)
{
delItem = extStateItem;
break;
}
}
st.Remove(delItem);
st.Add(updateItem);
}
//重新更新資料庫
ms = new MemoryStream();
formatter.Serialize(ms, st);
byte[] writeBuffer = ms.GetBuffer();
if (writeBuffer != null)
{
sysUserInfo.UserId = userID;
sysUserInfo.UserGridstatus = writeBuffer;
sysUserOP.SaveUser(sysUserInfo);
}
}
}
這樣我們已經把使用者狀態儲存至資料庫了，好接下來我們開始讀取
get-state.aspx 程式碼如下：
int userID = AdminPassport.SysUserId;
SysUserOP sysUserOP = new SysUserOP();
SysUserInfo sysUserInfo = sysUserOP.GetUserInfoById(userID);
List<ExtStateItem> st = null;
BinaryFormatter formatter = new BinaryFormatter();
MemoryStream ms = new MemoryStream();
if (sysUserInfo != null && sysUserInfo.UserGridstatus!=null)
{
byte[] buffer = sysUserInfo.UserGridstatus;
ms.Write(buffer, 0, buffer.Length);
ms.Seek(0, SeekOrigin.Begin);
st = (List<ExtStateItem>)formatter.Deserialize(ms);
}
if (st == null)
{
st = new List<ExtStateItem>();
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string result = "ExtState = " + jss.Serialize(st) + ";";
Response.Write(result);
Response.End();
這兩個程式碼處理的方法很多，大家可以自行解決處理，總之只要
int userID = AdminPassport.SysUserId;
SysUserOP sysUserOP = new SysUserOP();
SysUserInfo sysUserInfo = sysUserOP.GetUserInfoById(userID);
List<ExtStateItem> st = null;
BinaryFormatter formatter = new BinaryFormatter();
MemoryStream ms = new MemoryStream();
if (sysUserInfo != null && sysUserInfo.UserGridstatus!=null)
{
byte[] buffer = sysUserInfo.UserGridstatus;
ms.Write(buffer, 0, buffer.Length);
ms.Seek(0, SeekOrigin.Begin);
st = (List<ExtStateItem>)formatter.Deserialize(ms);
}
if (st == null)
{
st = new List<ExtStateItem>();
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string result = "ExtState = " + jss.Serialize(st) + ";";
Response.Write(result);
Response.End();
這兩個頁面處理的方法比較多，只要確保get-state.aspx 頁面輸出：
ExtState = [{"name":"bascountry-cookie-grid","value":"o%3Acolumns%3Da%253Ao%25253Aid%25253Ds%2525253Achecker%25255Ewidth%25253Dn%2525253A20%255Eo%25253Aid%25253Dn%2525253A1%25255Ewidth%25253Dn%2525253A30%255Eo%25253Aid%25253Dn%2525253A2%25255Ewidth%25253Dn%2525253A100%255Eo%25253Aid%25253Dn%2525253A3%25255Ewidth%25253Dn%2525253A197%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A4%25255Ewidth%25253Dn%2525253A100%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A5%25255Ewidth%25253Dn%2525253A100%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A6%25255Ewidth%25253Dn%2525253A100%25255Ehidden%25253Db%2525253A1%255Eo%25253Aid%25253Dn%2525253A7%25255Ewidth%25253Dn%2525253A100%255Eo%25253Aid%25253Dn%2525253A8%25255Ewidth%25253Dn%2525253A60"} ]
就可以了，準備好後，我們開始呼叫這個頁面
js引用
<script type="text/javascript">
document.write("<s" + "cript type='text/javascript' src='/get-state.aspx?t=" + Math.random() + "'></scr" + "ipt>"); //這裡主要防止js客戶端快取
</script>
<script language="javascript" type="text/javascript" src="/ext/ux/util.js"></script>
<script language="javascript" type="text/javascript" src="/ext/ux/HttpProvider.js"></script>
js配置
將 Ext.state.Manager.setProvider(new Ext.ux.state.HttpProvider({ saveUrl: '/save-state.aspx' }));
Ext.state.Manager.getProvider().initState(ExtState);
新增至 Ext.onReady 裡面，也可以加在外面
配置grid
stateful: true,
stateId: "basprovince-cookie-grid",
好了。這樣就可以把grid的狀態儲存至伺服器了。這種方法呼叫會比較頻繁對資料庫有一點壓力，優點是：資料存在服務端，不受客戶端制約