Extjs4 mvc模板數據不呈現

Question

我正在使用mvc嵌套加載示例：http://docs.sencha.com/ext-js/4-1/#!/example/app/nested-loading/nested-loading.html。在嘗試從此構建我自己的項目時，遇到了一個問題，試圖在我的內容視圖中呈現數據。出於某種原因，模板數據未加載。我有一種感覺，這與xtype：'component'有關。我將其更改爲面板，我看到了邊框，但仍然沒有數據。我還包括了app.jsb3文件，這也不起作用。我可以看到綁定方法中列出的數據，但會被添加。

我的JSON數據：

[ 
    {id: 1, name: 'This is page one', url: 'http://my.test.com/test.html'}, 
    {id: 2, name: 'This is page two', url: 'http://my.test.com/test2.html'} 
] 

我的模型：

Ext.define('TST.model.Projects', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'name', 'url'] 
}); 

我的商店：

Ext.define('TST.store.Projects', { 
    extend: 'Ext.data.Store', 
    model: 'RLA.model.Projects', 
    autoLoad: true, 

    proxy: { 
     type: 'ajax', 
     url : 'resources/json/projects.json' 
    } 
}); 

我的控制器：

Ext.define('TST.controller.Menu', { 
    extend: 'Ext.app.Controller', 
    stores: ['Projects'], 
    models: ['Projects'], 
    refs: [ 
     {ref: 'mainLeftMenu', selector: 'mainleftmenu'}, 
     {ref: 'mainContent', selector: 'maincontent'} 
    ], 

    init: function() { 
     this.control({ 
      'mainleftmenu': { selectionchange: this.onLeftMenuChange }, 
     }); 

     this.getProjectsStore().on({ 
      scope: this, 
      load : this.onProjectsStoreLoad 
     }); 

    }, 

    onProjectsStoreLoad: function(store, records) { 

     Ext.defer(function() { 
      if (records.length) { 
       var record = records[0];    
       this.getMainLeftMenu().getSelectionModel().select(record); 
       console.log("iamhere"); 
      } 
     }, 500, this); 
    }, 

    /* load the project menu items */ 
    onLaunch: function() { 
     this.getMainLeftMenu().bindStore(this.getProjectsStore()); 
    }, 

    /* update content on new selection */ 
    onLeftMenuChange: function (view, records) { 
     if (records.length) { 
      this.showContent(records[0]); 
     } 
    }, 

    showContent: function(record) { 
     this.getMainContent().bind(record); 
    } 

}); 

這裏是我的leftContent觀點：

Ext.define('TST.view.main.LeftMenu', { 
    extend: 'Ext.view.View', 
    alias: 'widget.mainleftmenu', 

    initComponent: function() { 
     Ext.apply(this, { 

      id: 'leftmenu', 
      dock: 'left', 
      width: 200, 
      border: true, 
      cls: 'leftMenu', 
      selModel: { 
       deselectOnContainerClick: false 
      }, 
      itemSelector: '.items', 
      tpl: [ 
       '<div class="menuTitle">Projects</div>', 
       '<tpl for=".">', 
       '<div class="items">{name}</div>', 
       '</tpl>' 
      ] 
     }); 

     this.callParent(arguments); 
    } 
}); 

這裏是我的內容視圖：

Ext.define('TST.view.main.Content', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.maincontent', 

    initComponent: function() { 
     Ext.apply(this, { 
      cls: 'content', 
      flex: 2, 
      border: false, 
      autoScroll: true, 
      layout: { 
       type: 'hbox', 
       align: 'middle', 
       pack: 'center', 
       availableSpaceOffset: Ext.getScrollbarSize().width 
      }, 

      items: [ 
       { 
       xtype: 'component', // think it has something to do with this? 
       itemId: 'contentCt', 
       width: 500, 
       height: 200, 
       border: 2, 
       tpl: [ 
        '<div class="url">{url}</div>' 
       ] 
      }] 
     }); 

     this.callParent(arguments); 
    }, 

    bind: function(record) { 
     this.child('#contentCt').update(record.getData()); 
    } 
}); 

而且螢火顯示，record.getData（）返回：

object { id=1, name="This is page one", url="http://my.test.com/test.html"} 

Answer 1

您需要發佈更多的代碼，因爲這工作沒有問題：

Ext.define('TST.view.main.Content', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.maincontent', 

    initComponent: function() { 
     Ext.apply(this, { 
      cls: 'content', 
      flex: 2, 
      border: false, 
      autoScroll: true, 
      layout: { 
       type: 'hbox', 
       align: 'middle', 
       pack: 'center', 
       availableSpaceOffset: Ext.getScrollbarSize().width 
      }, 

      items: [{ 
       xtype: 'component', // think it has something to do with this? 
       itemId: 'contentCt', 
       width: 500, 
       height: 200, 
       border: 2, 
       tpl: ['<div class="url">{url}</div>'] 
      }] 
     }); 

     this.callParent(arguments); 
    }, 

    bind: function(data) { 
     this.child('#contentCt').update(data); 
    } 
}); 

Ext.onReady(function(){ 
    var p = new TST.view.main.Content({ 
     width: 500, 
     height: 200, 
     renderTo: document.body 
    }); 
    p.bind({ 
     url: 'foo' 
    }); 
});