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