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     monStoreErrors: false,
  26
  27     add_combobox_row: function(name, text, opts) {
  28         var me = this;
  29
  30         opts = opts || {};
  31         me.rows = me.rows || {};
  32
  33         me.rows[name] = {
  34             required: true,
  35             defaultValue: opts.defaultValue,
  36             header: text,
  37             renderer: opts.renderer,
  38             editor: {
  39                 xtype: 'proxmoxWindowEdit',
  40                 subject: text,
  41                 fieldDefaults: {
  42                     labelWidth: opts.labelWidth || 100
  43                 },
  44                 items: {
  45                     xtype: 'proxmoxKVComboBox',
  46                     name: name,
  47                     comboItems: opts.comboItems,
  48                     value: opts.defaultValue,
  49                     deleteEmpty: opts.deleteEmpty ? true : false,
  50                     emptyText: opts.defaultValue,
  51                     labelWidth: Proxmox.Utils.compute_min_label_width(
  52                         text, opts.labelWidth),
  53                     fieldLabel: text
  54                 }
  55             }
  56         };
  57     },
  58
  59     add_text_row: function(name, text, opts) {
  60         var me = this;
  61
  62         opts = opts || {};
  63         me.rows = me.rows || {};
  64
  65         me.rows[name] = {
  66             required: true,
  67             defaultValue: opts.defaultValue,
  68             header: text,
  69             renderer: opts.renderer,
  70             editor: {
  71                 xtype: 'proxmoxWindowEdit',
  72                 subject: text,
  73                 fieldDefaults: {
  74                     labelWidth: opts.labelWidth || 100
  75                 },
  76                 items: {
  77                     xtype: 'proxmoxtextfield',
  78                     name: name,
  79                     deleteEmpty: opts.deleteEmpty ? true : false,
  80                     emptyText: opts.defaultValue,
  81                     labelWidth: Proxmox.Utils.compute_min_label_width(
  82                         text, opts.labelWidth),
  83                     vtype: opts.vtype,
  84                     fieldLabel: text
  85                 }
  86             }
  87         };
  88     },
  89
  90     add_boolean_row: function(name, text, opts) {
  91         var me = this;
  92
  93         opts = opts || {};
  94         me.rows = me.rows || {};
  95
  96         me.rows[name] = {
  97             required: true,
  98             defaultValue: opts.defaultValue || 0,
  99             header: text,
 100             renderer: opts.renderer || Proxmox.Utils.format_boolean,
 101             editor: {
 102                 xtype: 'proxmoxWindowEdit',
 103                 subject: text,
 104                 fieldDefaults: {
 105                     labelWidth: opts.labelWidth || 100
 106                 },
 107                 items: {
 108                     xtype: 'proxmoxcheckbox',
 109                     name: name,
 110                     uncheckedValue: 0,
 111                     defaultValue: opts.defaultValue  || 0,
 112                     checked: opts.defaultValue ? true : false,
 113                     deleteDefaultValue: opts.deleteDefaultValue ? true : false,
 114                     labelWidth: Proxmox.Utils.compute_min_label_width(
 115                         text, opts.labelWidth),
 116                     fieldLabel: text
 117                 }
 118             }
 119         };
 120     },
 121
 122     add_integer_row: function(name, text, opts) {
 123         var me = this;
 124
 125         opts = opts || {}
 126         me.rows = me.rows || {};
 127
 128         me.rows[name] = {
 129             required: true,
 130             defaultValue: opts.defaultValue,
 131             header: text,
 132             renderer: opts.renderer,
 133             editor: {
 134                 xtype: 'proxmoxWindowEdit',
 135                 subject: text,
 136                 fieldDefaults: {
 137                     labelWidth: opts.labelWidth || 100
 138                 },
 139                 items: {
 140                     xtype: 'proxmoxintegerfield',
 141                     name: name,
 142                     minValue: opts.minValue,
 143                     maxValue: opts.maxValue,
 144                     emptyText: gettext('Default'),
 145                     deleteEmpty: opts.deleteEmpty ? true : false,
 146                     value: opts.defaultValue,
 147                     labelWidth: Proxmox.Utils.compute_min_label_width(
 148                         text, opts.labelWidth),
 149                     fieldLabel: text
 150                 }
 151             }
 152         };
 153     },
 154
 155     editorConfig: {}, // default config passed to editor
 156
 157     run_editor: function() {
 158         var me = this;
 159
 160         var sm = me.getSelectionModel();
 161         var rec = sm.getSelection()[0];
 162         if (!rec) {
 163             return;
 164         }
 165
 166         var rows = me.rows;
 167         var rowdef = rows[rec.data.key];
 168         if (!rowdef.editor) {
 169             return;
 170         }
 171
 172         var win;
 173         var config;
 174         if (Ext.isString(rowdef.editor)) {
 175             config = Ext.apply({
 176                 confid: rec.data.key,
 177             },  me.editorConfig);
 178             win = Ext.create(rowdef.editor, config);
 179         } else {
 180             config = Ext.apply({
 181                 confid: rec.data.key,
 182             },  me.editorConfig);
 183             Ext.apply(config, rowdef.editor);
 184             win = Ext.createWidget(rowdef.editor.xtype, config);
 185             win.load();
 186         }
 187
 188         win.show();
 189         win.on('destroy', me.reload, me);
 190     },
 191
 192     reload: function() {
 193         var me = this;
 194         me.rstore.load();
 195     },
 196
 197     getObjectValue: function(key, defaultValue) {
 198         var me = this;
 199         var rec = me.store.getById(key);
 200         if (rec) {
 201             return rec.data.value;
 202         }
 203         return defaultValue;
 204     },
 205
 206     renderKey: function(key, metaData, record, rowIndex, colIndex, store) {
 207         var me = this;
 208         var rows = me.rows;
 209         var rowdef = (rows && rows[key]) ?  rows[key] : {};
 210         return rowdef.header || key;
 211     },
 212
 213     renderValue: function(value, metaData, record, rowIndex, colIndex, store) {
 214         var me = this;
 215         var rows = me.rows;
 216         var key = record.data.key;
 217         var rowdef = (rows && rows[key]) ?  rows[key] : {};
 218
 219         var renderer = rowdef.renderer;
 220         if (renderer) {
 221             return renderer(value, metaData, record, rowIndex, colIndex, store);
 222         }
 223
 224         return value;
 225     },
 226
 227     listeners: {
 228         itemkeyup: function(view, record, item, index, e) {
 229             if (e.getKey() === e.ENTER) {
 230                 this.run_editor();
 231             }
 232         }
 233     },
 234
 235     initComponent : function() {
 236         var me = this;
 237
 238         var rows = me.rows;
 239
 240         if (!me.rstore) {
 241             if (!me.url) {
 242                 throw "no url specified";
 243             }
 244
 245             me.rstore = Ext.create('Proxmox.data.ObjectStore', {
 246                 url: me.url,
 247                 interval: me.interval,
 248                 extraParams: me.extraParams,
 249                 rows: me.rows
 250             });
 251         }
 252
 253         var rstore = me.rstore;
 254
 255         var store = Ext.create('Proxmox.data.DiffStore', { rstore: rstore,
 256             sorters: [],
 257             filters: []
 258         });
 259
 260         if (rows) {
 261             Ext.Object.each(rows, function(key, rowdef) {
 262                 if (Ext.isDefined(rowdef.defaultValue)) {
 263                     store.add({ key: key, value: rowdef.defaultValue });
 264                 } else if (rowdef.required) {
 265                     store.add({ key: key, value: undefined });
 266                 }
 267             });
 268         }
 269
 270         if (me.sorterFn) {
 271             store.sorters.add(Ext.create('Ext.util.Sorter', {
 272                 sorterFn: me.sorterFn
 273             }));
 274         }
 275
 276         store.filters.add(Ext.create('Ext.util.Filter', {
 277             filterFn: function(item) {
 278                 if (rows) {
 279                     var rowdef = rows[item.data.key];
 280                     if (!rowdef || (rowdef.visible === false)) {
 281                         return false;
 282                     }
 283                 }
 284                 return true;
 285             }
 286         }));
 287
 288         Proxmox.Utils.monStoreErrors(me, rstore);
 289
 290         Ext.applyIf(me, {
 291             store: store,
 292             stateful: false,
 293             columns: [
 294                 {
 295                     header: gettext('Name'),
 296                     width: me.cwidth1 || 200,
 297                     dataIndex: 'key',
 298                     renderer: me.renderKey
 299                 },
 300                 {
 301                     flex: 1,
 302                     header: gettext('Value'),
 303                     dataIndex: 'value',
 304                     renderer: me.renderValue
 305                 }
 306             ]
 307         });
 308
 309         me.callParent();
 310
 311         if (me.monStoreErrors) {
 312             Proxmox.Utils.monStoreErrors(me, me.store);
 313         }
 314    }
 315 });