Model view controller Extjs4 mvc模板化数据未呈现

我正在使用mvc嵌套加载示例：。当我试图用它来构建自己的项目时，我在内容视图中呈现数据时遇到了一个问题。由于某些原因，未加载模板化数据。我觉得这与xtype有关：“组件”。我把它改成了面板，我看到了边框，但仍然没有数据。我还包括了app.jsb3文件，这也不起作用。我可以看到bind方法中列出的数据，但是得到了添加

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

---

您需要发布更多的代码，因为这样做没有问题：

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'
    });
});

Ext.define（'TST.view.main.Content'{
扩展：“Ext.panel.panel”，
别名：“widget.maincontent”，
initComponent:function（）{
Ext.apply（本{
cls:“内容”，
弹性：2，
边界：错，
autoScroll：是的，
布局：{
类型：“hbox”，
对齐：'中间'，
包装：'中心'，
availableSpaceOffset:Ext.getScrollbarSize（）.width
},
项目：[{
xtype:'组件'，//你认为这与此有关吗？
itemId:'contentCt'，
宽度：500，
身高：200，
边界：2，
第三方物流：['{url}']
}]
});
this.callParent（参数）；
},
绑定：函数（数据）{
this.child（“#contentCt”）.update（数据）；
}
}); 
Ext.onReady（函数（）{
var p=新的TST.view.main.Content({
宽度：500，
身高：200，
renderTo:document.body
});
p、 束缚({
url:'foo'
});
});

您在哪里调用bind？当您单步执行代码时会发生什么？视图中的bind方法返回了如上所示的数据。事实上，这个孩子确实存在。当我进入bind方法时，我可以在watch中查看组件的所有属性。出于某种原因，我认为它只是没有更新组件？您做了哪些努力来调试它？在bind方法中放置断点时会发生什么？逐步浏览代码。当我在bind函数中的以下位置停止它：this.child（“#contentCt”）.update（record.getData（））我得到了数据，但没有写入元素contentCtI，我也尝试过将对象传递给update函数，但仍然没有任何结果：data={'url'：'test'}->this.child（'#contentCt'）.update（数据）

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'
    });
});