PDA

View Full Version : Ext Form - duplicating a row or inputs



iwarner
25 Mar 2010, 11:22 PM
Hi

For my invoice app the user can enter some details - if they require a new line though I would like the user to be able to Click Add New Line and the previous form elements are duplicated in a new row

Just want to know if there are shortcuts to complete this with ExtJS - I have read about Field Replicator and tested this out but doesnt seem to offer the full package of what I need

ie
Quantity Price Total
1 112 112

Add new line =

Quantity Price Total
1 112 123
Quantity Price Total
- - -

I guess I need to put a listener on the button
Capture the form row and increment the name attributes
Also I would like a remove row





Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.0.0/resources/images/default/s.gif';

Ext.onReady(function()
{
// Instantiate the quick tips
Ext.QuickTips.init();

// Create the Reference data store
var storeReference = new Ext.data.JsonStore({
fields : [
{ name : 'id', type: 'int' },
{ name : 'reference', type: 'string' }
],
root : 'data',
url : '/accounts/reference'
});


var addInvoiceForm = new Ext.FormPanel ({

bodyStyle : 'padding: 5px 5px 0',
frame : false,
iconCls : 'icon-grid',
renderTo : 'addInvoiceForm',
title : 'Add Invoice',
url : 'save-form.php',

items : [{

border : false,
labelAlign : 'left',
layout : 'column',

items : [{
border : false,
columnWidth : .5,
defaults : {
anchor : '95%'
},
layout : 'form',
items : [{
allowBlank : false,
displayField : 'reference',
emptyText : 'Select Debtor',
fieldLabel : 'Debtor',
forceSelection : true,
mode : 'remote',
name : 'reference',
store : storeReference,
typeAhead : true,
triggerAction : 'all',
valueField : 'id',
xtype : 'combo'
}, {
allowBlank : false,
emptyText : 'Create Invoice ID',
fieldLabel : 'Invoice ID',
name : 'invoiceID',
xtype : 'textfield'
}, {
allowBlank : false,
emptyText : 'Enter Purchase Order Number',
fieldLabel : 'P.O. Number',
name : 'purchaseOrder',
xtype : 'textfield'
}, {
allowBlank : false,
emptyText : 'Select Currency',
fieldLabel : 'Currency',
forceSelection : true,
lazyRender : true,
mode : 'local',
store : ['г', '$', 'е'],
typeAhead : true,
triggerAction : 'all',
xtype : 'combo'
}]
},{
border : false,
columnWidth : .5,
defaults : {
anchor : '95%'
},
layout : 'form',
items : [{
allowBlank : false,
emptyText : 'Select Sale Date',
fieldLabel : 'Sale Date',
name : 'saleDate',
xtype : 'datefield'
}, {
emptyText : 'Select Paid Date',
fieldLabel : 'Paid Date',
name : 'paidDate',
xtype : 'datefield'
}, {
allowBlank : false,
fieldLabel : 'Status',
items : [
{ boxLabel: 'Unpaid', name: 'status', inputValue: 'unpaid', checked: true },
{ boxLabel: 'Paid', name: 'status', inputValue: 'paid' },
{ boxLabel: 'Void', name: 'status', inputValue: 'void' }
],
xtype : 'radiogroup',
}]
}]
},{
border : false,
layout : 'column',
labelAlign : 'top',
html : '<hr />',
items : [{
border : false,
columnWidth : .2,
layout : 'form',
items : [{
emptyText : 'Quantity',
fieldLabel : 'Quantity',
name : 'quantity',
plugins : [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
xtype : 'numberfield'
}]
}, {
border : false,
columnWidth : .2,
layout : 'form',
items : [{
emptyText : 'Description',
fieldLabel : 'Description',
name : 'description',
plugins : [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
xtype : 'textfield'
}]
}, {
border : false,
columnWidth : .2,
layout : 'form',
items : [{
emptyText : 'Tax',
fieldLabel : 'Tax',
name : 'tax',
plugins : [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
xtype : 'textfield'
}]
}, {
border : false,
columnWidth : .2,
layout : 'form',
items : [{
emptyText : 'Price',
fieldLabel : 'Price',
name : 'price',
plugins : [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
xtype : 'textfield'
}]
}, {
border : false,
columnWidth : .2,
layout : 'form',
items : [{
emptyText : 'Total',
fieldLabel : 'total',
name : 'total',
plugins : [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
xtype : 'textfield'
}]
}]
}],

buttons : [{
text : 'Save'
},{
text : 'Cancel'
}]
});

});