Results 1 to 5 of 5

Thread: [MODERN] TabPanel / Card layout switch panel fail on Production build

  1. #1

    Default Answered: [MODERN] TabPanel / Card layout switch panel fail on Production build

    Hi,

    I have an app with several views that were first created an tested in Chrome. They consist of either Container with Card layout or TabPanel (that is also a card layout).
    Everything works perfect in Chrome and on a WebView Browser Tester.

    The problems start when I package the app, then the tab panel (or container) will still switch going "forward" (active view 0, 1, 2) but once you try to go back, the view will become blank.
    Whats worse, in Tab Panel it goes totally crazy showing wrong panels (goes out of sync with tabs)

    EDIT: This seems to be related to Production build in general (not the browser or Codova build)

    Its hard to demonstrate this as the difference must be observed between the same code in WebView and the same WebView inside of Cordova app.
    The TabPanels are similar to this basic example:
    http://examples.sencha.com/extjs/6.6...ern#basic-tabs

    Also there might be some difference as the version I run in browser is run from sources and the one in Cordova app is a production or testing build.
    There are no errors in console for the Cordova version (remote debug).

    There is one thing that has fixed the behavior for Container with card layout - if I turn off animation slide, then it behaves rather stable
    Code:
    layout: {
    type: 'card'
    //,animation: 'slide'
    },
    I have recorded a short video showing this problem...
    http://youtu.be/-7-aFatADAs?hd=1


    Did anyone here has similar issues?

    Thanks,
    Mike

  2. Problem is solved. One of my packages contained alternative options for classic and modern builds, and by mistake I have left framework reference there:
    Code:
     /**
       * Settings specific to classic toolkit builds.
       */
      "classic": {
        "js": [
          // Remove this entry to individually load sources from the framework.
          {
            "path": "${framework.dir}/build/ext-all-rtl-debug.js"
          }
         requires: []
        ]
      },
    
    
      /**
       * Settings specific to modern toolkit builds.
       */
      "modern": {
        "js": [
          // Remove this entry to individually load sources from the framework.
          {
            "path": "${framework.dir}/build/ext-modern-all-debug.js"
          }
        requires: []
        ]
      },

    As a result, a wrong output was produced containing a separate framework.js file that conflicted with app.js that also cintained framework code.
    This cause all sorts of problems....


    Please close the ticket!

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

    Default

    Quote Originally Posted by maciej.zabielski View Post
    Also there might be some difference as the version I run in browser is run from sources and the one in Cordova app is a production or testing build.
    Have you tried checking the prod/testing build with Chrome to rule that out? Have you inspected the DOM in the cordova app to see if the component is there if it doesn't have a size you'd expect?
    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

  4. #3

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Have you tried checking the prod/testing build with Chrome to rule that out? Have you inspected the DOM in the cordova app to see if the component is there if it doesn't have a size you'd expect?
    Hi Mitchell,

    To be honest, it looked so strange that I didn't test production build directly in chrome!
    Now I have made a local production build and started app from Chrome browser.... and you guessed it, it does not work.
    So it's good and bad in a way. Its good because this is not specific to cordova, Android or WebView - "simply" the build is wrong?

    So, when I have a dev version, switching views with animation works fine. When i have a production build, I cant switch views....?
    As I have mentioned before, the views do not work at all when default animation is on, and they partially work if I disable the animation.
    When animation is disabled, the content will be shown, but the "highlight" on the tab will not follow active tab.

    It's hard to believe that kind of differences can result from dev vs prod builds.
    I also had a different issue when for example Ext.define for Ext.Messagebox (and others) was copied both to framework.js and app.js when "testing" flag was used. That resulted in attempt to create two instances of Ext.Messagebox with the same ID. But maybe that is not related.

    Mike

  5. #4

    Default

    I have created a new template app for that, and there are no problems like that.
    I must have something that is messing up my build. I have noticed I get a framework file generated, although i DO NOT have a

    "framework": {
    "enable": true
    },

    Although I only build modern toolkit, maybe I'm getting some mix of modern and classic or some overrides are not loaded in the correct order.
    What could be triggering output of framework.js?

  6. #5

    Default

    Problem is solved. One of my packages contained alternative options for classic and modern builds, and by mistake I have left framework reference there:
    Code:
     /**
       * Settings specific to classic toolkit builds.
       */
      "classic": {
        "js": [
          // Remove this entry to individually load sources from the framework.
          {
            "path": "${framework.dir}/build/ext-all-rtl-debug.js"
          }
         requires: []
        ]
      },
    
    
      /**
       * Settings specific to modern toolkit builds.
       */
      "modern": {
        "js": [
          // Remove this entry to individually load sources from the framework.
          {
            "path": "${framework.dir}/build/ext-modern-all-debug.js"
          }
        requires: []
        ]
      },

    As a result, a wrong output was produced containing a separate framework.js file that conflicted with app.js that also cintained framework code.
    This cause all sorts of problems....


    Please close the ticket!

Similar Threads

  1. extjs modern cordova - filesystem
    By udayp in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 3 May 2017, 5:15 AM
  2. Replies: 1
    Last Post: 8 Mar 2017, 6:01 PM
  3. [OPEN] Android Fail to Load Store (Cordova)
    By Yazid in forum Sencha Touch 2.x: Bugs
    Replies: 4
    Last Post: 18 Aug 2015, 12:56 PM
  4. Replies: 4
    Last Post: 28 Sep 2011, 12:57 AM

Posting Permissions

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