1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    14
    Vote Rating
    0
    Ensi is on a distinguished road

      0  

    Default Unanswered: display the values ​​of a form in a grid

    Unanswered: display the values ​​of a form in a grid


    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'},
    {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>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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/#!...thod-getValues
    http://docs.sencha.com/ext-js/4-0/#!...ore-method-add
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1