嵌套列表視圖顯示其他

Question

在這裏我的代碼使用sencha顯示列表。當我點擊任何任何行如何使可見詳細view.I已嘗試以下鏈接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);