Sencha Touch 2: Trying to add a list to a panel

Question

I have a panel which consists of a toolbar and tabs. On each tab there should be a list and a button. I believe I have this set up correctly except for the list, which I am trying to add as follows:

Ext.define('Myapp.view.Search', {
xtype: 'search',
extend: 'Ext.tab.Panel',

    config: {
        activeItem: 0,
        tabBar: {
            docked: 'top',
            autoScroll: 'auto',
            ui: 'light',
            layout: {
                pack: 'center'
            }
        },

        items: [
        {
            xtype:'toolbar',
            docked:'top',
            ui: 'light',
            title: 'Search'
        },

            {
                title: 'Tab 1',
                xtype: 'formpanel',
                items: [
                    {
                        xtype: 'Mylist' //DOES NOT WORK
                    },
                    {
                        xtype: 'panel',
                        defaults: {
                            xtype: 'button',
                            style: 'margin: 0.1em',
                            flex : 1
                        },
                        layout: {
                            type: 'hbox'
                        },
                        items: [
                            {
                                text: 'Button 1',
                            }
                        ]
                    }
                ]
            },
            {
                title: 'Tab 2',
                xtype: 'formpanel',
                items: [
                    {
                        xtype: 'panel',
                        defaults: {
                            xtype: 'button',
                            style: 'margin: 0.1em',
                            flex : 1
                        },
                        layout: {
                            type: 'hbox'
                        },
                        items: [
                            {
                                text: 'Button 1',
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

Please let me know what I am doing wrong and thanks for you help!

EDIT: added Mylist below:

Ext.define('Myapp.view.Mylist', {
    extend: 'Ext.dataview.NestedList',
    xtype: 'Mylist',

    config: {
        store: 'Sections'
    },

    getTitleTextTpl: function() {
        return '{name}';
    },
    getItemTextTpl: function(node) {
        return '<strong>{name}</strong>';
    },
});

Answer 1

Try these

in View:

      {
        xtype: 'panel',
         flex: 4,
        width: '400px',
        height:"700px",


        layout: {
            type: 'fit'
                },
        items: [
                {
                xtype: 'list',
             // loadingText:"Loading Category",
              styleHtmlContent: true,
              // id:"mylist2",
              width:"300px",


                itemTpl:

             '<div class="mycon">'+ 
             '<input type="image" id="click" img src="{coupon_image}" style="max-width:130%;border:6px double #000000;" width="200" height="200"' +'style="padding:3px;">' +
            '</div>'+
            '<div><font size="2" color="red"><b>Coupon Name:</b></font></div>'+
            '<div><font size="2" color="green"><b>{coupon_name}</b></font></div>'+


                '</div>',                                
              store : 'ViewCategoryStore',


            },


        ]
    }  

in controller:

     Ext.define('Expressdeal.controller.ViewCategoryController', {
    extend: 'Ext.app.Controller',

           config: {
          refs: {


      viewcat : 'viewcategory'       // xtype of the view

               },
          control: {


    'viewcategory list: {
               activate: 'onActivate',
                 itemtap: 'onItemTap',
                     },

Answer 2

Where you define your list in your List view you should say

alias:'widget.Mylist'

instead of

xtype:'Mylist'

also your list needs an itemTpl config im pretty sure.

config: {
        store: 'Sections',
        itemTpl:'{example}'
    }

And as long as the store that drives your list is in working shape the list should appear correctly