1. #31
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    2
    liondev4 is on a distinguished road

      0  

    Default Issue with Sencha Touch 2.2.0 version

    Issue with Sencha Touch 2.2.0 version


    Hi Toorshia,

    Did you finally build a version working with sencha touch 2.2.0 ?

    I have a lot of CSS issues when compiling with compass or sencha cmd

    Thks

  2. #32
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    2
    liondev4 is on a distinguished road

      0  

    Default


    It's OK
    Got it working well with touch 2.2.0
    Just adding a z-index !

  3. #33
    Sencha User
    Join Date
    Apr 2012
    Posts
    16
    Vote Rating
    3
    toorshia is on a distinguished road

      0  

    Default


    Hi,

    I actually didn't have time to take a second look at this.

    Can you tell me how you fixed issue?
    So I can just c/p it to the github code

    I'm so lazy these days

    Thanks!

  4. #34
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    2
    liondev4 is on a distinguished road

      0  

    Default


    OK here what I did :

    1- In jam.scss, you have to change import and include components :

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //COMPONENTS USED
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    @import 'sencha-touch/base';
    @import 'sencha-touch/base/all';
    @import 'sencha-touch/default';
    @import 'sencha-touch/default/all';

    // @include sencha-panel;
    //@include sencha-buttons;
    //@include sencha-toolbar;
    //@include sencha-list;
    //@include sencha-layout;

    2- You have to change Icon mask that is no longer supported by sencha touch 2.2.0. You need to convert your png icons into svg/font icon in the website http://icomoon.io/app for exemple like it is explained in the following post :
    http://extdesenv.com.br/theming/addi...h-2-2/?lang=pt

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //ICONS USED
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    @include icon-font('Pictos', inline-font-files(
    'pictos/pictos-web.woff', woff,
    'pictos/pictos-web.ttf', truetype,
    'pictos/pictos-web.svg', svg
    ));
    @include icon-font('JamIcon', inline-font-files(
    'JamIcon.woff', woff,
    'JamIcon.ttf', truetype,
    'JamIcon.svg', svg
    ));

    @include icon('download','\e000','JamIcon');
    @include icon('cloud_black','\e001','JamIcon');
    @include icon('check_black1','\e002','JamIcon');
    @include icon('settings9','\e003','JamIcon');
    @include icon('help_black','\e004','JamIcon');
    @include icon('power_on','\e005','JamIcon');

    3- Change also the iconCls of the menu.js file to fit with the tag given to icon fonts model :
    iconCls : 'download',

    4- Add in the strawberry.scss file, the z-index line at .x-JAM-slidenav-container :
    // JAM MENU
    .x-JAM-slidenav-container {
    box-shadow: -5px 0px 10px 2px rgba(black, .3);
    z-index: 2;
    }
    .x-JAM-slidenav-menu {
    background-color: $JAM-grey;
    z-index: 1;
    .x-list {
    background-color: $JAM-grey;
    }
    }

    And that's it !

  5. #35
    Sencha User
    Join Date
    Oct 2013
    Posts
    14
    Vote Rating
    0
    senchaguardiola is on a distinguished road

      0  

    Default


    Hey Man! Thanks for your help!
    The menu works more or less now.
    Unfortunately I could not get the icons to work, and the menu fades out onMouseUp when I try to swipe it.

    If you could send me a working version, that would be great!!
    thanks man!

    Quote Originally Posted by liondev4 View Post
    OK here what I did :

    1- In jam.scss, you have to change import and include components :

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //COMPONENTS USED
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    @import 'sencha-touch/base';
    @import 'sencha-touch/base/all';
    @import 'sencha-touch/default';
    @import 'sencha-touch/default/all';

    // @include sencha-panel;
    //@include sencha-buttons;
    //@include sencha-toolbar;
    //@include sencha-list;
    //@include sencha-layout;

    2- You have to change Icon mask that is no longer supported by sencha touch 2.2.0. You need to convert your png icons into svg/font icon in the website http://icomoon.io/app for exemple like it is explained in the following post :
    http://extdesenv.com.br/theming/addi...h-2-2/?lang=pt

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //ICONS USED
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    @include icon-font('Pictos', inline-font-files(
    'pictos/pictos-web.woff', woff,
    'pictos/pictos-web.ttf', truetype,
    'pictos/pictos-web.svg', svg
    ));
    @include icon-font('JamIcon', inline-font-files(
    'JamIcon.woff', woff,
    'JamIcon.ttf', truetype,
    'JamIcon.svg', svg
    ));

    @include icon('download','\e000','JamIcon');
    @include icon('cloud_black','\e001','JamIcon');
    @include icon('check_black1','\e002','JamIcon');
    @include icon('settings9','\e003','JamIcon');
    @include icon('help_black','\e004','JamIcon');
    @include icon('power_on','\e005','JamIcon');

    3- Change also the iconCls of the menu.js file to fit with the tag given to icon fonts model :
    iconCls : 'download',

    4- Add in the strawberry.scss file, the z-index line at .x-JAM-slidenav-container :
    // JAM MENU
    .x-JAM-slidenav-container {
    box-shadow: -5px 0px 10px 2px rgba(black, .3);
    z-index: 2;
    }
    .x-JAM-slidenav-menu {
    background-color: $JAM-grey;
    z-index: 1;
    .x-list {
    background-color: $JAM-grey;
    }
    }

    And that's it !