Results 1 to 6 of 6

Thread: switch sencha touch 1 -> 2

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    29

    Default switch sencha touch 1 -> 2

    hey guys, i recently switched from sencha touch 1.1.1 to the newest 2 beta for performance reasons. now i have some questions and problems. sencha touch 2 differs a lot from version 1. is it possible to make my app like this? :

    i have a app.js with this:
    Code:
    var kill_page;
    var use_page;
    
    var changePage = function(page) {
        use_page = Ext.create(page);
        
        Ext.Viewport.add(use_page);
        Ext.Viewport.setActiveItem(use_page, { type: 'slide', direction: 'left' });
        Ext.Viewport.remove(kill_page);
        kill_page = use_page;
    }
    
    
    Ext.onReady( function() { //your code goes here });
    
        Ext.application({
            name: 'NLCApp',
           
        
            launch: function() {
                changePage('NLCApp.views.loginPage');
      
            }
        });
    
    });
    and then i define my "views" or "cards" like this in seperate .js files like this:


    Code:
    var menuDockedItems = [{
              xtype: 'panel',
             layout: 'hbox',
             items: [{
                 xtype: 'button',
                 id: 'rec_button',
                 cls: 'menu_handler'
    .....(etc.).}]
    
    
       Ext.define('NLCApp.views.loginPage', {
                extend: 'Ext.Panel',
            
                config: {
                        fullscreen: true,
                         scroll: 'vertical',
                         showAnimation: 'slideIn',
                   
                         items: menuDockedItems,
                         listeners: {
                             tap: {
                                 fn: menuHandler,
                                 element: 'element',
                                 delegate: '.menu_handler'
                             },
                             swipe: {
                                 fn: function() {},
                                 element: 'innerElement'
                             }
                         }
                         
                         
                }
            });

    and then i always switch with changePage on my app.js, works but problems are:

    a LOT of warnings

    [WARN] [Ext.Loader] Synchronously loading 'Ext.Toolbar'; consider adding 'Ext.Toolbar' explicitly as a require of the corresponding class

    already tried to put Ext.require and require-arrays on EVERY possible place in my app, did not change anything, maybe im doing something fundamentally wrong? with this whole Ext.define()-idea and then Ext.create defined-classes?



    the other problem is: i have styled my app with a css file, in chrome it looks perfect like i want it, in emulator or on real device css is not working fully. it worked with senchatouch 1, but not with 2 (buttons are wrong positioned, colors of docked bars are not correct....)

    any ideas?

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    If you are worried about performance then I would rewrite using best practices of ST2.

    There is a guide to help you migrate: http://docs.sencha.com/touch/2-0/#!/...upgrade_1_to_2
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    29

    Default

    yes, already working with it, main difference is working with this Ext.define- stuff, my app is working (except those annoying errors), and another error (bug?) the overlays, working in st1 very good, in st2 they are messed up, floating around

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    29

    Default

    any ideas? also implemented a list. dynamically loading data from server, working in chrome, not working in device or emulator

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    To get rid of those warnings, you need to use the requires property on the Ext.define calls that require those classes.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    29

    Default

    yes, already tried that, using Ext.require() above the Ext.onReady(), using requires[] array in the class definitions, did not work, solved it using the sencha-touch-all.js now. now i think the only problem left is the messed up overlays but i read in a topic that this is a st2 bug being worked on

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •