Question

*This is my view, i am creating panel, * i want to add Ext.List to the panel

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

i am adding below list to myWantsList Panel from controller (the below code is in controller)

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

I checked inspect element ,there is a code…

but its displaying blank

Answer 1

You have to set a property on list define, renderTo, example:

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