Uso de MVC con ExtJs 4 2013 Una vez terminado esto, vamos a empezar a realizar nuestra aplicación abriendo el archivo app.js Al cual agregamos el siguiente código: Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'MVCApp', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' } ] }); } });
En el cual: name -> se refiere al nombre que le damos a nuestra aplicación y por lo cual las demás clases harán referencia a el appFolder -> hace referencia al nombre de la carpeta donde se encuentra nuestra estructura MVC definida launch -> se refiere a la aplicación a lanzar al momento de desplegar la página web. Una vez hecho esto hacemos referencia a nuestra clase app.js en nuestro index con la siguiente linea en nuestro index.jsp: <script type="text/javascript" src="<%=basePath%>app.js"></script> desplegamos el proyecto, con lo cual obtendremos el siguiente resultado
Controlador de la aplicación Una vez definida la estructura de nuestra aplicación; además de haberla desplegado exitosamente, es tiempo de definir un controlador, esto con la finalidad de insertar funcionalidad a nuestra aplicación. Para este cometido creamos un archivo dentro de la carpeta controller, con el nombre de UserController.js, y colocamos este código dentro de él. Ext.define('MVCApp.controller.UserController',{ extend:'Ext.app.Controller', init: function() { this.control({ 'viewport > panel': { render:this.onPanelRendered } }); }, onPanelRendered:function(){ console.log('The panel was rendered') } });
Una vez hecho esto definimos nuestro controlador en el archivo app.js, como se muestra en el siguiente código Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'MVCApp', appFolder: 'app', controllers:[ 'UserController'
Desarrollo de Habilidades Digitales
Page 4