1 //<script type="text/javascript">
3 * @class Roo.form.GridField
4 * @extends Roo.form.Field
5 * Embed a grid (or editable grid into a form)
8 * This embeds a grid in a form, the value of the field should be the json encoded array of rows
10 * xgrid.store = Roo.data.Store
11 * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
12 * xgrid.store.reader = Roo.data.JsonReader
16 * Creates a new GridField
17 * @param {Object} config Configuration options
19 Roo.form.GridField = function(config){
20 Roo.form.GridField.superclass.constructor.call(this, config);
24 Roo.extend(Roo.form.GridField, Roo.form.Field, {
26 * @cfg {Number} width - used to restrict width of grid..
30 * @cfg {Number} height - used to restrict height of grid..
34 * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
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"})
43 // defaultAutoCreate : { tag: 'div' },
44 defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
46 * @cfg {String} addTitle Text to include for adding a title.
50 onResize : function(){
51 Roo.form.Field.superclass.onResize.apply(this, arguments);
54 initEvents : function(){
55 // Roo.form.Checkbox.superclass.initEvents.call(this);
61 getResizeEl : function(){
65 getPositionEl : function(){
70 onRender : function(ct, position){
72 this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
73 var style = this.style;
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' });
80 this.viewEl.applyStyles(style);
83 this.viewEl.setWidth(this.width);
86 this.viewEl.setHeight(this.height);
88 //if(this.inputValue !== undefined){
89 //this.setValue(this.value);
92 this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
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);
104 * Sets the value of the item.
105 * @param {String} either an object or a string..
107 setValue : function(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..
115 data[ds.reader.meta.root ] = typeof(v) == 'string' ? Roo.decode(v) : v;
118 // clear selection so it does not get stale.
120 this.grid.sm.clearSelections();
123 Roo.form.GridField.superclass.setValue.call(this, v);
125 // should load data in the grid really....
129 refreshValue: function() {
131 this.grid.getDataSource().each(function(r) {
134 this.el.dom.value = Roo.encode(val);