Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    57
    Vote Rating
    0
    mishoboss is on a distinguished road

      0  

    Default Performance optimizations

    Performance optimizations


    Hi, I made my first Sencha app. It's a relatively simple app that gets JSON data from remote server and builds interface from this data. However I'm little bit scared about the slow performance on Galaxy S with Android 2.3.4 phone and even on a PC with Chrome. I'm sure some things could be done far better for a better performance, so I'm begging for a little help here

    I use Ext.navigation.View and I build the whole interface on button press. The JSON data is read, recursively looped and build the tree navigation. Please, take a look at the buildUIfunction and addsWidget function. I pass as parameters big parts from the JSON data there... any idea optimizing this?

    Here you can see the working app: http://m-design.bg/sencha/
    To load the interface, please click on the button "Load UI" in the lower right corner. The first group of rows are buttons to other pages, click on them to see the animation performance.

    I would be very happy on any suggestion and idea to make the performance better.

    Here I post the whole app code:

    Code:
    Ext.require([
        'Ext.Panel',
        'Ext.Button',
        'Ext.Toolbar',
        'Ext.util.JSONP',
    	'Ext.dataview.ComponentView'
    ]);
    
    
    
    
    
    
    function addsWidget(data, container){
    	var widget;
    	  if(data.type == "Switch"){
    		  widget = Ext.create('Ext.form.Toggle', {label: data.label});
    	  } else if(data.type == "Slider"){
    		  widget = Ext.create('Ext.field.Slider', {label: data.label, value: data.item.state, minValue: 0, maxValue: 100});
    	  } else if(data.type == "Text"){
    		  widget = Ext.create('Ext.form.Text', {label: data.label, value: data.item? data.item.state : data.label, readOnly: true});			
    	  } else if(data.type == "Group"){
    		  widget = Ext.create('Ext.Button', {text: data.label, style:'display:block', page_id: data.linkedPage.id, handler: tapHandler, baseCls: 'x-form-label x-field', labelCls:''});	            buildUI(data.linkedPage, 'page', container);
    	  } else if(data.type == "Frame"){
    		  //widget = Ext.create('Ext.form.FieldSet', {title: 'test'});
    		  buildUI(data, 'frame', container);
    	  }
    	  return widget;
    }
    
    
    
    
    function buildUI(json, type, parent){
    	if (json) {
    		                var container;
    						
    						if(type == 'page'){
    					        container = Ext.create('Ext.Panel', {title: json.id, layout: 'vbox', scrollable: 'vertical', id: json.id});
    						} else if(type == 'frame'){
    							container = Ext.create('Ext.form.FieldSet', {title: json.label});
    						}
    						var page_data = json.widget;
    						if (Ext.isArray(page_data)){
    							for(var i in page_data){
    							   container.add(addsWidget(page_data[i], container));
    							   parent.add(container);
    						}
    	                    } else {
    							container.add(addsWidget(page_data, container));
    							parent.add(container);
    						}
    						
    						
    						
    						
    
                        }
                        else {
                            alert('There was an error retrieving the UI.');
                        }
                       
    }
    
    
    
    var tapHandler = function (btn, evt) {
                Ext.getCmp('content').push(btn.page_id);
            }
    
    
    
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
    
    
    
    
        
        onReady: function() {
    		//var server_url = 'http://192.168.90.176:8080';
    		var server_url = 'http://m-design.bg/sencha';
    		
    		
           
    		
    
            var makeJSONPRequest = function() {
                Ext.getCmp('content').setMask({
                    message: 'Loading...'
                });
                Ext.util.JSONP.request({
                    url: 'http://m-design.bg/sencha/json.txt',
    				//url: server_url+'/rest/sitemaps/demo',
                    callbackKey: 'jsoncallback',
    				params: {
                        key: Math.random()
                    },
                    
                    callback: function(result) {
                                            
    					buildUI(result.homepage, 'page', view);
    					Ext.getCmp('content').unmask();
    					Ext.getCmp('content').push('demo')
    					
                    }
                });
            };
            
    
    
    
    
    
    
            var view = Ext.create('Ext.navigation.View', {
                fullscreen: true,
    id: 'content',
                //true means the back button text will always be 'back'
                // useTitleForBackButtonText: true,
    
                items: [
                    //bottom toolbar containing the settings button
                    {
                        docked: 'bottom',
                        xtype: 'toolbar',
                        ui :'light',
                        items: [
                            { xtype: 'spacer' },{
                        text: 'Load UI',
                        handler: makeJSONPRequest
                    },
                            
                        ]
                    },
    
                    
                ]
            });
    
    
        }
    });

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    57
    Vote Rating
    0
    mishoboss is on a distinguished road

      0  

    Default


    Anyone? I would be very happy even on comments about the coding. This is my first Sencha app ever.

  3. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Ideally, you should extend Ext.navigation.View and then add all your custom logic in there. Then in your application, all you have to do is include your custom subclass, and use that. All of the ajax request ion, formatting, and adding logic should be in that subclass.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar