Question

这里是我使用sencha显示列表的代码。当我点击任何一行时如何制作可见的详细视图。我尝试过以下Sencha nested list方式但没有回应。

列表视图

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，所以代码看起来总是很难看。

了解listeners和events

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

嵌套列表视图以显示其他

1 个答案: