В ExtJS 4.2.2, почему loadRecord() загружает данные, но форма не отражает новые данные?

Question

Использование ExtJS 4.2.2

У меня есть сетка, и когда я правая кнопка мыши на сетке и выберите из моего контекстного меню, окно с формой создается, и визуализация, я получаю сетки выбранной записи строки и используйте форму loadRecord для загрузки записи.

Firebug показывает, что запись была загружена в поля формы, но в визуализированной форме поля являются enpty.

Любые идеи?

Вот несколько примеров, иллюстрирующих проблему.

Если вы установили точку останова в строке с var test = 'test'; вы увидите, что данные загружаются в текстовые поля формы, но затем продолжаются мимо точки разрыва и видят, что текстовые поля не отражают данные.

Ext.onReady(function() { 
    Ext.define('com.myCompany.MyGridModel', { 
     extend : 'Ext.data.Model', 
     fields : [{ 
      name : 'name', 
      type : 'string' 
     }, { 
      name : 'address', 
      type : 'string' 
     }, { 
      name : 'type', 
      type : 'string' 
     }] 
    }); 
    var store = Ext.create('Ext.data.Store', { 
     model: 'com.myCompany.MyGridModel', 
     proxy: { 
      type: 'ajax', 
      url: 'centers.json', 
      reader: { 
       type: 'json', 
       root: 'centers' 
      } 
     } 
    }); 
    store.load(); 
    var grid = Ext.create('Ext.grid.Panel', { 
     layout: 'fit', 
     store: store, 
     columns: [{ 
      text: 'Name', 
      dataIndex: 'name', 
      name: 'name' 
     }, { 
      text: 'IP Address', 
      dataIndex: 'address', 
      name: 'address' 
     }, { 
      text: 'Type', 
      dataIndex: 'type', 
      name: 'type' 
     }], 
     renderTo: Ext.getBody(), 
     listeners: { 
      itemcontextmenu : function(view, record, item, index, event){ 
       var selectedItem = record; 
       event.preventDefault(); 
       new Ext.menu.Menu({ 
        items: [{ 
         text : 'Modify', 
         handler : function(widget, event) { 
          Ext.create('Ext.window.Window', { 
           height : 380, 
           width : 540, 
           resizable : false, 
           closable: true, 
           modal: true, 
           layout :{ 
            type : 'fit' 
           }, 
           items : [{ 
            xtype : 'form', 
            frame : true, 
            height : 250, 
            itemId : 'centerContentForm', 
            width : 400, 
            bodyPadding : 10, 
            items : [{ 
             xtype : 'textfield', 
             itemId : 'txtName', 
             height : 30, 
             width : 401, 
             fieldLabel : 'Name', 
             name: 'name', 
             allowBlank : false 
            },{ 
             xtype : 'textfield', 
             itemId : 'txtIPAddress', 
             height : 30, 
             width : 401, 
             fieldLabel : 'Address', 
             name: 'address', 
             allowBlank : false, 
            },{ 
             xtype : 'textfield', 
             itemId : 'txtType', 
             height : 30, 
             width : 401, 
             fieldLabel : 'Type', 
             name: 'type', 
             allowBlank : false 
            }] 
           }], 
           listeners: { 
            render: function(win) { 
             win.down('form').loadRecord(selectedItem); 
             var test = 'test'; 
            } 
           } 
          }).show(); 
         } // end of right-click handler 
        }] 
       }).showAt(event.getXY()); 
      } 
     } 
    }); 
    grid.getView().refresh(); 
}); 

Answer 1

Вместо render обработчик событий следует использовать afterrender обработчик событий.

Так что ваше окно listeners конфигурации должно быть:

listeners: { 
    afterrender: function(win) { 
     win.down('form').loadRecord(selectedItem); 
    } 
}