Come attivare correttamente un MVC View in Sencha tocco V2
-
26-10-2019 - |
Domanda
Io corro Sencha tocco V2 beta e non vedo al massimo recente documentazione .
Ho seguito le istruzioni Ext.application
e sto cercando di porre correttamente la mia applicazione MVC. Purtroppo non riesco a capire come caricare in realtà una View con questo approccio.
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'
}
});
Tutto l'aiuto che potrebbe essere in grado di offrire sarebbe molto apprezzato.
Soluzione
La nuova release segue concetti MVC introdotto in ExtJS 4. Si dovrebbe leggere Architecture guide perché Sencha touch seguirà la stessa arch.Here è la mia struttura di cartelle:
Durante lo sviluppo della vostra applicazione, si dovrebbe fare uso di Sencha-touch-all-debug-w-comments.js nel codice HTML. Questo aiuta nel debug dell'applicazione.
Questa è la classe di applicazione:
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'
}]
});
}
});
Si noti, come ho incluso la vista home page utilizzando l'alias (xtype: 'home page').
Ecco il controllore:
Ext.define('rpc.controller.Home', {
extend: 'Ext.app.Controller',
views: ['home.HomePage'],
init: function() {
console.log('Home controller init method...');
}
});
E, infine, la mia Homepage vista:
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 proprietà alias viene utilizzato per esempio un'istanza di della classe quando necessario. Si potrebbe anche utilizzare il metodo Ext.create.
Spero che questo vi aiuterà a iniziare con Sencha Touch.
Altri suggerimenti
Grande risposta da Abdel.
Si può anche fare, però profili, come dimostrato in questa risposta: Sencha tocco 2.0 MVC esercitazione