Data Binding to a Form Sencha Touch 2

Question

The thing is that i'm trying to bind the form values after itemtap in sencha touch 2, and setting the data over the form View, but not seems to work :(, i have the next code:

//the controller file
Ext.define( 'myApp.controller.myController' ,
{
   extend : 'Ext.app.Controller',

   config : 
    {
        refs : 
        {
            myNavigationView : '#myNavigationView',
            detailView : '#detailView'
        },

        control :
        {
            '#listView' :
            {
                itemtap : 'itemSelected'
            }
        }
    },

   itemSelected : function ( list , index , target , record , e , eOpts )
   {
      var me = this;
      me.getMyNavigationView().push( { xtype : 'detailView' } );
      var detailView = me.getDetailView().down( '[itemId=detailData]' );
      detailView.setData( record.data );

   }


} );


//the detailViewFile    
Ext.define( 'myApp.view.DetailView' ,
{
   extend : 'Ext.form.Panel',

    xtype : 'detailView',

    id : 'detailView',

    config : 
    {
        title : 'Detail',

        layout : 
        {           
            pack: 'top'
        },
        items :
        [
            {
                xtype : 'fieldset',

                itemId : 'detailData',

                items : 
                [
                    {
                        xtype : 'textfield',
                        label : 'Some value',
                        disabled : true,
                        value : '{modelValue1}'
                    },
                    {
                        xtype : 'textfield',
                        label : 'Some value',
                        disabled : true,
                        value : '{modelValue2}'
                    }
               ]
           }
        ]
     }
} );

The result that i'm getting is the form with its fields and the value looks like this {modelValue 1} and it is not getting the value from the record, i have and store and a model, i have try to print on console the value from the record, and it has a value so, the question is, is there a way to bind the values from a list item to set them on the detail view, or the only way is to set manually each text field?

Answer 1

I have found the solution, the only thing that is need, is that use the set Record method over the form view and at the names on each text field, must be equals to the field name on the model.

here is the example code :

//the controller file
Ext.define( 'myApp.controller.myController' ,
{
   extend : 'Ext.app.Controller',

   config : 
    {
        refs : 
        {
            myNavigationView : '#myNavigationView',
            detailView : '#detailView'
        },

        control :
        {
            '#listView' :
            {
                itemtap : 'itemSelected'
            }
        }
    },

   itemSelected : function ( list , index , target , record , e , eOpts )
   {
      var me = this;
      me.getMyNavigationView().push( { xtype : 'detailView' } );
      var detailView = me.getDetailView();
      detailView.setRecord( record );

   }


} );


//the detailViewFile    
Ext.define( 'myApp.view.DetailView' ,
{
   extend : 'Ext.form.Panel',

    xtype : 'detailView',


    config : 
    {
        title : 'Detail',
        itemId : 'detailView',

        layout : 
        {           
            pack: 'top'
        },
        items :
        [
            {
                xtype : 'fieldset',

                itemId : 'detailData',

                items : 
                [
                    {
                        xtype : 'textfield',
                        label : 'Some value',
                        disabled : true,
                        name : 'modelFieldName1'
                    },
                    {
                        xtype : 'textfield',
                        label : 'Some value',
                        disabled : true,
                        name : 'modelFieldName2'
                    }
               ]
           }
        ]
     }
} );