2013-03-15 74 views
1

我是Sencha Touch2的新手,在将数据从控制器传递到浮动面板上时遇到问题。这里是我的控制器实现代码:Sencha Touch2:将数据从控制器传递到浮动面板不起作用

Ext.define('CustomList.controller.Main', { 
    extend: 'Ext.app.Controller', 
    requires:['CustomList.view.DatePanel'], 

    config: { 
     refs: { 
      listView: 'listitems' 
     }, 

     control: { 
      'main test2 list': { 
       activate: 'onActivate', 
       itemtap: 'onItemTap' 
      } 
     } 
    }, 

    onActivate: function() { 
     console.log('Main container is active'); 
    }, 

    onItemTap: function(view, index, target, record, event) { 
     console.log('Item was tapped on the Data View'); 
     Ext.Viewport.add({ 
      xtype: 'DatePanel' 
     }); 
    } 

}); 

能够在控制器中获取数据,DatePanel.js是我的浮动面板。 DatePanel.js:

Ext.define('CustomList.view.DatePanel', { 
    extend: 'Ext.Panel', 
    alias: 'widget.DatePanel', 
    xtype:'datepanel', 
    config: { 
     itemid:'DatePanel', 
     modal:true, 
     centered: true, 
     hideOnMaskTap:true, 
     width:'500px', 
     height:'650px', 
     items:[ 
      { 
       styleHtmlCls:'homepage', 
       tpl:'<h4>{name3}</h4>' 

      }, 
      { 
       xtype:'toolbar', 
       docked:'bottom', 
       items:[{ 
        text:'OK', 
        ui:'confirm', 
        action:'ShowTurnOverReport', 
        listeners : { 
         tap : function() { 
          console.log('Ok'); 
         } 
        } 
       }, 
        { 
         text:'Cancel', 
         ui:'confirm', 
         action:'Cancel', 
         listeners : { 
          tap : function() { 
          console.log('Cancel'); 
          var panelToDestroy = Ext.getCmp('datepanel'); 
          panelToDestroy.destroy(); 
          Ext.Viewport.add(Ext.create('CustomList.view.Test2'));//Test.js is my list Panel 

          } 
         } 
        }] 

      } 
     ] 
    } 
}); 

帮我在摧毁对 '取消' 按钮的面板。 任何人都可以帮助我。谢谢。

+0

使用ID 'DatePanel' 在getCmp。 – SachinGutte 2013-03-15 12:51:51

回答

2

首先创建要添加的面板实例。

var floatingDatePanel = Ext.create('Yourapp.view.YourDatePanel'); 

下得到itemTap

var data = record.getData(); 

setData()方法

UPDATE分配此数据floatingDatePanel选择的列表项的数据,

看你的面板代码之后,我想你想设置数据到面板上的第一项,即

 { 
      styleHtmlCls:'homepage', 
      tpl:'<h4>{name3}</h4>' 

     } 

对不对?如果是这样,那么你需要下面的代码

floatingDatePanel.setData(data); 

更改为

floatingDatePanel.getAt(0).setData(data); 

因为,它里面是有要设置数据分配一个模板,并希望在同一个面板的第一个项目。

最后,您可以添加此面板到视与价值

Ext.Viewport.add(floatingDatePanel); 
+0

谢谢。但我无法在DatePanel.js中获取数据。 – chipmunk 2013-03-15 11:26:28

+0

为您的参考添加了DatePanel.js。 – chipmunk 2013-03-15 11:35:34

+0

我已经更新了我的答案。如果你在下一步说明你想要的数据,那很明显。你只是想显示它或稍后对其进行操作?同时发布用于显示列表的模型和商店的代码。 – SachinGutte 2013-03-15 11:49:16

相关问题