Modal not working properly

[Dbms]

Hi,

I am creating a modal. But even though it is rendered, the button in the parent page is still visible and working.
Here is the code:

1. ModalPage

screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;screenHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height;
Ext.define("MyApp.view.ModalPage", {
    extend : "Ext.form.Panel",
    alias : "widget.modalpage",
    id : 'modalpage',
    config : {
        width : 0.8*screenWidth,
        height: 0.6*screenHeight,
        fullscreen: true,
        modal: true,
        centered: true,    
        hideOnMaskTap: true,
        layout: 'vbox',
        style: 'border: 1px solid black;'
    },
    initialize : function() {
        this.callParent(arguments);


        var greaterThan = {
                xtype : 'numberfield',
                label : 'greaterthan',
                id : 'greaterthan',
                placeHolder : 'Greater Than(Numbers Only)'
            };
        var applyFilter= {
                xtype : 'button',
                text : 'Ok',
                id : 'ok',
                handler : this.onOk
            };
        
        this.add([greaterThan, {xtype: 'spacer'}, applyFilter])
    },
    onOk : function() {
        Ext.getCmp('modalpage').fireEvent('oktap', this);
    }
});

2. Parent View, from where it is called

Ext.define("MyApp.view.Parent", {    extend : "Ext.Container",
    alias : "widget.parent",
    id : 'parent',
    config : {
        width : '100%'
    },
    initialize : function() {
        this.callParent(arguments);


        var samplelabel = {
            xtype : 'label',
            id: 'criteria',
            html : 'Visual',
            top : '10%',
            left : '30%',
            right:'30%'
        };
        
        var samplebutton = {
            xtype : 'button',
            text : 'Filter',
            width : '40%',
            height : '3em',
            left : '30%',
            handler : this.onButtonTap


        };


        this.add([ samplelabel,samplebutton ]);
    },


    onButtonTap : function() {
        Ext.getCmp('parent').fireEvent('filterbuttontap', this);
    }
});

3. Controller Snippets

refs : {            modalPage: "modalpage",
                        parentPage: "parent"
        },

control : {            modalPage: {
                oktap: "onOk"
            },
                        parentPage: {
                filterbuttontap: "onFilterButton"
            },
        }

onFilterButton: function(){        console.log("In Controller");
        var currentScreen = this.getModalPage()|| Ext.create('MyApp.view.ModalPage');
                /*Ext.Viewport.setActiveItem(currentScreen);*/
        Ext.Viewport.add(currentScreen);
    },
    
    onOk: function()
    {
        var val = Ext.getCmp('greaterthan').getValue();
        Ext.getCmp('criteria').setHtml(val);
    }

I see no error but still the button is visible. Can someone help me track it, or is it a bug in Sencha Touch.
And also why cannot I do setActiveItem for modal (Gives the error: Setting activeItem to be a non-inner item). Even though it sets the modal.

[haduki]

setActiveItem is for card layout, a modal panel is not item in card layout,it is a floating panel.

[Dbms]

Ok that makes sense.....

Do you have any idea why the code is not working..

[haduki]

var samplebutton = {
            xtype : 'button',
            text : 'Filter',
            width : '40%',
            height : '3em',
            left : '30%',//<-- this make your btn floating 
            handler : this.onButtonTap,
            zIndex:0




        };

[Dbms]

Just for my knowledge, what is this z-index? I mean what purpose does it serve?