Sencha 터치 중첩 목록과 번호 항목 및 단추가 있습니까?

Question

다음 코드가 있고 중첩 목록의 항목으로 이미지 및 기타 html 요소를 표시하고 싶습니다.이 작업을 수행 할 수 있습니까? 내 코드는

Ext.setup({ 
tabletStartupScreen: 'tablet_startup.png', 
phoneStartupScreen: 'phone_startup.png', 
icon: 'icons/logo4_1.png', 
glossOnIcon: false, 

title:'Item List', 
fullscree:true, 
onReady: function() { 

var data = { 
title:'Item List', 
    text: 'Groceries', 
    items: [{ 
     text: 'Beverages', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [{ 
      text: 'Water', 
      imgURL:'\images\beverage\colas.jpg', 
      items: [{ 
       text: 'Sparkling', 
       imgURL:'\images\beverage\colas.jpg', 
       leaf: true 
      },{ 
       text: 'Still', 
       imgURL:'\images\beverage\colas.jpg', 
       leaf: true 
     }] 
     }, { 
      text:'Coffee', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Espresso', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Redbull', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Coke', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }, { 
      text: 'Diet Coke', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true 
     }] 
    },{ 
    text: 'Fruits', 
    imgURL:'\images\beverage\colas.jpg', 
    items: [{ 
     text: 'Bananas', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    }, 
    { 
     text: 'Watermelon', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    } 
    , 
    { 
     text: 'Grapes', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [{text:'Black Grapes',leaf: true},{text:'Green Grapes',leaf:true}] 
    }, 
    { 
     text: 'Pear', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    } 
    ,{ 
     text: 'Apple', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    }] 
    }, 
    { 
     text: 'Bread and Bakery', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [{ 
      text: 'Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      items: [{ 
      text: 'White Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true, 
      }, 
      { 
      text: 'Brown Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true, 
      }, 
      { 
      text: 'Sandwich Bread', 
      imgURL:'\images\beverage\colas.jpg', 
      leaf: true, 
      }] 
    },{ 
     text: 'Pretzels', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    },{ 
     text: 'Cup Cakes', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf: true 
    }] 
},{ 
    text: 'Personal Care', 
    imgURL:'\images\beverage\colas.jpg', 
    items: [ 
    { 
     text: 'Shampoo', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Dove', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Sunsilk', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Garnier', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 
    { 
     text: 'Soaps', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Dove', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Pears', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Lux', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 
    { 
     text: 'Hair Oil', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Vatika', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Almond Oil', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Parachute Coconut oil', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 
    { 
     text: 'Body Lotions', 
     imgURL:'\images\beverage\colas.jpg', 
     items: [ 
    { 
     text: 'Dove', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Ponds', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    { 
     text: 'Nivea', 
     imgURL:'\images\beverage\colas.jpg', 
     leaf:true, 
    }, 
    ] 
    }, 

    ] 
}] 

}입니다.

Ext.regModel('ListItem', { 
    fields: ['text','imgURL'], 
    //fields: [{name: 'text', type: 'string'},{name: 'imageURL', type: 'string'}], 

}); 

var store = new Ext.data.TreeStore({ 
    model: 'ListItem', 
    root: data, 
    proxy: { 
     type: 'ajax', 
     reader: { 
      type: 'tree', 
      root: 'items' 
     } 
    } 
}); 

var leftNav = new Ext.NestedList({ 
fullscreen:true, 
    dock: 'left', 
    useTitleAsBackText: true, 
     title: 'Item List', 
     icon: 'icons/logo4_1.png', 
     itemTpl : '<img src="{imgURL}" width="100" heigh="100"></img><span>{text}</span> <span><button>Add to Cart</button>', 
     width: '350', 
     image:'image', 
     dockedItems:[{ 
     html:'<img src="icons/logo4_1.png" width="100" height="40"/>', 
     dock:'top', 
     }], 
     store: store, 
     }); 

new Ext.Panel({ 
    fullscreen: true, 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    defaults: { 
     flex: 1 
    }, 
    dockedItems:[leftNav] 
}); 
if(Ext.is.Phone) 
     { 
     fullscreen:true; 
     } 

} })

자사가 작동하지 imgUrl에 필드를 사용하고 있지만 .. Plz은 감사 .. 답변 도움이 ..!

Answer 1

중첩 된 목록 항목의 템플릿을 설정해야합니다. 당신은 당신이 허용 대답은 나를 위해 작동하지 않습니다 내가 getItemTextTplin this question

Answer 2

을 사용하는 방법을 살펴 수

getItemTextTpl: function(node){ 
    return '{imgURL} - {text}'; 
} 

중첩 된 목록 설정 당신에게 getItemTextTpl 속성을 추가하여 그것을 할 수 있습니다 - 어떤 일을 설정했다 NestedList에서 listConfig의 설정 항목 내부의 itemTpl :

Ext.define('project.view.FooList', { 
    extend: 'Ext.dataview.NestedList', 
    config: { 
     fullscreen: true, 
     title: 'Foo, bro', 
     listConfig: { 
      itemTpl: new Ext.XTemplate('{text}, bro') 
     }, 
     store: 'FooStore' 
    } 
});