grid/ObjectGrid.js

   1 /* Renders a list of key values objets
   2
   3 mandatory config parameters:
   4 rows: an object container where each propery is a key-value object we want to render
   5        var rows = {
   6            keyboard: {
   7                header: gettext('Keyboard Layout'),
   8                editor: 'Your.KeyboardEdit',
   9                required: true
  10            },
  11
  12 optional:
  13 disabled: setting this parameter to true will disable selection and focus on the
  14 proxmoxObjectGrid as well as greying out input elements.
  15 Useful for a readonly tabular display
  16
  17 */
  18
  19 Ext.define('Proxmox.grid.ObjectGrid', {
  20     extend: 'Ext.grid.GridPanel',
  21     alias: ['widget.proxmoxObjectGrid'],
  22     disabled: false,
  23     hideHeaders: true,
  24
  25     editorConfig: {}, // default config passed to editor
  26
  27     run_editor: function() {
  28         var me = this;
  29
  30         var sm = me.getSelectionModel();
  31         var rec = sm.getSelection()[0];
  32         if (!rec) {
  33             return;
  34         }
  35
  36         var rows = me.rows;
  37         var rowdef = rows[rec.data.key];
  38         if (!rowdef.editor) {
  39             return;
  40         }
  41
  42         var win;
  43         var config;
  44         if (Ext.isString(rowdef.editor)) {
  45             config = Ext.apply({
  46                 confid: rec.data.key,
  47             },  me.editorConfig);
  48             win = Ext.create(rowdef.editor, config);
  49         } else {
  50             config = Ext.apply({
  51                 confid: rec.data.key,
  52             },  me.editorConfig);
  53             Ext.apply(config, rowdef.editor);
  54             win = Ext.createWidget(rowdef.editor.xtype, config);
  55             win.load();
  56         }
  57
  58         win.show();
  59         win.on('destroy', me.reload, me);
  60     },
  61
  62     reload: function() {
  63         var me = this;
  64         me.rstore.load();
  65     },
  66
  67     getObjectValue: function(key, defaultValue) {
  68         var me = this;
  69         var rec = me.store.getById(key);
  70         if (rec) {
  71             return rec.data.value;
  72         }
  73         return defaultValue;
  74     },
  75
  76     renderKey: function(key, metaData, record, rowIndex, colIndex, store) {
  77         var me = this;
  78         var rows = me.rows;
  79         var rowdef = (rows && rows[key]) ?  rows[key] : {};
  80         return rowdef.header || key;
  81     },
  82
  83     renderValue: function(value, metaData, record, rowIndex, colIndex, store) {
  84         var me = this;
  85         var rows = me.rows;
  86         var key = record.data.key;
  87         var rowdef = (rows && rows[key]) ?  rows[key] : {};
  88
  89         var renderer = rowdef.renderer;
  90         if (renderer) {
  91             return renderer(value, metaData, record, rowIndex, colIndex, store);
  92         }
  93
  94         return value;
  95     },
  96
  97     initComponent : function() {
  98         var me = this;
  99
 100         var rows = me.rows;
 101
 102         if (!me.rstore) {
 103             if (!me.url) {
 104                 throw "no url specified";
 105             }
 106
 107             me.rstore = Ext.create('Proxmox.data.ObjectStore', {
 108                 url: me.url,
 109                 interval: me.interval,
 110                 extraParams: me.extraParams,
 111                 rows: me.rows
 112             });
 113         }
 114
 115         var rstore = me.rstore;
 116
 117         var store = Ext.create('Proxmox.data.DiffStore', { rstore: rstore,
 118             sorters: [],
 119             filters: []
 120         });
 121
 122         if (rows) {
 123             Ext.Object.each(rows, function(key, rowdef) {
 124                 if (Ext.isDefined(rowdef.defaultValue)) {
 125                     store.add({ key: key, value: rowdef.defaultValue });
 126                 } else if (rowdef.required) {
 127                     store.add({ key: key, value: undefined });
 128                 }
 129             });
 130         }
 131
 132         if (me.sorterFn) {
 133             store.sorters.add(Ext.create('Ext.util.Sorter', {
 134                 sorterFn: me.sorterFn
 135             }));
 136         }
 137
 138         store.filters.add(Ext.create('Ext.util.Filter', {
 139             filterFn: function(item) {
 140                 if (rows) {
 141                     var rowdef = rows[item.data.key];
 142                     if (!rowdef || (rowdef.visible === false)) {
 143                         return false;
 144                     }
 145                 }
 146                 return true;
 147             }
 148         }));
 149
 150         Proxmox.Utils.monStoreErrors(me, rstore);
 151
 152         Ext.applyIf(me, {
 153             store: store,
 154             stateful: false,
 155             columns: [
 156                 {
 157                     header: gettext('Name'),
 158                     width: me.cwidth1 || 200,
 159                     dataIndex: 'key',
 160                     renderer: me.renderKey
 161                 },
 162                 {
 163                     flex: 1,
 164                     header: gettext('Value'),
 165                     dataIndex: 'value',
 166                     renderer: me.renderValue
 167                 }
 168             ]
 169         });
 170
 171         me.callParent();
 172    }
 173 });