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