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