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