Grid RecordForm Plugin

**Manuelbond007** · 30 Jan 2011 7:39 AM

Hi, this work:
listeners:{
select: function(combo,record,index){
rform = Ext.getCmp('examplegrid1').recordForm.form.getForm();
rform.items.itemAt(0).setValue(record.get('pro_id'));//This is the first field: rform.items.itemAt(0)
...
Thanksss
Saludos desde Perú

**tomdchi** · 26 Apr 2011 8:42 PM

I am trying to get this to work using code generated in part by Ext Designer. Can someone take a look and see where I am going wrong. I get the error

Code:

window.items is undefined
/js/UX/Ext.ux.grid.RecordForm.js
Line 513

In the example the RowActions plugin is used but I have had a hard time getting it to work so I am using the built in ActionColumn instead.

My Ui.js and handler file:

Code:

RPS.Client.AssignedReturnsGridUi = Ext.extend(Ext.grid.EditorGridPanel, {
    layout: 'fit',
    columnWidth: 0.5,
    autoScroll: true,
    flex: 1,
    title: 'Returns Assigned',
    store: 'returnddstore',
    loadMask: true,
    boxMinHeight: 460,
    cls: 'grid-row-assignreturns',
    ddGroup: 'firstGridDDGroup',
    ref: 'assignedreturnsref',
    initComponent: function() {
        this.selModel = new Ext.grid.RowSelectionModel({
            singleSelect: true
        });
        this.columns = [
            {
                xtype: 'gridcolumn',
                dataIndex: 'jurisname_long',
                header: 'Jurisdiction',
                sortable: true,
                width: 100,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'return_name',
                header: 'Return Name',
                sortable: true,
                width: 100,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'returntype',
                header: 'Return Type',
                sortable: true,
                width: 75,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'duedate',
                header: 'Due Date',
                sortable: true,
                width: 65,
                editable: false,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'Jurisdiction ID',
                sortable: true,
                width: 100,
                dataIndex: 'jurisid',
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'Return Code',
                sortable: true,
                width: 100,
                dataIndex: 'returncode',
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'Return Type ID',
                sortable: true,
                width: 100,
                dataIndex: 'typeid',
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'numbercolumn',
                header: 'Payment Type ID',
                dataIndex: 'payment_typeid',
                sortable: true,
                width: 100,
                align: 'right',
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'Payment Type',
                sortable: true,
                width: 100,
                dataIndex: 'payment_type',
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'Login',
                dataIndex: 'login',
                sortable: true,
                width: 100,
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'userid',
                dataIndex: 'userid',
                sortable: true,
                width: 100,
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'accesscode',
                dataIndex: 'accesscode',
                sortable: true,
                width: 100,
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'password',
                dataIndex: 'password',
                sortable: true,
                width: 100,
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            {
                xtype: 'gridcolumn',
                header: 'notes',
                dataIndex: 'notes',
                sortable: true,
                width: 100,
                hidden: true,
                editor: {
                    xtype: 'textfield'
                }
            },
            Ext.create({
                xtype: 'rpsactioncolumn'
            })
        ];
        this.bbar = {
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'tbfill'
                },
                {
                    xtype: 'buttongroup',
                    columns: 2,
                    frame: false,
                    items: [
                        {
                            xtype: 'button',
                            text: 'Save',
                            ref: '../../submitBtn'
                        },
                        {
                            xtype: 'button',
                            text: 'Reset',
                            ref: '../../resetBtn'
                        }
                    ]
                }
            ]
        };
        RPS.Client.AssignedReturnsGridUi.superclass.initComponent.call(this);
    }
});


RPS.Client.AssignedReturnsGrid = Ext.extend(RPS.Client.AssignedReturnsGridUi, {
    initComponent: function() {
        RPS.Client.AssignedReturnsGrid.superclass.initComponent.call(this);
        this.submitBtn.on('click', this.onSubmit, this);
        this.resetBtn.on('click', this.onReset, this);
    },
    onSubmit: function() {
        
    },
    onReset: function() {
        Ext.StoreMgr.get('returncatalogstore').reload();
        this.store.removeAll();
    }
});
Ext.reg('assignedreturnsgrid', RPS.Client.AssignedReturnsGrid);

Code for ActionColumn:

Code:

RPS.Client.ActionCol = Ext.extend(Ext.grid.ActionColumn, {
    constructor: function(cfg) {
        cfg = {
            width: 60,
            header: 'More Info',
            items: [
                {
                    icon: 'images/icons/application_add.png',
                    handler: this.onActionAdd,
                    scope: this
                }
            ]
        };
        RPS.Client.ActionCol.superclass.constructor.call(this, Ext.apply({
        }, cfg));
    },
    onActionAdd: function(grid, rowIndex, colIndex) {
        var recordForm = new Ext.ux.grid.RecordForm({
            title:'Ext.ux.grid.RowRecord Example'
            ,iconCls:'icon-edit-record'
            ,columnCount:2
            ,formConfig:{
                labelWidth:80
                ,buttonAlign:'right'
                ,bodyStyle:'padding-top:10px'
            }
        });
        var record = grid.getStore().getAt(rowIndex);
        recordForm.show(record, grid.getView().getCell(rowIndex, colIndex));
    }
});
Ext.reg('rpsactioncolumn', RPS.Client.ActionCol);

**jsakalos** · 26 Apr 2011 10:59 PM

It looks like a scope problem as "window" is global object and it is not expected to have property "items". Set your firefox to "break on all errors" and when it stops go up the call stack to find the real reason of it.

**tomdchi** · 28 Apr 2011 12:16 PM

I had to call

Code:

recordForm.init(grid);

to get it to work. I think the problem was that since this is a drop target for drag and drop that there where no items in the column model when the grid is first rendered. So calling the init method before I want the form to show makes it get the latest values from the cm.

Code:

 RPS.Client.ActionCol = Ext.extend(Ext.grid.ActionColumn, {
    constructor: function(cfg) {
        cfg = {
            width: 50,
            header: 'More Info',
            items: [
                {
                    icon: 'images/icons/application_add.png',
                    handler: this.onActionAdd,
                    scope: this
                }
            ]
        };
        RPS.Client.ActionCol.superclass.constructor.call(this, Ext.apply({
        }, cfg));
    },
    onActionAdd: function(grid, rowIndex, colIndex) {
        var record = grid.getStore().getAt(rowIndex);
        var recordForm = new Ext.ux.grid.RecordForm({
            title:'Ext.ux.grid.RowRecord Example'
            ,iconCls:'icon-edit-record'
            ,columnCount:2
            ,formConfig:{
                labelWidth:80
                ,buttonAlign:'right'
                ,bodyStyle:'padding-top:10px'
            }
        });
        recordForm.init(grid);
        recordForm.show(record, grid.getView().getCell(rowIndex, colIndex));
    }
});
Ext.reg('action_column', RPS.Client.ActionCol);

**return1.at** · 5 Sep 2011 7:19 AM

here is a modfied version, which works with extjs 4

Code:

/**
 * @class Ext.ux.grid.RecordForm
 * @extends Ext.util.Observable
 *
 * RecordForm plugin, form that edits grid's record
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      5. September 2011
 * @version   1.1
 *
 * @description recordform 1.1, updated for extjs 4, by Dominique Lederer, http://return1.at/
 *
 * @license Ext.ux.grid.RecordForm.js is licensed under the terms of the Open Source
 * LGPL 3.0 license. Commercial use is permitted to the extent that the 
 * code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
 * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
 *
 * @forum     31341
 * @demo      http://recordform.extjs.eu
 * @download  
 * <ul>
 * <li><a href="http://recordform.extjs.eu/recordform.tar.bz2">recordform.tar.bz2</a></li>
 * <li><a href="http://recordform.extjs.eu/recordform.tar.gz">recordform.tar.gz</a></li>
 * <li><a href="http://recordform.extjs.eu/recordform.zip">recordform.zip</a></li>
 * </ul>
 *
 * @donate
 * <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
 * <input type="hidden" name="cmd" value="_s-xclick">
 * <input type="hidden" name="hosted_button_id" value="3430419">
 * <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" 
 * border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
 * <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
 * </form>
 */
 
Ext.ns('Ext.ux.grid');


/**
 * Creates new RecordForm plugin
 * @constructor
 * @param {Object} config A config object
 */
Ext.ux.grid.RecordForm = function(config) {
	Ext.apply(this, config);


	// call parent
	Ext.ux.grid.RecordForm.superclass.constructor.call(this);
}; // eo constructor


Ext.define('Ext.ux.grid.RecordForm', {
    extend: 'Ext.util.Observable',
    alias : 'widget.gridrecordform',


	// {{{
	// configuration options
	 autoHide:true
	/**
	 * @cfg {String} cancelIconCls Icon class for cancel button
	 */
	 ,cancelIconCls:'icon-cancel'


	/**
	 * @cfg {String} cancelText Text for cancel button
	 */
	,cancelText:'Cancel'


	/**
	 * @cfg {Number} columnCount Form fields are arranged into columns; 
	 * this says how many columns you want
	 */
	,columnCount:1


	/**
	 * @cfg {Object} defaultFormConfig Default configuration of form
	 * @private
	 */
	,defaultFormConfig: {
		 border:false
		,frame:true
		,autoHeight:true
        ,fieldDefaults:{
            labelWidth:100
        }
	}


	/**
	 * @cfg {Object} defaultWindowConfig Default configuration of widnow
	 * @private
	 */
	,defaultWindowConfig:{
		 border:false
		,width:480
		,autoHeight:true
		,layout:'fit'
		,closeAction:'hide'
		,modal:true
		//,plugins:[new Ext.ux.menu.IconMenu({defaultItems:[]})]
	}


	/** 
	 * @cfg {String} dirtyRowCls class to apply to dirty (edited) row
	 */
	,dirtyRowCls:'ux-grid3-dirty-row'


	/**
	 * @cfg {Number} focusDefer Time in ms before the first form field is focused
	 * @private
	 */
	,focusDefer:200


	/**
	 * @cfg {Object} formConfig Additional configuration options for form
	 * Overrides defaultFormConfig
	 */


	/**
	 * @cfg {String} iconCls icon to use for title of the popup window
	 */


	/**
	 * @cfg {Object} ignoreFields Object {fieldName:true, fieldName2:true} with
	 * fields to ignore. These fields are not displayed in the form.
	 */


	/**
	 * @cfg {Object} readonlyFields Object {fieldName:true, fieldName2:true} with
	 * fields to set as read only.
	 */


	/**
	 * @cfg {Object} disabledFields Object {fieldName:true, fieldName2:true} with
	 * fields to set as disabled.
	 */


	/**
	 * @cfg {Object} mapping Mapping of Record types to Field xtypes
	 */
	,mapping:{
		 'auto':'textfield'
		,'boolean':'checkbox'
		,'date':'datefield'
		,'float':'numberfield'
		,'int':'numberfield'
		,'string':'textfield'
	}


	/**
	 * @cfg {String} newRowCls class to apply to new row
	 */
	,newRowCls:'ux-grid3-new-row'


	/**
	 * @cfg {String} okIconCls Icon class for OK button
	 */
	,okIconCls:'icon-ok'


	/**
	 * @cfg {String} okText Text for OK button
	 */
	,okText:'OK'


	/**
	 * @cfg {String} title Title to use for popup window
	 */
	
	/**
	 * @cfg {Boolean} showButtons false to not show OK and Cancel buttons. (defaults to true)
	 */
	,showButtons:true


	/**
	 * @cfg {Object} windowConfig Additional configuration options for window.
	 * Overrides defaultWindowConfig.
	 */
	// }}}
	// {{{
	/**
	 * Main init function
	 * @private
	 */
	,init:function(grid) {


		// install custom getRowClass to grid view
		Ext.Function.createSequence(grid.afterRender, function() {
            if ('function' === typeof grid.view.getRowClass) {
                Ext.Function.createSequence(grid.view.getRowClass, this.getRowClass, this);
            }
            else {
                grid.view.getRowClass = Ext.bind(this.getRowClass, this);
            }
            if (this.autoShow) {
                this.show({data:{}});
            }
        }, this);




		// save reference to grid
		this.grid = grid;


		// we need to reconfigure ourselves when grid reconfigures
		//grid.reconfigure = grid.reconfigure.createSequence(this.reconfigure, this);
        Ext.Function.createSequence(grid.reconfigure, this.reconfigure, this);


		// initial (re)configuration
		this.reconfigure();
	} // eo function init
	// }}}
	// {{{
	/**
	 * Override this to add processing you need to run after the record update
	 * @param {Ext.data.Record} record Record that has been updated
	 */
	,afterUpdateRecord:Ext.emptyFn
	// }}}
	// {{{
	/**
	 * Creates form configuration. Form is created later in show function
	 * @private
	 */
	,createFormConfig:function() {


		// run only once 
		if(this.form) {
			return;
		}


		// get vars
		var cm = this.grid.columns;
		var fields = this.grid.store.model.create({}).fields;
		var store = this.grid.store;


		// {{{
		// create form *config* object - it does NOT instantiate the form
		this.form = Ext.apply({
			 xtype:'form'
			,items:[{


				// column layout
				 layout:'column'
				,anchor:'100%'
				,border:false
				,monitorValid:true
				,autoHeight:true
				,defaults:{
					 columnWidth:1/this.columnCount
					,autoHeight:true
					,border:false
					,layout:'anchor'
					,hideLabel:true
				}


				// columns
				,items: Ext.bind(function() {
                    var items = [];
                    for (var i = 0; i < this.columnCount; i++) {
                        items.push({
                            defaults:{
                                anchor:'-25'
                            }
                            ,items:[]
                        });
                    }
                    return items;
                }, this)()
			}]


			// buttons
			,buttons: Ext.bind(function() {
				if(this.showButtons) {
					return [{
						 text:this.okText
						,iconCls:this.okIconCls
						,scope:this
						,handler:this.onOK
						,formBind:true
					},{
						 text:this.cancelText
						,iconCls:this.cancelIconCls
						,scope:this
						,handler:this.onCancel
					}];
				}
				else {
					return [];
				}
			}, this)()


			// ok on enter
			,keys:[{
				 key:[10,13] // enter
				,scope:this
				,stopEvent:true
				,fn:this.onOK
			}]
		}, this.formConfig, this.defaultFormConfig); // eo form config
		// }}}
		// {{{
		// add form fields from store or column model. cm has priority
		var colIndex = 0;
		var tabIndex = 1;


		// store record fields loop
		fields.each(function(f, i) {
			// ignore some fields
			if(this.ignoreFields && this.ignoreFields[f.name]) {
				return;
			}


			// attempt to get config from column model
			var c = this.findConfig(cm, f.name);
			var o = {};
            var editor = c.getEditor();


			// use cm editor if we have one
			if(editor) {
				Ext.apply(o, {
					 xtype:editor.getXType()
					,fieldLabel:c.text
				}, editor.initialConfig);
			}						


			// use this.mapping to get field xtype
			else {
				Ext.apply(o, {
					 fieldLabel:(c && c.text ? c.text : f.name)
					,xtype:this.mapping[f.type] || 'textfield'
				});
				if('date' === f.type && f.dateFormat) {
					o.format = f.dateFormat;
				}
			}


			// read only and disabled fields
			if(this.readonlyFields && true === this.readonlyFields[f.name]) {
				o.readOnly = true;
			}
			if(this.disabledFields && true === this.disabledFields[f.name]) {
				o.disabled = true;
			}
			
			// field has to have name
			o.name = f.name;
			o.tabIndex = tabIndex++;


			// do not anchor date and time fields
			if('datefield' === o.xtype || 'timefield' === o.xtype || 'datetime' === o.xtype) {
				o.anchor = '';
			}
			if('textarea' === o.xtype) {
				o.grow = false;
				o.autoHeight = true;
			}


			// add field to a column on left-to-right top-to-bottom basis
			this.form.items[0].items[colIndex++].items.push(o);
			colIndex = colIndex === this.columnCount ? 0 : colIndex;
			
		}, this);
		// }}}


	} // eo function createFormConfig
	// }}}
	// {{{
	/**
	 * Finds if a configuration exists for a given dataIndex in column model
	 * @private
	 * @param {Ext.grid.ColumnModel} cm
	 * @param {String} dataIndex 
	 */
	,findConfig:function(cm, dataIndex) {
		var config = null;
		Ext.each(cm, function(c, i) {
			if(config) {
				return;
			}
			if(dataIndex === c.dataIndex) {
				config = c;
			}
		});


		return config;
	} // eo function findConfig
	// }}}
	// {{{
	/**
	 * GridVew getRowClass sequence function - override it to get custom effects
	 * @param {Ext.data.Record} record record we should return the class for
	 */
	,getRowClass:function(record) {
		if(record.get('newRecord')) {
			return this.newRowCls;
		}
		if(record.dirty) {
			return this.dirtyRowCls;
		}
		return '';
	} // eo function getRowClass
	// }}}
	// {{{
	/**
	 * Destroys components we've created
	 * @private
	 */
	,onDestroy:function() {
		if(this.window) {
			this.window.destroy();
			this.window = null;
			this.form = null;
		}
		else if(this.form) {
			if('function' === typeof this.form.destroy) {
				this.form.destroy();
			}
			this.form = null;
		}
	} // eo function onDestroy
	// }}}
	// {{{
	/**
	 * OK button click handler
	 */
	,onOK:function() {
		this.updateRecord();
		if(this.autoHide) {
			this.window.hide(null);
		}
	} // eo function onOK
	// }}}
	// {{{
	/**
	 * Cancel button handler, removes new record if it is not dirty
	 */
	,onCancel:function() {
		if(this.record.get('newRecord') && !this.record.dirty) {
			this.record.store.remove(this.record);
		}
		if(this.autoHide) {
			this.window.hide(null);
		}
	} // eo function onCancel
	// }}}
	// {{{
	/**
	 * Reconfigures the plugin - deletes old form and creates new one
	 * Runs also after grid reconfigure call
	 * @private
	 */
	,reconfigure:function() {
		// destroy old window and form
		this.onDestroy();


		// create new form configuration
		// form will be instantiated and rendered in show function
		this.createFormConfig();
	} // eo function reconfigure
	// }}}


	,getPanel:function() {		
		if(this.window) {
			return this.window;
		}
		if(this.formCt) {
			var panel = Ext.getCmp(this.formCt);
			if(panel) {
				panel.add(this.form);
				panel.doLayout();
			}
			else {
				panel = Ext.fly(this.formCt);
				if(panel) {
					panel = new Ext.Panel({
						 renderTo:panel
						,items:this.form
					});
				}
			}
		}
		else {
			var config = Ext.apply({}, this.defaultWindowConfig);
			config = Ext.apply(config, this.windowConfig);
			Ext.applyIf(config, {
				 title:this.title || this.grid.title
				,iconCls:this.iconCls || this.grid.iconCls
				,items:this.form
				,listeners:{
					show:{scope:this, delay:this.focusDefer, fn:function() {
						this.form.startPolling();
						var basicForm = this.form.getForm()


						// focus first form field on window show
						basicForm.getFields().getAt(0).focus();


						// mark fields invalid if any
						basicForm.isValid();
					}}
					,hide:{scope:this, fn:function() {
						this.form.stopPolling();
					}}
				}
			});
			var window = new Ext.Window(config);
			this.form = window.items.getAt(0);
			return window;
		}
		panel.on({
			show:{scope:this, delay:this.focusDefer, fn:function() {
				this.form.startPolling();
				var basicForm = this.form.getForm()


				// focus first form field on window show
				basicForm.getFields().getAt(0).focus();


				// mark fields invalid if any
				basicForm.isValid();
			}}
			,hide:{scope:this, fn:function() {
				this.form.stopPolling();
			}}
		});
		this.form = panel.items.getAt(0);
		return panel;


	} // eo function getPanel


	// {{{
	/**
	 * Shows the record form in the window
	 * @param {Ext.data.Record} record Record to bind to
	 * @param {Ext.Element/DOMElement/String} animEl window show animation element
	 */
	,show:function(record, animEl) {




		// lazy create window
		if(!this.window) {
			this.window = this.getPanel();
		}


		// show window
		this.window.show(animEl);


		// populate fields with values
		var basicForm = this.form.getForm();
		basicForm.loadRecord(record);




		// save record we're currently editing
		this.record = record;
	} // eo function show
	// }}}
	// {{{
	/**
	 * Updates record in store
	 * @private
	 */
	,updateRecord:function() {
		// loop through form fields and update underlying record
		this.form.getForm().getFields().each(function(item, i) {
			this.record.set(item.name, item.getValue());			
		}, this);


		this.afterUpdateRecord(this.record);


	} // eo function updateRecord
	// }}}
 
}); // eo define


// eof

**tdikarim** · 25 Oct 2011 5:48 AM

I all,

Thanks Saki for this great plugin

I try to integrate it in my app with no success. could you help to find what is wrong ?

I use Ext 3.3.1
the grid is contained in a tab panel
the grid is configured by metadata

I try this:

var recordForm = new Ext.ux.grid.RecordForm({
title:'Ext.ux.grid.RowRecord'
,iconCls:'icon-edit-record'
,columnCount:2
,autoShow:true
,formConfig:{
labelWidth:80
,buttonAlign:'right'
,bodyStyle:'padding-top:10px'
}
});

var grid = new Ext.grid.EditorGridPanel({
...
,plugins: [..., recordForm]
...
})

But I have some stange error

Thanks for give me a way to use it in a tabpanel

Karim

**tdikarim** · 26 Oct 2011 4:31 AM

I have comment autoShow:true and all works fine now.
It's great
Thanks again

**tdikarim** · 26 Oct 2011 7:07 AM

I have no value on any datefield
somewone have an idea plz

**tdikarim** · 31 Oct 2011 6:55 AM

I have found my error
The format of my date was dd-Short Month Name-yy (from oracle query)
I have convert the format by ISO and now it's work

Thanks again for this plugin

**bizcatalyst** · 15 Mar 2013 11:30 AM

Hello,
As I detailed at http://www.sencha.com/forum/showthre...ample&p=947564, I ran into a snag when I tried changing the columns definition to a colModel defined as a new Ext.ux.grid.LockingColumnModel.

Saki can your RecordForm plugin be used with locking columns? If so, is there something I'm missing to getting it to work?

Has anyone else tried to add locking columns to this example and been successful?
Thank you,
Robert

Grid RecordForm Plugin

Thread Tools

Search Thread

Display

Extjs 4 working version

Extjs 4 working version

grid in tabpanel

grid in tabpanel

datefield problem

datefield problem

Can column locking be used with the recordform plugin?

Can column locking be used with the recordform plugin?