Comment activer correctement un MVC Voir en Sencha tactile V2
-
26-10-2019 - |
Question
Je suis en Sencha tactile bêta V2 et je regarde le plus documentation récente .
J'ai suivi les instructions de Ext.application
et essaie de mettre correctement mon application MVC. Malheureusement, je ne peux pas comprendre comment charger réellement une vue avec cette approche.
index.js
Ext.application({
name: 'rpc',
defaultUrl: 'home/index',
controllers: ['home'], //note: define controllers here
launch: function () {
console.log('Ext.application ~ launch'),
Ext.create('Ext.TabPanel', {
id: 'rpc-rootPanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
title: 'Home',
iconCls: 'home'
}]
});
Ext.create('Ext.viewport.Viewport', {
id:'rpc-rootPanel',
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide'
});
}
});
homeController.js
Ext.define('rpc.controller.home', {
extend: 'Ext.app.Controller',
views: ['home.index'],
stores: [],
refs: [],
init: function () {
console.log('rpc.controller.home ~ init');
},
index: function () {
console.log('rpc.controller.home ~ index');
}
});
indexView.js
Ext.define('rpc.view.home.index', {
extend: 'Ext.Panel',
id: 'rpc-view-home-index',
config: {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'button',
text: 'Videos',
handler: function () {
}
}],
html:'test'
}
});
Toute aide que vous pourriez être en mesure d'offrir serait grandement apprécié.
La solution
La nouvelle version suit les concepts MVC dans ExtJS 4. Introduit Vous devriez lire Guide d'architecture parce Sencha touch suivre la même arch.Here est ma structure de dossier:
Au cours du développement de votre application, vous devez utiliser sencha-touch-all-debug-w-comments.js dans votre code HTML. Cela aide à déboguer votre application.
Voici la classe d'application:
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: 'rpc',
appFolder: 'app',
controllers: ['Home'],
launch: function () {
Ext.create('Ext.tab.Panel',{
fullscreen: true,
tabBarPosition: 'bottom',
items:[{
title: 'Home',
iconCls: 'home',
html: '<img src="http://staging.sencha.com/img/sencha.png" />'
},{
title: 'Compose',
iconCls: 'compose',
xtype: 'homepage'
}]
});
}
});
Notez que j'ai inclus la vue page d'accueil en utilisant l'alias (xtype: « page d'accueil »).
Voici le contrôleur:
Ext.define('rpc.controller.Home', {
extend: 'Ext.app.Controller',
views: ['home.HomePage'],
init: function() {
console.log('Home controller init method...');
}
});
Et enfin, moi Page d'accueil:
Ext.define('rpc.view.home.HomePage', {
extend: 'Ext.Panel',
alias: 'widget.homepage',
config: {
html: '<img src="http://staging.sencha.com/img/sencha.png" />'
},
initialize: function() {
console.log("InitComponent for homepage");
this.callParent();
}
});
La propriété alias sert à instancier exemple de la classe en cas de besoin. Vous pouvez également utiliser la méthode Ext.create.
J'espère que cela vous aidera à démarrer avec Sencha Touch.