sencha-touch - ボタン付き Sencha Touch アンカーポップアップウィンドウ

Question

クリックすると新しいビューが作成されるボタンを含む固定ポップアップ ウィンドウを作成する必要があります。以下のスクリーンショットを参照してください (yelp モバイル アプリから取得)。この機能の例を見つけることができませんでした - ありがとう

Answer 1

あなたが探しているのは、本当にただのフローティング パネルだと思います。

たとえば、sencha docsとshowByメソッドを使用した例を参照してください。

これがお役に立てば幸いです。

Answer 2

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'
        });
    }
});

これは私にとってはうまくいき、同じ出力が得られます。さらに、キャンセル ボタンを押すと、パネルが非表示になります。これがお役に立てば幸いです。ありがとう

Answer 3

固定ポップアップ ウィンドウの作成方法はわかりませんが、Sencha Touch-2 でアクション シートを実装してみてください。
固定されていませんが、機能を提供できるボタンを含めることができます。