partkeepr

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

RemotePartComboBox.js (4593B)

      1 /**
      2  * A part picker with an attached grid.
      3  */
      4 Ext.define("PartKeepr.RemotePartComboBox", {
      5     extend: "Ext.form.field.Picker",
      6     alias: 'widget.RemotePartComboBox',
      7     requires: ["Ext.grid.Panel"],
      8     selectedValue: null,
      9     editable: false,
     10 
     11     /**
     12      * Initializes the component.
     13      */
     14     initComponent: function ()
     15     {
     16         /**
     17          * Create the store with the default sorter "name ASC"
     18          */
     19         this.createStore({
     20             model: 'PartKeepr.PartBundle.Entity.Part',
     21             groupField: 'categoryPath',
     22             sorters: [
     23                 {
     24                     property: 'name',
     25                     direction: 'ASC'
     26                 }
     27             ]
     28         });
     29 
     30         this.callParent();
     31         this.createPicker();
     32 
     33         // Automatically expand field when focused
     34         this.on("focus", function ()
     35         {
     36             this.onTriggerClick();
     37         }, this);
     38     },
     39     // Creates a store. To be called from child's initComponent
     40     createStore: function (config)
     41     {
     42         Ext.Object.merge(config, {
     43             autoLoad: true,
     44             autoSync: false, // Do not change. If true, new (empty) records would be immediately commited to the database.
     45             remoteFilter: true,
     46             remoteSort: true,
     47             pageSize: 15
     48         });
     49 
     50         this.store = Ext.create('Ext.data.Store', config);
     51 
     52         // Workaround for bug http://www.sencha.com/forum/showthread.php?133767-Store.sync()-does-not-update-dirty-flag&p=607093#post607093
     53         this.store.on('write', function (store, operation)
     54         {
     55             var success = operation.wasSuccessful();
     56             if (success) {
     57                 Ext.each(operation.records, function (record)
     58                 {
     59                     if (record.dirty) {
     60                         record.commit();
     61                     }
     62                 });
     63             }
     64         });
     65     },
     66     createPicker: function ()
     67     {
     68         this.partsGrid = Ext.create("PartKeepr.PartsGrid", {
     69             enableTopToolbar: true,
     70             enableEditing: false,
     71             store: this.store,
     72             region: 'center'
     73         });
     74 
     75         this.filter = Ext.create("PartKeepr.PartFilterPanel", {
     76             region: 'south',
     77             floatable: false,
     78             titleCollapse: true,
     79             height: 225,
     80             autoScroll: true,
     81             store: this.store,
     82             title: i18n("Part Filter"),
     83             split: true,
     84             collapsed: true,
     85             collapsible: true,
     86             listeners: {
     87                 beforeCollapse: function ()
     88                 {
     89                     this.partsGrid.focus();
     90                 },
     91                 scope: this
     92             }
     93         });
     94 
     95         this.picker = Ext.create("Ext.panel.Panel", {
     96             shrinkWrapDock: 2,
     97             layout: 'border',
     98             floating: true,
     99             focusOnToFront: false,
    100             manageHeight: false,
    101             height: 300,
    102             minWidth: 350,
    103             shadow: false,
    104             ownerCmp: this,
    105             items: [this.partsGrid, this.filter]
    106         });
    107 
    108         this.picker.on({
    109             show: function ()
    110             {
    111                 this.partsGrid.searchField.setValue(this.getDisplayValue());
    112                 this.partsGrid.searchField.startSearch();
    113             },
    114             scope: this
    115         });
    116 
    117         this.partsGrid.on("select",
    118             function (selModel, record)
    119             {
    120                 this.setSelectedValue(record);
    121                 this.setDisplayValue(record.get("name"));
    122                 this.collapse();
    123             }, this);
    124 
    125         return this.picker;
    126     },
    127     getDisplayValue: function ()
    128     {
    129         return this.displayValue;
    130     },
    131     setSelectedValue: function (data)
    132     {
    133         this.selectedValue = data;
    134     },
    135     getValue: function ()
    136     {
    137         return this.selectedValue;
    138     },
    139     setDisplayValue: function (value)
    140     {
    141         this.setRawValue(value);
    142         this.displayValue = value;
    143     },
    144     setValue: function (data)
    145     {
    146         this.selectedValue = data;
    147 
    148         if (data instanceof Ext.data.Model) {
    149             this.setDisplayValue(data.get("name"));
    150         } else {
    151             this.setDisplayValue("");
    152         }
    153 
    154     },
    155     _selectRecords: function (r)
    156     {
    157         this.picker.getView().select(r);
    158         this.picker.getView().ensureVisible(r);
    159         this.picker.getView().scrollIntoView(r);
    160     },
    161     getErrors: function (value)
    162     {
    163         if (this.getValue() === null) {
    164             return [i18n("You need to select a part")];
    165         }
    166 
    167         return [];
    168     }
    169 });