git.roojs.org Git - roojs1/blob - Roo/form/GridField.js

   1 //<script type="text/javascript">
   2 /**
   3  * @class Roo.form.GridField
   4  * @extends Roo.form.Field
   5  * Embed a grid (or editable grid into a form)
   6  * STATUS ALPHA
   7  * @constructor
   8  * Creates a new GridField
   9  * @param {Object} config Configuration options
  10  */
  11 Roo.form.GridField = function(config){
  12     Roo.form.GridField.superclass.constructor.call(this, config);
  13
  14 };
  15
  16 Roo.extend(Roo.form.GridField, Roo.form.Field,  {
  17     /**
  18      * @cfg {Number} width  - used to restrict width of grid..
  19      */
  20     width : 100,
  21     /**
  22      * @cfg {Number} height - used to restrict height of grid..
  23      */
  24     height : 50,
  25      /**
  26      * @cfg {Object} xgrid (xtype'd description of grid) Grid or EditorGrid
  27      */
  28     xgrid : false,
  29     /**
  30      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
  31      * {tag: "input", type: "checkbox", autocomplete: "off"})
  32      */
  33    // defaultAutoCreate : { tag: 'div' },
  34     defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
  35     /**
  36      * @cfg {String} addTitle Text to include for adding a title.
  37      */
  38     addTitle : false,
  39     //
  40     onResize : function(){
  41         Roo.form.Field.superclass.onResize.apply(this, arguments);
  42     },
  43
  44     initEvents : function(){
  45         // Roo.form.Checkbox.superclass.initEvents.call(this);
  46         // has no events...
  47
  48     },
  49
  50
  51     getResizeEl : function(){
  52         return this.wrap;
  53     },
  54
  55     getPositionEl : function(){
  56         return this.wrap;
  57     },
  58
  59     // private
  60     onRender : function(ct, position){
  61
  62         this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
  63         var style = this.style;
  64         delete this.style;
  65
  66         Roo.form.DisplayImage.superclass.onRender.call(this, ct, position);
  67         this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
  68         this.viewEl = this.wrap.createChild({ tag: 'div' });
  69         if (style) {
  70             this.viewEl.applyStyles(style);
  71         }
  72         if (this.width) {
  73             this.viewEl.setWidth(this.width);
  74         }
  75         if (this.height) {
  76             this.viewEl.setHeight(this.height);
  77         }
  78         //if(this.inputValue !== undefined){
  79         //this.setValue(this.value);
  80
  81
  82         this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
  83
  84
  85         this.grid.render();
  86         this.grid.getDataSource().on('remove', this.refreshValue, this);
  87         this.grid.getDataSource().on('update', this.refreshValue, this);
  88         this.grid.on('afteredit', this.refreshValue, this);
  89
  90     },
  91
  92
  93     /**
  94      * Sets the value of the item.
  95      * @param {String} either an object  or a string..
  96      */
  97     setValue : function(v){
  98         //this.value = v;
  99         v = v || []; // empty set..
 100         // this does not seem smart - it really only affects memoryproxy grids..
 101         if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
 102             var ds = this.grid.getDataSource();
 103             // assumes a json reader..
 104             var data = {}
 105             data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
 106             ds.loadData( data);
 107         }
 108         Roo.form.GridField.superclass.setValue.call(this, v);
 109         this.refreshValue();
 110         // should load data in the grid really....
 111     },
 112
 113     // private
 114     refreshValue: function() {
 115          var val = [];
 116         this.grid.getDataSource().each(function(r) {
 117             val.push(r.data);
 118         });
 119         this.el.dom.value = Roo.encode(val);
 120     }
 121
 122
 123
 124
 125 });