Extjs 4.2格的状态在Ext.window.Window视图中不恢复

Question

我使用ExtJS的版本是4.2。我试图保存网格的状态，这是一个窗口的项目。当我关闭窗口时，网格的状态保存在cookie中，但当窗口再次打开时，它不会恢复。我错过了什么？

这是我的代码：

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(); 
        } 
       } 
      }) 
     ] 
    }); 
}) 

这里是小提琴：https://fiddle.sencha.com/#view/editor&fiddle/20sf

Answer 1

在每一个按钮，单击创建全新的网格中的新窗口，它只是似乎相同，但为国家经理绝对另一个网格。您可以检查通过得到的ComponentManager登录网格组件，每次看到一个不同的网格ID，你按一下按钮：

console.log(Ext.ComponentQuery.query('grid')); 

为了解决你的问题，我会建议你：

1. 拉断该按钮外部电网和窗口创建阶段点击关闭行为
2. 改变窗口从摧毁 closeAction参数设置为“隐藏”隐藏
3. 让你的窗口组件模式，以阻止用户从另一个按钮单击 ，直到窗口关闭。

你会发现纠正小提琴here和下面的代码：

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(); 
        } 
       } 
      }) 
     ] 
    }); 
})