Вложенный список, чтобы показать другие

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