ExtJs 7.3 MODERN 中的状态网格
Stateful grid in ExtJs 7.3 MODERN
我不明白,根据 ExtJs 7.3 Modern 的手册,应该可以配置 Ext.grid.Grid (https://docs.sencha.com/extjs/7.3.0/modern/Ext.grid.Grid.html#cfg-stateful).
我添加了:
({
// ...
stateId: 'state-grid',
stateful: true,
// ...
});
并且在列上还为每列添加了一个 stateId,并且在我添加的应用程序启动功能中:
launch: function() {
Ext.state.Provider.register(new Ext.state.LocalStorage());
Ext.get(Ext.query('#appLoadingIndicator')).remove();
this.callParent(arguments);
}
但是我没有让有状态网格工作,即我隐藏了一个列然后刷新了站点。该列仍然可见。 ExtJs 7.3 中的有状态工作也是如此 MODERN <--- Modern not classic.
查看以下不言自明的 fiddle 示例。它保存了网格列的宽度和隐藏属性:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.state.Provider.register(new Ext.state.LocalStorage());
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
});
var grid = Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
columns: [{
text: 'Name',
dataIndex: 'name',
stateId: 'name-column-state-id',
stateful: {
// we will state hidden and width of the column states only
hidden: true,
width: true
}
}, {
text: 'Email',
dataIndex: 'email',
stateId: 'email-column-state-id',
stateful: {
// we will state hidden and width of the column states only
hidden: true,
width: true
}
}, {
text: 'Phone',
dataIndex: 'phone',
stateId: 'phone-column-state-id',
stateful: {
// we will state hidden and width of the column states only
hidden: true,
width: true
}
}],
store: store,
layout: 'fit',
fullscreen: true
});
}
});
我不明白,根据 ExtJs 7.3 Modern 的手册,应该可以配置 Ext.grid.Grid (https://docs.sencha.com/extjs/7.3.0/modern/Ext.grid.Grid.html#cfg-stateful).
我添加了:
({
// ...
stateId: 'state-grid',
stateful: true,
// ...
});
并且在列上还为每列添加了一个 stateId,并且在我添加的应用程序启动功能中:
launch: function() {
Ext.state.Provider.register(new Ext.state.LocalStorage());
Ext.get(Ext.query('#appLoadingIndicator')).remove();
this.callParent(arguments);
}
但是我没有让有状态网格工作,即我隐藏了一个列然后刷新了站点。该列仍然可见。 ExtJs 7.3 中的有状态工作也是如此 MODERN <--- Modern not classic.
查看以下不言自明的 fiddle 示例。它保存了网格列的宽度和隐藏属性:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.state.Provider.register(new Ext.state.LocalStorage());
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
});
var grid = Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
columns: [{
text: 'Name',
dataIndex: 'name',
stateId: 'name-column-state-id',
stateful: {
// we will state hidden and width of the column states only
hidden: true,
width: true
}
}, {
text: 'Email',
dataIndex: 'email',
stateId: 'email-column-state-id',
stateful: {
// we will state hidden and width of the column states only
hidden: true,
width: true
}
}, {
text: 'Phone',
dataIndex: 'phone',
stateId: 'phone-column-state-id',
stateful: {
// we will state hidden and width of the column states only
hidden: true,
width: true
}
}],
store: store,
layout: 'fit',
fullscreen: true
});
}
});