Toolbar automatically hides with the url bar

[jiindal1988]

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.

[AndreaCammarata]

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

[jiindal1988]

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.

[mitchellsimoens]

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.