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