1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    1
    Dbms is on a distinguished road

      0  

    Default Answered: Modal not working properly

    Answered: Modal not working properly


    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

    Code:
    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

    Code:
    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

    Code:
    refs : {            modalPage: "modalpage",
                            parentPage: "parent"
            },
    Code:
    control : {            modalPage: {
                    oktap: "onOk"
                },
                            parentPage: {
                    filterbuttontap: "onFilterButton"
                },
            }
    Code:
    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.

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

  3. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    setActiveItem is for card layout, a modal panel is not item in card layout,it is a floating panel.
    I write English by translator.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    1
    Dbms is on a distinguished road

      0  

    Default


    Ok that makes sense.....

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

  5. #4
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


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

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    1
    Dbms is on a distinguished road

      0  

    Default


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

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar