PDA

View Full Version : how to set same height and width for multiple images displaying in dataview & Xtempla



pankajh24
31 Jul 2017, 12:49 AM
m building a Ext js 4 MVC application in which i displaying multiple images and i want to set same height and width to all images. i m creating a View Named ImageGallery.
so how it is possible please help me, please check my code


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


initComponent: function () {





ImageModel = Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'url' },
]
});


alert("imagegallry");
var myStore = Ext.create('Ext.data.Store', {
model: 'ImageModel',
data: [
{ url: 'images/images(1).jpg' },
{ url: 'images/images(2).jpg' },
{ url: 'images/images(3).jpg' }
]
});




myStore.load();
// 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,
frame: true,
collapsible: true,
title: 'Image Gallery',
height: 800,
width: 1100,
id: 'img-chooser-view',
autoScroll: true,
items: new Ext.create('Ext.view.View', {
store: myStore,
tpl: imageTemplate,
autoHeight: true,
multiSelect: true,
layout: 'hbox',
renderTo: 'container',
overCls: 'x-view-over',
itemSelector: 'div.thumb-wrap',
trackOver: true,
emptyText: 'No images to display'


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


this.callParent();
}
});

Gary Schlosberg
1 Aug 2017, 9:28 AM
Can you place multiple images within one template?
https://fiddle.sencha.com/#view/editor&fiddle/24bu

Even if that doesn't work for you, are you able to set the height/width in the template?

pankajh24
1 Aug 2017, 11:01 PM
yes i am placed multiple images into one template like this:-


var imageTemplate = new Ext.XTemplate('<tpl for=".">',
'<div class="thumb-wrap" id="{name}" style="width:300px">',
'<img class="img-thumbnail" src="{url}" id="imageid">',
'</div>',
'</tpl>');



but using CSS in index.htm file i solved this Problem like this:-
<style type="text/css">
.img-thumbnail
{
height:100px;
width:100px;
float: left;

}

</style>



thank you