Roo/form/GridField.js

//<script type="text/javascript">
/**
 * @class Roo.form.GridField
 * @extends Roo.form.Field
 * Embed a grid (or editable grid into a form)
 * STATUS ALPHA
 * 
 * This embeds a grid in a form, the value of the field should be the json encoded array of rows
 * it needs 
 * xgrid.store = Roo.data.Store
 * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
 * xgrid.store.reader = Roo.data.JsonReader 
 * 
 * 
 * @constructor
 * Creates a new GridField
 * @param {Object} config Configuration options
 */
Roo.form.GridField = function(config){
    Roo.form.GridField.superclass.constructor.call(this, config);

};

Roo.extend(Roo.form.GridField, Roo.form.Field,  {
    /**
     * @cfg {Number} width  - used to restrict width of grid..
     */
    width : 100,
    /**
     * @cfg {Number} height - used to restrict height of grid..
     */
    height : 50,
     /**
     * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
         * 
         *}
     */
    xgrid : false,
    /**
     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
     * {tag: "input", type: "checkbox", autocomplete: "off"})
     */
   // defaultAutoCreate : { tag: 'div' },
    defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
    /**
     * @cfg {String} addTitle Text to include for adding a title.
     */
    addTitle : false,
    //
    onResize : function(){
        Roo.form.Field.superclass.onResize.apply(this, arguments);
    },

    initEvents : function(){
        // Roo.form.Checkbox.superclass.initEvents.call(this);
        // has no events...

    },


    getResizeEl : function(){
        return this.wrap;
    },

    getPositionEl : function(){
        return this.wrap;
    },

    // private
    onRender : function(ct, position){

        this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
        var style = this.style;
        delete this.style;

        Roo.form.GridField.superclass.onRender.call(this, ct, position);
        this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
        this.viewEl = this.wrap.createChild({ tag: 'div' });
        if (style) {
            this.viewEl.applyStyles(style);
        }
        if (this.width) {
            this.viewEl.setWidth(this.width);
        }
        if (this.height) {
            this.viewEl.setHeight(this.height);
        }
        //if(this.inputValue !== undefined){
        //this.setValue(this.value);


        this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);


        this.grid.render();
        this.grid.getDataSource().on('remove', this.refreshValue, this);
        this.grid.getDataSource().on('update', this.refreshValue, this);
        this.grid.on('afteredit', this.refreshValue, this);

    },


    /**
     * Sets the value of the item. 
     * @param {String} either an object  or a string..
     */
    setValue : function(v){
        //this.value = v;
        v = v || []; // empty set..
        // this does not seem smart - it really only affects memoryproxy grids..
        if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
            var ds = this.grid.getDataSource();
            // assumes a json reader..
            var data = {}
            data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
            ds.loadData( data);
        }
        // clear selection so it does not get stale.
        if (this.grid.sm) {
            this.grid.sm.clearSelections();
        }

        Roo.form.GridField.superclass.setValue.call(this, v);
        this.refreshValue();
        // should load data in the grid really....
    },

    // private
    refreshValue: function() {
         var val = [];
        this.grid.getDataSource().each(function(r) {
            val.push(r.data);
        });
        this.el.dom.value = Roo.encode(val);
    }




});