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