0

我正在使用 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());
    }
});

firebug 显示 record.getData() 返回：

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

1 回答 1

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'
    });
});
于 2013-01-10T20:37:25.787 回答