Performance optimizations

[mishoboss]

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:

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
                },
                        
                    ]
                },

                
            ]
        });


    }
});

[mishoboss]

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

[rdougan]

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.