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