partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

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 });