Sencha Touch 2 - Text Overlapping Issue

1
votes

I'm a new developer in Sencha Touch 2 and I'm trying to create my first application using its provided MVC architecture. I find issues with toolbar/titlebar text overlapping when navigating between pages. Take a look at these screenshots:

Example 1

Example 2

I'm not pretty sure what's happening out there. I am using animateActiveItem and routing method to move across my application.

Users.js controller file, login method

// Ajax code here, not included here
// on ajax success:
this.redirectTo("login");

Routes.js controller file

routeLoginPage: function() {
    console.log("routeLoginPage");
    Ext.Viewport.animateActiveItem({ xtype: "loginpage" }, { type: "slide", direction: "left" });
},

Has anybody really faced a problem like this? I have no idea what to do right now as I was trying to resolve this issue for 2 days+.

EDIT

Basically I need to move across the pages defined as views. I define each view in different file containing properties: extend, requires, alias, config and methods defined by me. Every config property has titlebar attached as its first item.

When I'm trying to change page, I load another view by controller command which changes address hash. Routes controller then fires an animateActiveItem method which loads another View (defined previously as xtype by alias property).

I was using Miami Coder's Tutorial (miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/) to learn Sencha Touch basics.

3
extjssencha-touchsencha-touch-2
I think.the way you are adding view is wrong. If you can provide the details of what you want, I can help. - amrit_neo
All I want is to move across my views (not cards) freely. I use routes to let application keep up with user's actions after page reload. I don't think it's crucial but I was trying to understand routes feature too. - OldNurse

3 Answers

1
votes

I think you mean title bar and not toolbar...

Use navigation view to navigate between views instead of Ext.Viewport.animateActiveItem It is a better method. For using navigation view use this guide in sencha docs... Sencha has a steep learning curve so be ready for frustrations like this...

Navigation View Guide

0
votes

You can add your required views in one panel class and enable the required view using 

mainclass.setActiveItem(0)

or else use the navigation view

0
votes
{
    xtype: 'navigationview',
    id: 'navView',
    navigationBar: {
        hidden: true
    }

}

The above code will hide the title bar generated by navigation view... Now you need to define your own titlebar like so

{
       xtype: 'titlebar',
       title: 'title',
       items: [
            {
                   xtype: 'button',
                   text: 'back',
                   listeners: [
                     {
                         fn: function(button){
                              Ext.getCmp('navView').pop();//this will pop the view and show previous view
                         },event: 'tap'

                     }
                   ]
            }
       ]



}

Hope it helps...