Sencha Touch2:将数据从Controller传递到浮动面板不起作用

时间:2013-03-15 07:03:40

标签: sencha-touch-2 panel

我是Sencha Touch2的新手,在listitem tap上将数据从我的Controller传递到Floating面板时遇到问题。这是我的控制器实现代码:

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

                            }
                        }
                    }]

            }
        ]
    }
});

帮我解决“取消”按钮上的面板。 谁能帮帮我吗。感谢。

1 个答案:

答案 0 :(得分:2)

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

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

接下来获取itemTap上所选列表项的数据

var data = record.getData();

使用floatingDatePanel方法

将此数据分配给setData()

<强>更新

查看您的面板代码后,我想您想将数据设置为面板中的第一项,即

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

        }

对吗?如果是,那么您需要更改以下代码

floatingDatePanel.setData(data);

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

因为,它是面板中第一个分配了模板的项目,并且希望在您想要设置数据的位置相同。

最后,您可以使用

将此面板添加到视口中
Ext.Viewport.add(floatingDatePanel);