Question

我是Sencha Touch2的新手，我在破坏浮动面板时遇到问题。我在列表项单击时显示浮动面板上的ListView顶部的详细信息。我希望浮动面板在“取消”按钮上被销毁点击。任何人都可以帮助我。感谢。

FloatingPanel.js:
Ext.define('CustomList.view.FloatingPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.FloatingPanel',
    xtype:'datepanel',
    config: {
        id:'floatingPanel',
        modal:true,
        centered: true,
        hideOnMaskTap:true,
        width:'500px',
        height:'650px',
        items:[
            {
                styleHtmlCls:'homepage',
                tpl:'<h4>{name1}</h4><h3>{name2}</h3><h3>{name3}</h3><h3>{name4}'

            },
            {
                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('floatingPanel');
                                panelToDestroy.destroy();

                            }
                        }
                    }]

            }
        ]
    }
});

这是我的清单，

ShowList.js:
Ext.define('CustomList.view.ShowList',{
    extend:'Ext.List',
    xtype:'showlist',
    requires: [
        'Ext.dataview.List',
        'Ext.data.Store',
        'CustomList.controller.Main'
    ],
    config:{

        items:[
            {
                xtype:'list',
                id: 'listitems',
                onItemDisclosure: true,
                store:'StoreList',
                scrollable:'true',
                itemTpl: [
                    '{firstname}'
                ],
                itemTpl: '<font color="#990000"><h2>{lastname}</h2></font>{firstname}'


            }

        ]



    }


});

这是我的控制器

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

    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');
        var name1 = record.get('name1');
        console.log('Item was tapped on the Data View'+name1);
        var floatingDatePanel = Ext.create('CustomList.view.FloatingPanel');
        var data = record.getData();
        floatingDatePanel.getAt(0).setData(data);
        Ext.Viewport.add(floatingDatePanel);

    }

});

Answer 1

一个明显的问题是：

Ext.getCmp('floatingPanel');

将适用于案例id: 'floatingPanel'，而您使用itemid:'floatingPanel'

要检索itemId，您可以使用Ext.ComponentQuery：

Ext.ComponentQuery.query('#floatingPanel')[0];

Sencha Touch2：按钮点击无法关闭浮动面板？

1 个答案: