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