Extjs Grid Layout Rows Adding, Editing, Summarizing Dynamically In a Form Panel

18 Dec

index.html:-

<html>
<head>
<title>Extjs Grid Layout Rows Adding, Editing, Summarizing Dynamically</title>

<link rel=”stylesheet” type=”text/css” href=”extjs/resources/css/ext-all.css”>
<script type=”text/javascript” src=”extjs/ext-debug.js”></script>

<script type=”text/javascript” src=”app.js”></script>
</head>
<body></body>
</html>

app.js:-

/**
* @example Renderers
*
* This grid demonstrates the use of a couple different custom renderers.
*/
Ext.require(‘Ext.data.*’);
Ext.require(‘Ext.grid.*’);
Ext.require(‘Ext.form.*’);
Ext.require(‘Ext.tip.QuickTipManager’);

Ext.define(‘NewEstimate’, {
extend: ‘Ext.data.Model’,
fields: ['description', 'cost'],
validations: [{
type: 'length',
field: 'description',
min: 3
}, {
type: 'int',
field: 'cost',
min: 1
}]
});

Ext.onReady(function() {

var cellEditing = Ext.create(‘Ext.grid.plugin.CellEditing’, {
clicksToEdit: 1,
listeners: {
edit: function(){
grid.getView().refresh();
}
}
});

var store = Ext.create(‘Ext.data.Store’, {
autoLoad: true,
autoSync: false,
model: ‘NewEstimate’,
proxy: {
type: ‘rest’,
url: ‘app.php/users’,
reader: {
type: ‘json’,
root: ‘data’
},
writer: {
type: ‘json’
}
}
});

var rowEditing = Ext.create(‘Ext.grid.plugin.RowEditing’);

var gridPanel = new Ext.create(‘Ext.grid.Panel’, {
renderTo: Ext.getBody(),
store: store,
height: Ext.getBody().getViewSize().height * 0.3,
width: 500,
layout : ‘fit’,
plugins: [rowEditing],
features: [{
ftype: 'summary'
}],
columns: [

{
text: 'Description',
flex: 1,
tdCls: 'task',
sortable: true,
dataIndex: 'description',
editor: 'textfield',
field: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'Line Total',
width: 90,
sortable: true,
dataIndex: 'cost',
id: 'cost',
width: 75,
renderer: function(v, params, record){
return Ext.String.format('&euro; {0}', record.get('cost'));
},
summaryType: function(records)

{
var i = 0, length = records.length, total = 0, record;

for (; i < length; ++i) {
record = records[i];
total += Number(record.get(‘cost’));
}
total = Number(total).toFixed(2);
vat = Number(21 * (total/100)).toFixed(2);
gtotal = (Number(vat) + Number(total)).toFixed(2);
formPanel.query(‘displayfield[name="total"]‘)[0].setValue(‘<b>&euro;&nbsp;’+total+’</b>’);
formPanel.query(‘displayfield[name="vat"]‘)[0].setValue(‘<b>&euro;&nbsp;’+vat+’</b>’);
formPanel.query(‘displayfield[name="gtotal"]‘)[0].setValue(‘<b>&euro;&nbsp;’+gtotal+’</b>’);
},
field: {
xtype: ‘numberfield’,
allowBlank: false
}
}
],

});

var formPanel = new Ext.create(‘Ext.form.Panel’, {
renderTo: Ext.getBody(),
bodyPadding: 15,
frame: true,
width: 540,
store: store,
title: ‘Task List’,
fieldDefaults: {
labelAlign: ‘left’,
labelWidth: 90,
anchor: ’100%’
},

items: [
{
xtype: 'combo',
allowBlank: false,
fieldLabel: 'Client *',
labelWidth: 150,
editable: true,
store: ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'],
height: 25
},
{
xtype: ‘textfield’,
fieldLabel:’Estimate Number *’,
editable: true,
value: ’001455′,
labelWidth: 150,
allowBlank: false
},
{
xtype: ‘datefield’,
labelWidth: 150,
name: ‘date’,
fieldLabel: ‘Date of Issue *’,
allowBlank: false
},
{
xtype: ‘button’,
width: 55,
name: ‘add’,
text: ‘Add’,
iconCls: ‘icon-add’,
handler: function(){
// empty record
store.insert(0, new NewEstimate());
rowEditing.startEdit(0, 0);

}
},
{
xtype: ‘button’,
width: 60,
name: ‘delete’,
text: ‘Delete’,
iconCls: ‘icon-delete’,
handler: function(){
var selection = gridPanel.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
gridPanel.getView().refresh();
gridPanel.getSelectionModel().select(0);
}
}
},
gridPanel,
{
xtype: ‘displayfield’,
labelWidth: 400,
name: ‘total’,
labelAlign :’right’,
fieldAlign :’right’,
fieldLabel: ‘<b>Estimate Total (EUR)</b>’,
id : ‘total’,
readOnly : true,
},
{
xtype: ‘displayfield’,
labelWidth: 400,
name: ‘vat’,
labelAlign :’right’,
fieldAlign :’right’,
fieldLabel: ‘<b>VAT (21%) (EUR)</b>’,
id : ‘vat’,
readOnly : true,
},
{
xtype: ‘displayfield’,
labelWidth: 400,
name: ‘gtotal’,
labelAlign :’right’,
fieldAlign :’right’,
fieldLabel: ‘<b>Estimate with Taxes (EUR)</b>’,
id : ‘gtotal’,
readOnly : true,
}
]
});

});

Screenshots:-

 

 

Follow

Get every new post delivered to your Inbox.