数据绑定到表单 Sencha Touch 2答案

【问题标题】：Data Binding to a Form Sencha Touch 2数据绑定到表单 Sencha Touch 2
【发布时间】：2014-09-17 18:37:38
【问题描述】：

问题是我试图在 sencha touch 2 中的 itemtap 之后绑定表单值，并在表单视图上设置数据，但似乎不起作用:(，我有下一个代码：

//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}'
                    }
               ]
           }
        ]
     }
} );

我得到的结果是带有字段的表单，值看起来像这样 {模型值 1} 它没有从记录中获取值，我有并存储了一个模型，我尝试在控制台上打印记录中的值，它有一个值，所以问题是，有没有办法绑定列表项中的值以在详细视图上设置它们，还是唯一的方法是手动设置每个文本字段？

【问题讨论】：

标签： sencha-touch sencha-touch-2

【解决方案1】：

我找到了解决方案，唯一需要的是在表单视图和每个文本字段上的名称处使用 set Record 方法，必须等于模型上的字段名称。

这里是示例代码：

//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'
                    }
               ]
           }
        ]
     }
} );

【讨论】：