PDA

View Full Version : display the values ​​of a form in a grid



Ensi
30 Nov 2011, 5:28 AM
Hello,

I created a formpanel
which contains (textfield, DateField, combo), submit button and a GridPanel
I'm looking for how to do the click of button so that the form values ​​are displayed in the Grid. ?
the link between my value and the grid is the store?
I have not found an easy example to understand!
I am using extjs 4.
Can someone help me please
here is my file gridapp.js :

Ext.application({
name: 'Simple Grid',
launch: function() {
var langue = new Ext.data.SimpleStore({
fields: ['id', 'langue'],
data : [['1','Arabe'],['2','Français'],['3','Anglais']]
});

var RecordPersonne = Ext.data.Record.create([
{name: 'Nom', type:'string'},
{name: 'Prenom', type: 'string'},
{name: 'Date', type: 'date', dateFormat:'m/d/Y H:i:s'},
{name: 'Langue', type: 'string'}
]);

Ext.create('Ext.form.Panel',
{
renderTo: Ext.getBody(),
title: 'Filtre Grid',
height: '100%',
frame : true,
width: '100%',
defaultType: 'textfield',
items:
[
{
fieldLabel: 'Nom ',
name: 'Nom',
id: 'Nom'
},
{
fieldLabel: 'Prenom',
name: 'Prenom',
id: 'Prenom'
},
{
xtype: 'datefield',
fieldLabel: 'Date de naissance',
name: 'dateanniv',
id: 'dateanniv'
},
{
xtype: 'combo',
name: 'langue',
id: 'langue',
fieldLabel: 'langue',
mode: 'local',
store: langue,
displayField:'langue'
},
Ext.create('Ext.Button',
{
text: 'Click me',
renderTo: Ext.getBody(),
handler: function()
{
var p = new RecordPersonne({
Nom : Ext.getCmp('Nom').getValue(),
Prenom : Ext.getCmp('Prenom').getValue(),
Date : Ext.getCmp('dateanniv').getValue(),
Langue : Ext.getCmp('langue').getValue()
});
grid.stopEditing();
grid.store.insert(0, p);
grid.startEditing(0, 0);

});
}
}

}});
my page index.html

<html>
<head>
<title>Simple Grid</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="extjs/ext-all.js"></script>
<script type="text/javascript" src="gridapp.js"></script>

</head>
<body></body>
</html>

mitchellsimoens
30 Nov 2011, 9:18 AM
You need to add the form values to the store. The field names have to match the fields in the store.

Helpful links:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-method-getValues
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-add