1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    9
    Vote Rating
    0
    cstuber is on a distinguished road

      0  

    Default How to load a store using form panel field values?

    How to load a store using form panel field values?


    Hi everyone,

    I'm building a Touch app with Designer 2 (build 298).

    I have a form panel and field set defined with various input fields. I also have a model defined and a Json store defined that refers to the model.

    What I would like to do is take the form panel input field values, submit them to the server, then load the store based on the response Json contents.

    What is the best way in Designer 2 / Touch to accomplish this?

    In other parts of the app I have been able to successfully auto-load a store. I've also been able to submit values from a form panel to the server and react to the response. Now I am having trouble figuring out how to get the two concepts to work together.

    Any help / pointers would be appreciated!

    Chad

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,308
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Sounds like you are looking for BasicForm's loadRecord and updateRecord methods.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    9
    Vote Rating
    0
    cstuber is on a distinguished road

      0  

    Default


    Aaron - Thanks very much for your response!

    I apologize in advance if this question shows my lack of experience: The links you provided are from the ExtJS Docs. Is the BasicForm also valid for a Touch app built with Designer 2?

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,308
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Sorry for linking to Ext's documentation, that was a mistake.

    You can use setRecord to load the values.

    Once you have the record you can also set teh values from whats in the form.

    Code:
    form.getRecord().set(form.getValues());
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    62
    Vote Rating
    0
    sendy is on a distinguished road

      0  

    Default Send data to a store (LocalStorage)

    Send data to a store (LocalStorage)


    Hy,
    I have a form panel to set different fields.
    when I click on submit button ,I want to send the values of each field to store:
    this the store:

    Ext.define("UnivMobile.store.EventsPerso", { extend: "Ext.data.Store",
    requires: "Ext.data.proxy.LocalStorage",
    config:{
    model: "UnivMobile.model.EventPerso"
    }


    });
    This is the model:

    Ext.define("UnivMobile.model.EventPerso", {
    extend: "Ext.data.Model",
    config: {
    fields: [{
    name: 'nomEvent'
    //type: 'string'
    },
    {
    name: 'dateDebEvent'
    // type: 'date',
    // dateFormat: 'c'
    },
    {
    name: 'dateFinEvent'
    // type: 'date',
    // dateFormat: 'c'
    },
    {
    name: 'lieu'
    // type: 'string'
    }

    ]
    proxy: {
    type: 'localstorage',
    id:'eventPerso'
    }


    }
    });

    And this is the view:

    Ext.define('UnivMobile.view.AddEvent', {
    extend: 'Ext.form.Panel',
    requires: ['Ext.picker.Date'],

    xtype: 'option2card',

    config: {
    fullscreen: true,
    title: 'Add Event',
    id:'formPanel',

    items: [ {
    xtype: 'fieldset',
    items: [
    {
    xtype: 'textfield',
    name: 'nomEvent',
    id:'nomevent',
    label: 'Nom Event:'


    },
    {
    xtype: 'textfield',
    name: 'dateDebEvent',
    id:'debEvent',
    label: 'Date de debut Event:',
    value:new Date,
    listeners : {
    focus:function( ) {
    dateFormat:'Y-m-d',
    id:'picker1',
    //name:'t',
    listeners : {
    change : function(datePicker1, value) {
    console.log(value);
    var valueDateDeb=Ext.getCmp('debEvent');
    valueDateDeb.setValue(value);

    }
    }
    });
    this.parent.parent.parent.parent.push(datePicker1);


    }

    }
    },


    {
    xtype: 'textfield',
    name: 'dateFinEvent',
    id:'finEvent',
    label: 'Date de fin Event:',
    value:new Date,
    listeners : {
    focus:function( ) {
    var datePicker2= Ext.create(Ext.picker.Date, {
    dateFormat:'Y-m-d',
    id:'picker2',
    listeners : {
    change : function(datePicker2, value) {
    console.log(value);
    var valueDateFin=Ext.getCmp('finEvent');
    valueDateFin.setValue(value);

    }
    }
    });
    this.parent.parent.parent.parent.push(datePicker2);


    }

    }
    },
    {
    xtype: 'textfield',
    name: 'lieu',
    id:'lieu',
    label: 'Lieu:',

    }
    ] // items
    },





    {
    xtype: 'toolbar',
    layout: {
    pack: 'center'
    }, // layout
    ui: 'plain',
    items: [
    {
    xtype: 'button',
    text: 'Reset',
    id:'resetb',
    ui: 'decline',
    listeners: {
    tap: function(){


    this.parent.parent.parent.parent.push(Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
    switch (btn) {
    case 'yes':
    var valueNom=Ext.getCmp('nomevent');
    valueNom.setValue('');
    var valueDateDeb=Ext.getCmp('debEvent');
    valueDateDeb.setValue('');
    var valueDateFin=Ext.getCmp('finEvent');
    valueDateFin.setValue('');
    var valueLieu=Ext.getCmp('lieu');
    valueLieu.setValue('');

    break;
    default:
    break;
    } // switch
    })
    );
    }
    }
    },
    {xtype: 'button',
    text: 'Submit',
    ui: 'confirm',
    listeners: {
    tap: function() {// I want to send the diffrent values to my store

    var store=Ext.getStore("EventsPerso");
    var form = Ext.getCmp('formPanel');
    var values = form.getValues(); // it works
    form.submit({

    url: 'What should I set here?????',
    method: 'POST',
    success: function (form, result) {
    localStorage.setItem('Nom event',values.nomEvent);
    Ext.Msg.alert('Success', action.result.msg);

    },
    failure: function (form, result) {
    alert('failure');
    }

    });


    }
    }
    }
    ] // items (toolbar)
    }
    ]


    }
    });
    Any help please how can I send diffrent values from my formPanel to my store???????,

Thread Participants: 2