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