extjs - 嵌套列表视图以显示其他

Question

这是我使用 sencha 显示列表的代码。当我单击任何任何行时，如何使详细视图可见。我尝试了以下链接Sencha 嵌套列表方式，但没有响应。

列表显示

var tab= Ext.create('Ext.List', {
                                width: 320,
                                height: 320,
                                store: {
                                fields: ['ext_xtype','imgURL','arimg'],
                                data: [{
                                       ext_xtype: 'Harry Potter 4',
                                       imgURL:'bo.png',
                                       arimg:'arrow.png'
                                       },{
                                       ext_xtype: 'Iphone5 64gb',
                                       imgURL:'mo.png',
                                       arimg:'arrow.png'
                                       },{
                                       ext_xtype: 'Hill Figure',
                                       imgURL:'wa.png',
                                       arimg:'arrow.png'
                                       }]
                                }, 
                                itemTpl: '<img src="{imgURL}" width="35" heigh="35"></img><span>&nbsp&nbsp&nbsp{ext_xtype}<img src="{arimg}" width="25" height="25" align="right"></img>'
                                });

详细视图

  var sprfolievu = {
            standardSubmit : false,
            items: [{
                    xtype: 'fieldset',
                    title: '',
                    items: [
                            {
                            xtype: 'container',
                            layout: 'vbox',
                            title: '',
                            items: [{
                                    xtype: 'container',
                                    items: [{
                                            xtype: 'container',
                                            margin: 10,
                                            layout: 'hbox',
                                            items: [logo,{
                                                    xtype: 'label',
                                                    html: '&nbsp&nbsp&nbsp'

                                                    }

                                                    ]
                                            },]
                                    },tablevuu ]
                            }
                            ]
                    }]
            }

我的代码有什么问题？请帮我解决

Answer 1

你没有遵循 MVC，所以代码总是看起来很难看。

了解监听器和事件

我对 sprfolievuand 做了一些修改并添加了返回按钮。

var sprfolievu = {
            standardSubmit : false,
            items: [{
                xtype : 'toolbar',
                items : [{
                    ui : 'back', 
                    text : 'back', 
                    handler : function(){
                     Ext.Viewport.setActiveItem(list);
                    }
                }],
                },{
                    xtype: 'fieldset',
                    title: '',
                    items: [{
                            xtype: 'container',
                            layout: 'vbox',
                            title: '',
                            items: [{
                                    xtype: 'container',
                                    items: [{
                                            xtype: 'container',
                                            margin: 10,
                                            layout: 'hbox',
                                            items: [{
                                                    xtype: 'label',
                                                    html: '&nbsp&nbsp&nbsp'
                                                    }]
                                            }]
                                    }]
                            }]
                    }]
            };

还对列表进行了一些更改。

    var list = Ext.create('Ext.List', {
        store: {
            fields: ['ext_xtype','imgURL','arimg'],
            data: [{
                ext_xtype: 'Harry Potter 4',
                imgURL:'bo.png',
                arimg:'arrow.png'
            },{
                ext_xtype: 'Iphone5 64gb',
                imgURL:'mo.png',
                arimg:'arrow.png'
            },{
                ext_xtype: 'Hill Figure',
                imgURL:'wa.png',
                arimg:'arrow.png'
            }]
        }, 
        itemTpl: ['<img src="{imgURL}" width="25" heigh="25">'+
                 '</img><span>{ext_xtype}</span>'+
                '<img src="{arimg}" width="25" height="25" align="right"></img>'].join(),
        listeners : {
            itemtap: function(list, index, target, record, e, eOpts ) {
                Ext.Viewport.setActiveItem(sprfolievu);
            }
        }

    });

    Ext.Viewport.add(list);
    Ext.Viewport.add(sprfolievu);