需要记录用户自定义表格属性，如字段宽度、字段顺序等
需要引入 Ext.state.Provider
/*
* File: app.js
*
* This file was generated by Sencha Architect version 2.2.2.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.2.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.2.x. For more
* details see http://www.sencha.com/license or contact [email protected].
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
//@require @packageOverrides
Ext.application({
views: [
'MyPanel'
],
autoCreateViewport: true,
name: 'MyApp'
});
Ext.define("Ext.state.Provider", {
mixins : {
observable : "Ext.util.Observable"
},
prefix : "ext-",
get : function (c, d) {
//return typeof this.state[c] == "undefined" ? d : this.state[c]
var jso=window.localStorage[c];
// alert(jso);
//return this.decodeValue(jso);
},
clear : function (d) {
var c = this;
delete c.state[d];
c.fireEvent("statechange", c, d, null)
},
set : function (state_id, col_config) {
var d = this;
// d.state[e] = f;
// d.fireEvent("statechange", d, e, f) JSON.stringify(db)
console.log('state_id=' + state_id);
console.log('col_config=');
console.log(col_config);
},
});
Ext.define("Ext.state.Manager", {
singleton : true,
requires : ["Ext.state.Provider"],
constructor : function () {
this.provider = new Ext.state.Provider()
},
setProvider : function (b) {
this.provider = b
},
get : function (c, d) {
return this.provider.get(c, d)
},
set : function (d, c) {
this.provider.set(d, c)
},
clear : function (b) {
this.provider.clear(b)
},
getProvider : function () {
return this.provider
}
});
在表格定义中，最关键的是：
stateId: 'maingridPanelStatId',
stateful: true,完整表格定义：
/*
* File: app/view/MyPanel.js
*
* This file was generated by Sencha Architect version 2.2.2.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.2.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.2.x. For more
* details see http://www.sencha.com/license or contact [email protected].
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 250,
id: 'mainId',
width: 400,
layout: {
type: 'border'
},
title: 'My Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
region: 'center',
stateId: 'maingridPanelStatId',
stateful: true,
id: 'maingridId',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
}
]
});
me.callParent(arguments);
}
});这样，拖动如下表格中的列，调整宽度或顺序时，在调试日志中可以看到字段宽度和顺序的改变：
注意：不只是拖动表格宽度会触发set事件，拖动浏览器的调试窗口也会触发这个事件