I use ExtJS version is 4.2. I'm trying to save the state of a grid, which is item of a window. When I close the window, state of the grid is saved in cookies, but it doesn't get restored when window is opened again. What did I miss?
This is my code:
Ext.onReady(function () {
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'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"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.container.Viewport', {
items: [
Ext.create('Ext.Button', {
text: 'Click me',
listeners: {
'click': function () {
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
stateful: true,
stateId: 'some_state_id'
});
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 900,
layout: 'fit',
items: grid
});
win.show();
}
}
})
]
});
})
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/20sf
On every button click you create a new window with entirely new grid which just seems the same but for the state manager is absolutely another grid. You may check that by logging grid component through the ComponentManager and seeing a different grid id each time you click the button:
console.log(Ext.ComponentQuery.query('grid'));
To solve your problem I would recommend you to:
You may find corrected fiddle here and code below:
Ext.onReady(function () {
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'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"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
stateful: true,
stateId: 'some_state_id'
});
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
modal: true,
layout: 'fit',
closeAction: 'hide',
items: grid
});
Ext.create('Ext.container.Viewport', {
items: [
Ext.create('Ext.Button', {
text: 'Click me',
listeners: {
'click': function () {
// console.log(Ext.ComponentQuery.query('grid'));
win.show();
}
}
})
]
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.