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