0

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

在此处输入图像描述

4

3 回答 3

2

我认为您正在寻找的实际上只是一个浮动面板。

例如，参见sencha文档及其使用showBy方法的示例。

希望这对您有所帮助。

于 2012-09-25T18:36:07.590 回答
0

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

于 2012-09-24T14:45:55.777 回答
0 
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'
        });
    }
});

在此处输入图像描述

在此处输入图像描述 这对我有用，会给你相同的输出。此外，在取消按钮上，它将隐藏面板希望这会对您有所帮助。谢谢

于 2012-09-27T13:24:55.327 回答