extjs - Sencha Touch 2：尝试将列表添加到面板

Question

我有一个由工具栏和选项卡组成的面板。在每个选项卡上应该有一个列表和一个按钮。我相信我已经正确设置了这个列表，除了我试图添加如下的列表：

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

请让我知道我做错了什么，并感谢您的帮助！

编辑：在下面添加了 Mylist：

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

试试这些

在视图中：

      {
        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',


            },


        ]
    }  

在控制器中：

     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

在列表视图中定义列表的位置，您应该说

alias:'widget.Mylist'

代替

xtype:'Mylist'

你的清单也需要一个 itemTpl 配置，我很确定。

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

只要驱动您列表的商店处于工作状态，列表就应该正确显示