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

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' },

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' }

// ImageTemplate for the Data View

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


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


Gary Schlosberg
1 Aug 2017, 9:28 AM
Can you place multiple images within one template?

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

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">',

but using CSS in index.htm file i solved this Problem like this:-
<style type="text/css">
float: left;



thank you