www/manager/form/ComboGrid.js

   1 Ext.define('PVE.form.ComboGrid', {
   2     extend: 'Ext.form.field.ComboBox',
   3     alias: ['widget.PVE.form.ComboGrid'],
   4
   5     computeHeight: function() {
   6         var me = this;
   7         var lh = PVE.Utils.gridLineHeigh();
   8         var count = me.store.getCount();
   9         return (count > 10) ? 10*lh : 26+count*lh;
  10     },
  11
  12     // hack: allow to select empty value
  13     // seems extjs does not allow that when 'editable == false'
  14     onKeyUp: function(e, t) {
  15         var me = this;
  16         var key = e.getKey();
  17
  18         if (!me.editable && me.allowBlank && !me.multiSelect &&
  19             (key == e.BACKSPACE || key == e.DELETE)) {
  20             me.setValue('');
  21         }
  22
  23         me.callParent(arguments);
  24     },
  25
  26     // copied from ComboBox
  27     createPicker: function() {
  28         var me = this,
  29         picker,
  30         menuCls = Ext.baseCSSPrefix + 'menu',
  31
  32         opts = Ext.apply({
  33             selModel: {
  34                 mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
  35             },
  36             floating: true,
  37             hidden: true,
  38             ownerCt: me.ownerCt,
  39             cls: me.el.up('.' + menuCls) ? menuCls : '',
  40             store: me.store,
  41             displayField: me.displayField,
  42             focusOnToFront: false,
  43             height: me.computeHeight(),
  44             pageSize: me.pageSize
  45         }, me.listConfig, me.defaultListConfig);
  46
  47         // NOTE: we simply use a grid panel
  48         //picker = me.picker = Ext.create('Ext.view.BoundList', opts);
  49         picker = me.picker = Ext.create('Ext.grid.Panel', opts);
  50
  51         // pass getNode() to the view
  52         picker.getNode = function() {
  53             picker.getView().getNode(arguments);
  54         };
  55
  56         me.mon(picker, {
  57             itemclick: me.onItemClick,
  58             refresh: me.onListRefresh,
  59             show: function() {
  60                 picker.setHeight(me.computeHeight());
  61                 me.syncSelection();
  62             },
  63             scope: me
  64         });
  65
  66         me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me);
  67
  68         return picker;
  69     },
  70
  71     initComponent: function() {
  72         var me = this;
  73
  74         Ext.apply(me, {
  75             queryMode: 'local',
  76             editable: false,
  77             matchFieldWidth: false
  78         });
  79
  80         Ext.applyIf(me, { value: ''}); // hack: avoid ExtJS validate() bug
  81
  82         Ext.applyIf(me.listConfig, { width: 400 });
  83
  84         me.callParent();
  85
  86         me.store.on('beforeload', function() {
  87             if (!me.isDisabled()) {
  88                 me.setDisabled(true);
  89                 me.enableAfterLoad = true;
  90             }
  91         });
  92
  93         // hack: autoSelect does not work
  94         me.store.on('load', function(store, r, success, o) {
  95             if (success) {
  96                 me.clearInvalid();
  97
  98                 if (me.enableAfterLoad) {
  99                     delete me.enableAfterLoad;
 100                     me.setDisabled(false);
 101                 }
 102
 103                 var def = me.getValue();
 104                 if (def) {
 105                     me.setValue(def, true); // sync with grid
 106                 }
 107                 var found = false;
 108                 if (def) {
 109                     if (Ext.isArray(def)) {
 110                         Ext.Array.each(def, function(v) {
 111                             if (store.findRecord(me.valueField, v)) {
 112                                 found = true;
 113                                 return false; // break
 114                             }
 115                         });
 116                     } else {
 117                         found = store.findRecord(me.valueField, def);
 118                     }
 119                 }
 120
 121                 if (!found) {
 122                     var rec = me.store.first();
 123                     if (me.autoSelect && rec && rec.data) {
 124                         def = rec.data[me.valueField];
 125                         me.setValue(def, true);
 126                     } else {
 127                         me.setValue('', true);
 128                     }
 129                 }
 130             }
 131         });
 132     }
 133 });