You can slice the views. For Example if you have login screen, in app.js only add items for login screen required js. When you click login screen load dynamiclly controller, model, store, view what you need to show other screen.
ingilizcem anlaşıldığı gibi kötü, şöyle söyleyim; aynı sorun bende de vardı. Uygulamayı parçaladım. app.js içerisinde sadece ilk ekranı açmak için gerekli olan js leri ekledim. Böylece uygulama 2 veya 3 sn de görünür hale geliyor. Daha sonra loginden giriş yaptığımda diyelim ki anasayfa ekranına gidicem, o zaman ana sayfa ekranı için gerekli olan controller,model,store ve view ları dinamik olarak yüklüyorum uygulamaya. Belki ilk geçişte 2 3 sn bekletecek ama bir kere açtığın zaman ilgili ekranı bir daha bekleme yapmıyor.
//Put this code inside app.js at the end of the app.js.
Code:
var loadedDynamically = [];
//Dinamik Yükleme Methodları
Ext.app.Application.prototype.addControllers = function (classPaths, config) {
var self = this,
config = config || {};
if (classPaths.length == 0) {
if (config) { config.call() };
return;
}
var nClassPaths = []
Ext.each(classPaths, function (classPath) {
nClassPaths.push('MyApp.controller.' + classPath);
});
classPaths = nClassPaths;
Ext.require(classPaths, function () {
var controllers = self.getControllerInstances();
Ext.each(classPaths, function (classPath) {
if (!controllers[classPath]) {
var controller = Ext.create(classPath, Ext.apply({
application: self
}, config.options || {}));
controllers[classPath] = controller;
self.controllers.push(classPath);
controller.init();
}
});
if (config) { config.call() };
});
};
Ext.app.Application.prototype.addStores = function (classPaths, config) {
if (classPaths.length == 0) {
if (config) { config.call() };
return;
}
Ext.each(classPaths, function (classPath) {
classPath = 'MyApp.store.' + classPath;
classPath = classPath.replaceAll('\\.', '/').replaceAll('MyApp', 'app');
var path = classPath.split('/');
var storename = path[path.length - 1];
if (!Ext.getStore(storename)) {
try {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", classPath + '.js', false);
xmlHttp.send(null);
var str = xmlHttp.responseText;
xmlHttp = null
str = str.replace('define', 'create');
eval(str);
}
catch (e) {
}
}
});
if (config) { config.call() };
};
Ext.app.Application.prototype.addModels = function (classPaths, config) {
if (classPaths.length == 0) {
if (config) { config.call() };
return;
}
var nClassPaths = []
Ext.each(classPaths, function (classPath) {
nClassPaths.push('MyApp.model.' + classPath);
});
classPaths = nClassPaths;
Ext.require(
classPaths
, function () {
if (config) { config.call() };
});
};
Ext.app.Application.prototype.addViews = function (classPaths, config) {
if (classPaths.length == 0) {
if (config) { config.call() };
return;
}
var nClassPaths = []
Ext.each(classPaths, function (classPath) {
nClassPaths.push('MyApp.view.' + classPath);
});
classPaths = nClassPaths;
Ext.require(
classPaths
, function () {
if (config) { config.call() };
});
};
//Bu kod kısmını global bir js kısmına ekle
Code:
//viewName, openModule, callback function, isMain, record, beforeCallbackFn, callbackFnArgs,beforeCallbackFnArgs
function loadDynamically(me, viewName, callbackFn, callbackFnArgs, beforeCallbackFn, beforeCallbackFnArgs) {
var app = me.getApplication();
function loadDynamicallyTemplate(controllers, models, stores, views) {
if (loadedDynamically.indexOf(viewName) == -1) {
app.addControllers(controllers, function () {
app.addModels(models, function () {
app.addStores(stores, function () {
app.addViews(views, function () {
//Daha açılmış ise o view bir daha yükleme
loadedDynamically.push(viewName);
//view açılmadan önce yapılması istenilenler
if (beforeCallbackFn)
beforeCallbackFn.apply(this, beforeCallbackFnArgs);
Ext.Viewport.removeAll(true, true);
Ext.Viewport.setActiveItem({ xtype: viewName });
//view açıldıktan sonra yapılması istenilenler
if (callbackFn)
callbackFn.apply(this, callbackFnArgs);
});
});
});
});
}
else {
//zaten yüklenmiş ise
//view açılmadan önce yapılması istenilenler
if (beforeCallbackFn)
beforeCallbackFn.apply(this, beforeCallbackFnArgs);
Ext.Viewport.removeAll(true, true);
Ext.Viewport.setActiveItem({ xtype: viewName });
//view açıldıktan sonra yapılması istenilenler
if (callbackFn)
callbackFn.apply(this, callbackFnArgs);
}
}
//Gelen View adına göre sisteme gerekli olanları yükleme
switch (viewName) {
case 'vwAnaSayfa':
loadDynamicallyTemplate([
'cntAnaSayfa',
],
[
'mdlAnaSayfa',
],
[
'strAnaSayfa',
],
[
'vwAnaSayfa',
]);
break;
default:
console.log('Dikkat Dinmik View Ekle Bulunamadı...');
break;
}
}
//Kullanımı
Code:
Ext.define('MyApp.controller.cntLogin', {
extend: 'Ext.app.Controller',
config: {
refs: {
btnLogin: '#btnLogin'
},
control: {
btnLogin: {
tap: function () {
//basit yolu
//viewName, openModule, callback function, isMain, record, beforeCallbackFn, callbackFnArgs,beforeCallbackFnArgs
loadDynamically(this,'vwAnaSayfa',null,null,null,null);
var test=1;
var test2=2;
//callback lazım ise
//viewName, openModule, callback function, isMain, record, beforeCallbackFn, callbackFnArgs,beforeCallbackFnArgs
loadDynamically(this,'vwAnaSayfa',function(test){
//before opening view callback
console.log(test)
},[test],function(test2){
//after view opened callback
console.log(test2)
},[test2])
}
}
}
}
});
Startup Performance Problem
Reply With Quote
