Sencha Touch 2: Loading pushed data into form

Question

I got some problems loading data into a form which I pushed onSelect. (loading details for a specific list item)

onProductSelect: function(_dataView, _record)
{
    Ext.getCmp('products').push({
        title: _record.data.name,
        data: _record.data,
        styleHtmlContent: true,
        xtype: 'productDetails'
    });
}

I am pushing another view (productDetails) onto my productView (which is a navigationView). The data (_record.data) is available in the new pushed view via

tpl: '{someField}'

Now I'd like to know how to get this data (the fields data) into a textfield or a button (or sth like this) of a form.

If someone has a better idea how to get the data into the view/form or how to change the views (from list to detail) please let me know :)

are you trying to display the button right below the item inside the list? Or are you adding the items below the list? — Dinkheller

Dinkheller Dinkheller · Accepted Answer · 2016-03-19T20:03:17

here are some suggestions to your code:

1.use of underbar ('_') inside Sencha Touch is meant for variables which have get/set/apply/update. Although you are using local variables, it is best practice.

2.the word '_record' hopefully is a record. If so then you should use:

name = _record.get('name');
data = _record.getData();

The best way to fill a form is to use a formpanel and add the values to the formpanel, while all fields have a popper name assigned:

If your data are:

data = {name: 'Kurt001', password: '12er51wfA!'}

You could use this:

Ext.define('App.view.ProductDetails', {
    extend: 'Ext.form.Panel',
    xtype: 'productdetails',

    config: {
        cls: 'product-details',
        scrollable: null,
        layout: 'vbox',

        defaults: {
            labelAlign: 'top',
            clearIcon: false
        },

        items: [{
            xtype: 'textfield',
            name: 'name'
        }, {
            xtype: 'passwordfield',
            name: 'password'
        }, {
            xtype: 'button',
            itemId: 'btnLogin'
        }]
    }
});

And to add the data simply use:

Ext.Viewport.down('.productdetails').setValues(data);

Alternative:

var view = Ext.Viewport.down('.productdetails')
view.down('.textfield').setValue(data.name);
view.down('.passwordfield').setValue(data.password);

Alternative

view.down('.field[name=name]').setValue(data.name);
view.down('.field[name=password]').setValue(data.password);

To get the data from one view to the next you can follow different options:

1.Set the data to the current view and grab them from that view. It looks like you have a list. So you can apply the data to the list:

view.down('.list').myData = data;

Extended version would be to create a custom list with myData inside the config. That way you could use:

view.down('.list').setMyData(data);

or in your case

_dataview.setMyData(data);

2.Use a store. As you are passing a record already you might want to add a selected field to your store model and simply set the flag.

Sencha Touch 2: Loading pushed data into form

1 Answers