www/new/form/ComboGrid.js

   1 Ext.define('PVE.form.ComboGrid', {
   2     extend: 'Ext.form.ComboBox',
   3     requires: [
   4         'Ext.grid.Panel',
   5         'PVE.Utils'
   6     ],
   7     alias: ['widget.PVE.form.ComboGrid'],
   8
   9     computeHeight: function() {
  10         var me = this;
  11         var lh = PVE.Utils.gridLineHeigh();
  12         var count = me.store.getCount();
  13         return (count > 10) ? 10*lh : 26+count*lh;
  14     },
  15
  16     // copied from ComboBox
  17     createPicker: function() {
  18         var me = this,
  19         picker,
  20         menuCls = Ext.baseCSSPrefix + 'menu',
  21
  22         opts = Ext.apply({
  23             selModel: {
  24                 mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
  25             },
  26             floating: true,
  27             hidden: true,
  28             ownerCt: me.ownerCt,
  29             cls: me.el.up('.' + menuCls) ? menuCls : '',
  30             store: me.store,
  31             displayField: me.displayField,
  32             focusOnToFront: false,
  33             height: me.computeHeight(),
  34             pageSize: me.pageSize
  35         }, me.listConfig, me.defaultListConfig);
  36
  37         // NOTE: we simply use a grid panel
  38         //picker = me.picker = Ext.create('Ext.view.BoundList', opts);
  39         picker = me.picker = Ext.create('Ext.grid.Panel', opts);
  40
  41         // pass getNode() to the view
  42         picker.getNode = function() {
  43             picker.getView().getNode(arguments);
  44         };
  45
  46         me.mon(picker, {
  47             itemclick: me.onItemClick,
  48             refresh: me.onListRefresh,
  49             show: function() {
  50                 picker.setHeight(me.computeHeight());
  51             },
  52             scope: me
  53         });
  54
  55         me.mon(picker.getSelectionModel(), {
  56             selectionChange: me.onListSelectionChange,
  57             scope: me
  58         });
  59
  60         return picker;
  61     },
  62
  63     initComponent: function() {
  64         var me = this;
  65
  66         Ext.apply(me, {
  67             queryMode: 'local',
  68             editable: false,
  69             matchFieldWidth: false
  70         });
  71
  72         Ext.applyIf(me.listConfig, { width: 400 });
  73
  74         me.callParent();
  75
  76         me.store.on('beforeload', function() {
  77             me.up('form').setLoading(true, true);
  78         });
  79
  80         // hack: autoSelect does not work
  81         me.store.on('load', function(store, r, success, o) {
  82             if (success) {
  83                 var def = me.getValue();
  84                 if (!def || !store.findRecord(me.valueField, def)) {
  85                     var rec = me.store.first();
  86                     if (me.autoSelect && rec && rec.data) {
  87                         def = rec.data[me.valueField];
  88                         me.setValue(def);
  89                     } else {
  90                         me.setValue('');
  91                     }
  92                 }
  93             }
  94             me.up('form').setLoading(false);
  95         });
  96     }
  97 });