如何从sencha中的控制器向面板添加列表

Question

* 这是我的观点，我正在创建面板，* 我想将Ext.List添加到面板

Ext.define('myApp.view.MyWant', {
    extend : 'Ext.Panel',
    xtype : 'mywant',

    initialize : function() {
        console.log(localStorage.currentuser + " in MyWant View");
        var newWant = {
            xtype : 'button',
            iconCls : 'add',
            ui : 'action',
            handler : this.onTapNew,
            scope : this
        };

        var topToolbar = {
            xtype : 'toolbar',
            docked : 'top',
            defaults : {
                iconMask : true
            },
            title : 'My Wants',
            items : [{
                xtype : 'spacer'
            }, newWant]
        };

        var myWantsList = {
            xtype : 'panel',
            flex : 1,
            id : 'mywantslist',
            html : 'want list'
        };

        this.add(topToolbar);
        this.add(myWantsList);
    },
    config : {
        layout : {
            type : 'vbox'
        }
    }
});

我正在从控制器向myWantsList Panel添加以下列表（以下代码在控制器中）

var myWantList = Ext.create('Ext.List', {
                        itemCls : 'my-dataview-item',
                        html : 'wants-list',
                        itemTpl : '<div><img src="'+localStorage.httpServerPrefix+
                        '{imageURI}"/><span class="list-item-title">{fullname}</span><span id="count" class="list-item-title">{replyCount}</span><p class="list-item-title">{text} <span id="time" class="list-item-title">{time}</span></p>',
                        store : myWantStore
                    });

Ext.getCmp("mywantslist").add(myWantList);

我检查了inspect元素，有一个代码......

但显示空白

Answer 1

您必须在列表define renderTo上设置属性，例如：

var myWantList  = Ext.create('Ext.List', {
    renderTo: mywant.getComponent().element.dom,
    itemCls : 'my-dataview-item',
    html : 'wants-list',
    itemTpl : '<div><img src="'+localStorage.httpServerPrefix+
              '{imageURI}"/><span class="list-item-title">{fullname}</span><span id="count" class="list-item-title">{replyCount}</span><p class="list-item-title">{text} <span id="time" class="list-item-title">{time}</span></p>',
    store : myWantStore
 });