PartImageDisplay.js (2480B)
1 /** 2 * @class PartKeepr.PartImageDisplay 3 * Provides a display of all part images with scroll-through functionality. 4 */ 5 Ext.define('PartKeepr.PartImageDisplay', { 6 extend: 'Ext.panel.Panel', 7 8 displayedImageIndex: 0, 9 imageMaxHeight: 150, 10 layout: 'hbox', 11 border: false, 12 13 /** 14 * Initializes the component and creates all widgets. 15 */ 16 initComponent: function () 17 { 18 19 this.store = Ext.create("Ext.data.ChainedStore"); 20 21 this.prevButton = Ext.create("Ext.button.Button", { 22 text: '<', 23 width: 20, 24 height: this.imageMaxHeight, 25 handler: this.onPreviousClick, 26 scope: this 27 }); 28 29 this.nextButton = Ext.create("Ext.button.Button", { 30 text: '>', 31 width: 20, 32 height: this.imageMaxHeight, 33 handler: this.onNextClick, 34 scope: this 35 }); 36 37 this.image = Ext.create("Ext.Img", { 38 maxHeight: this.imageMaxHeight, 39 autoEl: 'div', 40 height: this.imageMaxHeight, 41 width: 200 42 }); 43 44 this.items = [this.prevButton, this.image, this.nextButton]; 45 46 this.callParent(); 47 }, 48 /** 49 * Sets the stored when a new part is selected. 50 * @param store The store 51 */ 52 setStore: function (store) 53 { 54 this.store.setSource(store); 55 56 this.store.setRemoteFilter(false); 57 58 this.store.addFilter({ 59 property: "isImage", 60 operator: "=", 61 value: true 62 }); 63 64 this.displayedImageIndex = 0; 65 this.setImage(); 66 }, 67 /** 68 * Sets the image 69 * @param id The attachment ID to set 70 */ 71 setImage: function () 72 { 73 var image = this.store.getAt(this.displayedImageIndex); 74 75 if (image) { 76 this.image.setSrc(image.getId() + "/getImage?maxHeight=" + this.imageMaxHeight + "&ts=" + new Date().getTime()); 77 } else { 78 this.image.setSrc(null); 79 } 80 }, 81 /** 82 * Handler for the "next" button 83 */ 84 onNextClick: function () 85 { 86 if (this.displayedImageIndex < this.store.getCount() - 1) { 87 this.displayedImageIndex++; 88 } 89 90 this.setImage(); 91 }, 92 /** 93 * Handler for the "previous" button 94 */ 95 onPreviousClick: function () 96 { 97 if (this.displayedImageIndex > 0) { 98 this.displayedImageIndex--; 99 } 100 101 this.setImage(); 102 } 103 });