PDA

View Full Version : unable to display multiple images into Dataviiew using xTemplate



pankajh24
28 Jul 2017, 3:26 AM
hii m creating a Ext js 4 MVC application in which i want to dislay multiple images using dataview and xTemplate but i m able to display only 1 image, how to acheive displaying multiple images using xTemplate in ext js 4


Ext.define('AM.view.user.ImageGallery', {
extend: 'Ext.Panel',
region: 'center',
border: 'false',


initComponent: function () {



var imagestore = Ext.create('Ext.data.Store', {
id: 'imagesStore',
fields: ['url', 'name'],
data: [{
url: 'images/images(1).jpg',
url: 'images/images(2).jpg',
url: 'images/images(3).jpg'
}]
});






// ImageTemplate for the Data View


var imageTemplate = new Ext.XTemplate('<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"> <img src="{url}">',

'</tpl>');





this.ImagePanel = new Ext.form.Panel({
padding: '5 5 5 5',
layout: 'hbox',
border: false,
title: 'Image Gallery',
height: 800,
width: 1000,
id: 'img-chooser-view',
autoScroll: true,
items: new Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTemplate,
autoHeight: true,
multiSelect: true,
overCls: 'x-view-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display'

})
});
this.items = [this.ImagePanel];
this.callParent();
}
});

Gary Schlosberg
28 Jul 2017, 7:20 AM
The doc example displays multiple images. Are you looking to place multiple images on each line?
http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.view.View

Have you seen the dataview examples?
http://docs.sencha.com/extjs/4.2.6/#!/example/view/data-view.html

pankajh24
28 Jul 2017, 9:33 PM
[QUOTE=Gary Schlosberg;1202146]The doc example displays multiple images. Are you looking to place multiple images on each line?
http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.view.View

i Already tried above example but m able to display only 1 image...please check my code and suggest me.