1. #11
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    Ya. when press the 1st tab is 582 ,second tab is 600++ then I switch back to 1st tab also is 582. Did I setup correctly

  2. #12
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    Quote Originally Posted by digeridoopoo View Post
    Wow, 1000 items is way too much. To me that suggests either the OptimizedTab is not working/setup correctly. I had the same problem as you when I was trying to set this up, the OptimizedTab was not working.

    I had 1100 items before I added the OptimizedTab. When i activated it it went down to about 300.

    To test that the OptimizedTab is working properly, paste the command into the console after first load. I get about 300. Paste the command after each tab switch and go back to tab 1, you should have the same number, about 300.

    Without the OptimizedTab when switching back to tab 1 you will have a higher number, probably about 800-1100.

    For me to check it is working I created a basic OptimizedTab app with a google map panel in 1 and a carousel in another. If you look closely to see it working you will see the Google map panel being removed just before the animation ends (the optimizedtab removes items before the animation completes)

    I am sure once you get your active DOM items down to 300 your app will be much faster!

    :-)
    I try my galaxy tab today. It been improved abit. But still very slow. take around 3 sec, i tink is render css problem , because when I change tab, it quite fast, but listing page is very slow

  3. #13
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    Quote Originally Posted by koolll View Post
    I try my galaxy tab today. It been improved abit. But still very slow. take around 3 sec, i tink is render css problem , because when I change tab, it quite fast, but listing page is very slow
    In addition to the CSS lookouts I posted earlier, try also to be careful with unnecessary "background-size", background images/gradients alltogether, "opacity", "rgba(..)".

    I had a slow app on Ipad1, which was due to "border-radius" and "box-shadow" being applied on 30-60 items. Removing them fixed this.

  4. #14
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      1  

    Default Have you tried the sencha command?

    Have you tried the sencha command?


    Hmmm maybe it's a CSS problem then like warrean said? Another thing, have you used the sencha command on your app, which compiles it? It can strip all unnecessary CSS and compress all JavaScript to one file. Do you have many CSS files? If you inspect in the inspector more you can also watch for all http requests, and see memory consumption.

    Maybe paste your app.js file and index.html file here?

  5. #15
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    Quote Originally Posted by warrean View Post
    In addition to the CSS lookouts I posted earlier, try also to be careful with unnecessary "background-size", background images/gradients alltogether, "opacity", "rgba(..)".

    I had a slow app on Ipad1, which was due to "border-radius" and "box-shadow" being applied on 30-60 items. Removing them fixed this.
    Hi, thanks for your help.Can you help me check my scss file?
    app.scss
    Code:
    //Overrall color$base-color: #1985D0;
    $active-color: #BCC8DA;
    
    
    $index-bar-height: 50em ;
    $list-pressed-color: #D8DEEE;
    $list-active-color:  #D8DEEE; 
    
    
    @import 'sencha-touch/default/all';
    @include sencha-panel;
    @include sencha-buttons;
    @include sencha-sheet;
    @include sencha-picker;
    @include sencha-tabs;
    @include sencha-toolbar;
    @include sencha-toolbar-forms;
    @include sencha-indexbar;
    @include sencha-list;
    @include sencha-layout;
    @include sencha-carousel;
    @include sencha-form;
    @include sencha-msgbox;
    @include sencha-loading-spinner;
    @include sencha-list-paging;
    @include sencha-list-pullrefresh;
    
    
    // Additional Pictos
    @include pictos-iconmask('card2');
    @include pictos-iconmask('button3');
    @include pictos-iconmask('circle2');
    @include pictos-iconmask('circle3');
    @include pictos-iconmask('bullseye1');
    @include pictos-iconmask('reply');
    @include pictos-iconmask('add_black');
    @include pictos-iconmask('user_list');
    @include pictos-iconmask('user_list2');
    @include pictos-iconmask('list');
    @include pictos-iconmask('note1');
    @include pictos-iconmask('team1');
    @include pictos-iconmask('gift');
    @include pictos-iconmask('user');
    @include pictos-iconmask('delete_black2');
    @include pictos-iconmask('spaces2');
    
    
    
    
    
    
    //Tab Panel
    @include sencha-tabbar-ui('mainTabBar', #1C2640, 'matte', #FFFFFF);
    
    
    //Toolbar
    @include sencha-toolbar-ui('toolbar', #C2C2C2, 'matte');
    
    
    //Select field 
    .txtwhite {
      font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
        font-size: .7em;
        margin-left: 60px;
        min-height: 50px;
    	  font-weight: bold;
    	color:black;
    
    
    }
    
    
    
    
    //Select field font color
    .x-toolbar .x-field-select .x-input-el {
    -webkit-text-fill-color: black;
    }
    
    
    //Select field arrow color
    .x-field-select .x-component-outer::after {
    background-color: black;
    }
    
    
    //Select field background color
    .x-toolbar-toolbar .x-field-select .x-component-outer {
    background-color: #D8D8D8;
    background-image: none;
    }
    
    
    
    
    
    
    h2 { font-weight: bold; padding-bottom: 3px; }
    img { border-radius: 5px; float: left; }
    .tweet {
        font-size: 70%;
        margin-left: 60px;
        color: #333;
        min-height: 50px;
    }
    .posted { float: right; }
    
    
    
    
    //Pullmenu
    .x-pullmenu {
    	display: -webkit-box!important;
    	display: box!important;
    	-webkit-box-orient: horizontal;
    	box-orient: horizontal;
    	-webkit-box-align: center;
    	box-align: center;
    	-webkit-box-pack: center;
    	box-pack: center;
    	position: absolute!important;
    
    
    }
    .x-pullmenu-top {
    	top: -30px;
    	left: 0;
    	width: 100%;
    	height: 30px;	
    }
    
    
    .x-pullmenu-left {
      	top: 0px;
      	left: -100px;
      	width: 100px;
      	height: 100%;
    }
    
    
      	.pullmenu#my-top-menu .x-body {
        		background-color: black!important;
        	}
        	.bottom-menu {
        		background-image: url(../images/bottom-menu.png) ;
        		background-repeat: no-repeat ;
        		background-size: 100% 100% ;
        	}
        	
        	.menu-top {
        		background-image: url(../images/top-menu.png) ;
        		background-repeat: no-repeat ;
        	}
        	.doc-button {
        		background-image: url(../images/info.png)!important;
        		background-repeat: no-repeat ;
        		background-size: 100% 100% ;
        		width: 30px ;
        		height: 30px ;
        		margin: 5px 20px 0 20px;
        	}
        	.ok-button {
        		background-image: url(../images/ok.png)!important;
        		background-repeat: no-repeat ;
        		background-size: 100% 100% ;
        		width: 30px ;
        		height: 30px ;
        		margin: 5px 0 5px 20px;
        	}
        	.saving {
        		margin-top: 8px; 
        	}
        	#doc-content {
        		font-size: 15px ;
        	}
        	.doc-opt-label {
        		display: inline-block;
        		width: 100px ;
        	}
        	.doc-opt-expl {
        		display: inline-block ;
        		width: 100% ;
        	}
        	.pull-menu-doc {
        		color: white ;
        	}
    		
    		
    
    
    //Index bar character size
      .x-phone.x-landscape .x-indexbar {
        > div {
            font-size: 0.55em;;
            line-height: 1em;
    		color: black;
        }
    	
      }
    
    
    
    
      //Index bar background color
    .x-list-normal .x-list-header-wrap .x-item-header, .x-list-normal .x-list-header{
     background-color: #E7E7E7;
     background-image: none;
     border-top: none;
     color:#000000;
     border-bottom-width: 1px;
      border-bottom-color: #BBBBBB
    
    
     }
    
    
     
     
    //--GroupBy List  --
    .tweet-wrapper {
    
    
      h2 { font-weight: bold; padding-bottom: 3px; }
      img { border-radius: 5px; float: left; }
      .tweet {
        font-size: 63%;
        margin-left: 60px;
        min-height: 40px;
    	
      }
      .posted { float: right; }
    }
    
    
    
    
    
    
    
    
    //--Coupon List--
    .demo-weather {
      text-align: center;
    }
    .day {
      display: inline-block;
      background-color: #f9f9f9;
      color: rgba(0, 0, 0, .6);
      text-shadow: #fff 0 1px 0;
      width: 10em;
      text-align: center;
      @include border-radius(15px);
      @include box-shadow(inset 0 0 4px #888);
      box-shadow: inset 0 0 4px #888;
      padding: 1em;
      margin: .5em;
    
    
      .x-android & {
        @include box-shadow(none);
      }
    }
    .date {
      font-size: .8em;
    }
    .icon img {
      @include border-radius(10px);
      margin: .6em;
      width: 5em;
    }
    .temp {
      margin-top: .2em;
      display: block;
      font-size: 2.2em;
      line-height: .5em;
    }
    .temp_low {
      display: inline;
      font-size: .5em;
      color: rgba(30, 30, 30, .5);
    }
    bluebutton.css
    Code:
    .containerRadious{
        background-color: #FFFFFF;
        border-radius: 15px;
    }
    .containerBackGround
    {
           background-color: #BECADB;
    }
    
    
    
    
    .slide.out {
      -webkit-animation-duration: .300s;
      -webkit-animation-name: slideOut;
      -webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855); 
      -webkit-transform: translateX(-350px);
    }
    .slide.in {
      -webkit-animation-duration: .200s;
      -webkit-animation-name: slideIn;
      -webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855); 
      -webkit-transform: translateX(-0px);
    }
    
    
    @-webkit-keyframes slideOut {
      from { -webkit-transform: translateX(-0px); }
      to { -webkit-transform: translateX(-350px); }
    }
    @-webkit-keyframes slideIn {
      from { -webkit-transform: translateX(-350px); }
      to { -webkit-transform: translateX(-0px); }
    }
    index.html
    Code:
    <!DOCTYPE HTML><html manifest="" lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>bluebutton</title>
        <style type="text/css">
             /**
             * Example of an initial loading indicator.
             * It is recommended to keep this as minimal as possible to provide instant feedback
             * while other resources are still being loaded for the first time
             */
            html, body {
                height: 100%;
                background-color: #1985D0
            }
    
    
            #appLoadingIndicator {
                position: absolute;
                top: 50%;
                margin-top: -15px;
                text-align: center;
                width: 100%;
                height: 30px;
                -webkit-animation-name: appLoadingIndicator;
                -webkit-animation-duration: 0.5s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: linear;
            }
    
    
            #appLoadingIndicator > * {
                background-color: #FFFFFF;
                display: inline-block;
                height: 30px;
                -webkit-border-radius: 15px;
                margin: 0 5px;
                width: 30px;
                opacity: 0.8;
            }
    
    
            @-webkit-keyframes appLoadingIndicator{
                0% {
                    opacity: 0.8
                }
                50% {
                    opacity: 0
                }
                100% {
                    opacity: 0.8
                }
            }
        </style>
    
    
    
    
    
    
        <!-- The line below must be kept intact for Sencha Command to build your application -->
        <script src="barcodescanner.js" type="text/javascript"></script>
        <link href="resources/css/blueButton.css" rel="stylesheet" type="text/css" />
        <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
    </head>
    <body>
        <div id="appLoadingIndicator">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
    </html>
    app.js
    Code:
    //<debug>Ext.Loader.setPath({
        'Ext': 'touch/src',//Location of the sencha touch source files
        'bluebutton': 'app',
      
      
        
    });
    //</debug>
    
    
    
    
    
    
    //Ext.Loader.setConfig({
    //    enabled: true,
    //    paths: {
    //        'Ext.ux.form': 'resources/utility/ImageField.js'
    //        'Ext.ux.form': 'resources/utility/ImageField.js'
    //    }/// <reference path="resources/utility/ImageField.js" />
    
    
    //});
    //Ext.require('Ext.ux.form');
    
    
    
    
    
    
    
    
    Ext.application({
        name: 'bluebutton',//Application Path, all classes in you app. For eg blueButton.view.Main.case sensitive
        models: [],
        views: ['Main',
        'login'],
        
        controllers: ['Main', 
        'BlueButton.MemberList', 
        'BlueButton.TransactionList',
        'BlueButton.CouponList',
        'BlueButton.Loyalty',
    
    
        
        
        ],
    
    
    
    
        stores: ['TopMenuList'],
        requires: [
            'Ext.MessageBox',
            
        ],
    
    
      
        icon: {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/Icon@2x.png',
            '144': 'resources/icons/Icon~ipad@2x.png'
        },
    
    
        isIconPrecomposed: true,
    
    
        startupImage: {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },
    
    
        launch: function() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
    
    
    
    
            // Initialize the main view
    //        Ext.Viewport.add(Ext.create('bluebutton.view.login'));
            Ext.Viewport.add(Ext.create('bluebutton.view.Main'));
    //        Ext.create('bluebutton.view.TopMenuList');
    
    
        },
    
    
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });

  6. #16
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    Comment out all the heavy processing CSS tags in your app.scss and bluebutton.css, that means
    the border-radius, box-shadows, and the background-images and everything else I've listed previously. See if if you gain performance on this device.

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."