1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Noida, India
    Posts
    78
    Answers
    2
    Vote Rating
    2
    jiindal1988 is on a distinguished road

      0  

    Default Unanswered: Toolbar automatically hides with the url bar

    Unanswered: Toolbar automatically hides with the url bar


    Hello, I have created a small form application in Sencha touch. This form has a toolbar which is docked at the top. On the page I have some fields. Running the code on iPhone| iPod (version 3 & 4 both ) hides the toolbar along with the url bar, but it works fine for me in Blackberry 6 and Android 2.2 (toolbar does not hide itself along with the url bar).

    What could be the reason for the above??

    How can I prevent toolbar from hiding itself on the iOS???

    Any help is appreciated.

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi jiindal1988.
    Can you post some code of your app and / or some screenshot to make me able to understand better where is the problem?

    Thank you
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Noida, India
    Posts
    78
    Answers
    2
    Vote Rating
    2
    jiindal1988 is on a distinguished road

      0  

    Default


    Code:
    var data;
    var toolbar;
    
    
    Ext.setup({
    onReady: function () {
    
    
        // function to make ajax request to fetch locations data
        locationRequest();
    
    
        // Code to create toolbar at the top of the page    
        toolbar = new Ext.Toolbar ({
            dock:'top',
            items: [
                {
                    // drop down list
                    xtype: 'selectfield',
                    name: 'mySelect',
                    width: 95,
                    options:[
                    {
                        text: 'Select Value',
                        value: 'select',
                    },
                    {
                        text: 'Pause Threshold Alarming',
                        value: 'pause',
                    },
                    {
                        text: 'Resume Threshold Alarming',
                        value: 'resume',
                    },
                    {
                        text: 'Logout',
                        value: 'logout',
                    },
                    ],
                    listeners: {
                        change: function(t, value) {
                        checkClickEvent(value);
                        }
                    }
    
    
                },
                // search field 
                {
                    xtype: 'searchfield',
                    name : 'field',
                    width:70,
                    id: 'search',
                    // listener to respond in case of enter 
                    listeners : {
                        keyup: function(field, e) {
                            var key = e.browserEvent.keyCode;
                            if (key === 10 || key === 13) {
                            alert("Search = " + Ext.getCmp('search').getValue());
                            }
                        },
    
    
                    }
                },
    
    
                {
                    icon:'/static/mobile/Images/Locations.png',
                    ui: 'plain',
                    width:55,
                    handler: function()
                    {
                        locationRequest();
                    }
                },
                {
                    icon:'/static/mobile/Images/TableView.png',
                    ui: 'plain',
                    width:55,
                    handler: function()
                    {
                        showTableView();
                    }
                },
                {
                    icon:'/static/mobile/Images/Alarm.png',
                    width:55,
                    ui: 'plain',
                    handler: function()
                    {
                        showAlarmPanel();
            
                    }
                },
            ]
        });
    }
    });
    
    
    function loadLocation()
    {
    
    
        Ext.regModel('NestedLocations', {
            fields: [
                {name: 'text', type: 'string'}
            ]
        });
        
        data =  eval("(" + data + ")");
            var store = new Ext.data.TreeStore({
            model: 'NestedLocations',
            root: data,
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'tree',
                    root: 'children'
                }
            }
        });
        
            //Definition of the NestedList
        var nestedList = new Ext.NestedList({
            fullscreen: true,
            title: 'Elements',
            store: store,
            getItemTextTpl: function(){
                return '{text}<br>{description}';
            }
        });
            
        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            dockedItems:[toolbar, nestedList]
        });
    }
    
    
    function locationRequest()
    {
        Ext.Ajax.request({
            url: '/json/locations-smooth',
            params: {"root":'node'},
            success:function(msg){
            data = msg.responseText;
            data = '{"children":' + data;
            data= data.replace(',"expandable":true','');
            data = data + '}';
            loadLocation();
            },
            failure:function(msg){
            }
        });
    }


    Along with the url bar the toolbar which i have created also goes up (hides itself) when i click on any of the image of the toolbar or perform some operation.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    First thing I see is that you have two components with fullscreen set to true. Only one should be and that's the Panel.

    The NestedList needs to be an item of Panel, not a docked item.

    I think you need to work on your app flow... In your onReady method, send the Ajax request. When the callback executes when the Ajax request returns passing the data then you can create your Panel with the Toolbar as your docked item and NestedList as it's item (would suggest using fit layout on Panel if NestedList is going to be the only list. Right now, you set the data to a variable defined globally where you should just pass it to a function as an argument. Your toolbar variable doesn't even need to be used, put it as an object and use xtype when you create your Panel.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.