Question

我需要创建一个包含按钮的锚定弹出窗口，在单击时会创建一个新视图。请参阅下面的截图（摘自yelp移动应用程序）。我无法找到此功能的示例 - 谢谢

enter image description here

Answer 1

我认为你所寻找的只是一个浮动面板。

例如，使用sencha docs方法查看showBy及其示例。

希望这会对你有所帮助。

Answer 2

我不知道如何创建一个锚定的弹出窗口，但你可以尝试在Sencha Touch-2中实现Action Sheet。
它没有锚定但它可以包含你可以提供功能的按钮

Answer 3

This issue can be resolve by calling a panel inside a container.

//在视图中添加container1.js

Ext.define('Sencha.view.container1', {
extend: 'Ext.Container',
alias: 'widget.container1',
xtype: 'container1',
//fullscreen: true,

config: {
scrollable: true,
height: 50,
     items: [
         {
              docked: 'top',
              xtype: 'titlebar',
              items: [
              {
              xtype: 'button',
              ui: 'confirm',
              text: 'Back',
              itemId: 'button113',
              id: 'rightButton',
              handler: function () {
              var sh = Ext.create('Sencha.view.panel1', {
                                    extend: 'Ext.Panel',
                                    fullscreen:true,

                                });
                                sh.show();


              }
              }
              ]
          }
     ]
     }
 });

//在View

中添加panel1.js

Ext.define("Sencha.view.panel1", {
extend: "Ext.Panel",
alias: "widget.panel1",

config: {


        html: 'Floating Panel',
        //left: 0,
        //padding: 50,
        items: [
        {   
            xtype: 'button',
            ui: 'action',
            height: 20,
            text: 'Edit Bussiness',

        },
        {
            xtype: 'button',
            ui: 'action',
            height: 20,
            text: 'Add Photo',
        },
        {
            xtype: 'button',
            ui: 'action',
            height: 20,
            text: 'Add BookMark',
        },
        {
            xtype: 'button',
            ui: 'action',
            height: 20,
            text: 'Check In',
        },
        {
            xtype: 'button',
            ui: 'action',
            height: 20,
            text: 'Write Review',
        },
        {
            xtype: 'button',
            ui: 'action',
            height: 20,
            text: 'Make Reservation',
        },

            {
            xtype: 'button',
            ui: 'action',
            height: 20,
            text: 'Cancel',
                handler: function() { 
                this.up('panel').hide();
                }
            },

        ],
        listeners: [
        {  hide: { fn: function(){ this.destroy();} }},


       ]
}
});

// App.js

Ext.application({
    name: 'Sencha',

    controllers: ['Main'],

    views: ['container1', 'panel1'], //add all the view files here which you wants to call on any other panel so that the instance of it will be created.
    stores: [],
    models: [],

    launch: function() {
        Ext.Viewport.add({
            xtype: 'container1'
        });
    }
});

enter image description here

enter image description here 这项工作对我来说会给你相同的输出。此外，在取消按钮它将隐藏面板希望这将帮助您。感谢

Sencha触摸锚定弹出窗口与按钮

3 个答案: