0

私は mvc ネストローディングの例で作業しています: http://docs.sencha.com/ext-js/4-1/#!/example/app/nested-loading/nested-loading.html。これから自分のプロジェクトを構築しようとしているときに、コンテンツ ビューでデータをレンダリングしようとして問題が発生しました。何らかの理由で、テンプレート化されたデータが読み込まれません。xtype: 'component' と関係があるような気がします。パネルに変更しましたが、境界線は見えましたが、まだデータがありません。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());
    }
});

また、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 に答える