数据绑定到表格Sencha Touch 2

时间:2014-09-17 18:37:39

标签: sencha-touch sencha-touch-2

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

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

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

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,唯一需要的是,在表单视图和每个文本字段的名称上使用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'
                    }
               ]
           }
        ]
     }
} );