ExtJS Desktop - Creación de módulos Más videos
Comentarios: 35
Likes: 0 Persona
Duración: 12.32 minutos
Dificultad: Intermedio
Descripción del tema
En este video-tutorial se muestra como crear módulos dentro del Desktop de ExtJS para que comiences a desarrollar tus aplicaciones de manera rápida y utilizando las bondades de Desktop que provee la librería.
Iniciar el Desktop
El primer paso es copiar los archivos necesarios para poder trabajar con el Desktop, debes copiar la carpeta que se encuentra dentro del directorio ext-3.2.1/examples/desktop al directorio raiz o en cualquier otro lugar donde quieras almacenar tu aplicación.Modificar las referecias
Una vez que tenemos la carpeta desktop en el directorio raiz es necesario abrir el archivo "desktop.html" y cambiar las referencias a la librería de extjs.<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.2.1/ext-all-debug.js"></script>
Importar nuestro módulo
Cuando trabajamos con el Desktop (tambien cuando no lo hacemos) es recomendable escribir nuestro código javacript dentro de objetos para que esté encapsulado y evitar problemas a futuro, para este ejemplo voy a importar una extensión que es un cliente Twitter creado con Extjs (yo la desarrollé para el curso de extjs), así que los archivos a importar serán los siguientes.<link rel="stylesheet" type="text/css" href="js/Twittext/css/style.css" /> <script type="text/javascript" src="js/Twittext/TwittextUI.js"></script> <script type="text/javascript" src="js/Twittext/Twittext.js"></script>
Agregando nuestro módulo al Desktop
Una vez que hemos importado al documento html nuestro módulo necesitamos inicializarlo y agregar un link dentro del menu "start" del dektop, para eso podemos editar el archivo "sample.js" o bien crear otro archivo que contenga el siguiente código.MyDesktop.Twittext= Ext.extend(Ext.app.Module, {
id:'twittext-id',
init : function(){
this.launcher = {
text: 'Twittext Client',
iconCls:'grid-win',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow(this.id);
if(!win){
var twittext = new Ext.ux.Twittext({
url : "serverside/App.php",
border : false
});
win = desktop.createWindow({
id: this.id,
title:'Twittext Client',
width:300,
height:500,
iconCls: 'grid-win',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
layout: 'fit',
items: twittext
});
}
win.show();
}
});
En el código anterior existen dos cosas muy importantes, lo primero es extender de la clase "Ext.app.Module" la cual dispara el método "init" de nuestra clase, dentro del cual se esta agregando el link al menu "start", el siguiente punto a considerar es la creación del método "createWindow" este método se ejecutará cuando el usuario de click sobre la opción en el menu "start", así que en este método se debe crear la ventana que contenga nuestro componente o módulo.
Regitrando el módulo en el Desktop
Hasta ahora todavía no podríamos ver nada en nuevo en el desktop, a este punto necesitamos regitrar el nuevo módulo para que pueda ser desplegado, para eso simplemente modificamos el archivo "sample.js" de la siguiente manera.MyDesktop = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},
getModules : function(){
return [
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule(),
new MyDesktop.Twittext() // Creamos una instancia de nuetro módulo
];
},
......
Dentro del método "getModules" creamos una instancia del componente que definimos en el paso anterior, con esto nuestro módulo estará lito para ser utilizado.
Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
35Comentarios
Hola Crysfel, muy buen tuto. una consulta y si quisiera que se cargue los módulos que solo le pertenecen a un usuario en especial... algo así como crear un perfil por usuario. Saludos.
Tendrías que cargar los módulos dinámicamente
Existirán algún otro estilo para este desktop...?
te refieres a templates para ExtJS? puedes usar el gris o descargar los que se encuentran en la wiki de extjs
Hola crysfel , he estado intentando cargar un nuevo módulo, que generé con ExtDesigner, en el ejemplo del desktop que viene con ext por defecto, sin embargo sin exito, debido a que la nueva ventana siempre me sale vacia, entiendo muy bien como adicionar un item al menu, registrando el módulo que definí. mi duda esta centrada en: cómo definir la variable que contiene lo que deseo cargar en la ventana y que voy aplicar a la propiedad item de mi windows: El módulo que creé con ExtDesigner es bastante sencillo consiste en una grid con tres columnas: fichero:GridexampleUi.js GridexampleUi = Ext.extend(Ext.grid.GridPanel, { title: 'Gridexample', store: 'gridstore', width: 400, height: 250, initComponent: function() { this.columns = [ { xtype: 'gridcolumn', header: 'Nombre', sortable: true, resizable: true, width: 100, dataIndex: 'nombre' }, { xtype: 'gridcolumn', header: 'Edad', sortable: true, resizable: true, width: 100, dataIndex: 'edad' }, { xtype: 'gridcolumn', header: 'Peso', sortable: true, resizable: true, width: 100, dataIndex: 'peso' } ]; GridexampleUi.superclass.initComponent.call(this); } }); Fichero:Gridexample.js Gridexample = Ext.extend(GridexampleUi, { initComponent: function() { Gridexample.superclass.initComponent.call(this); } }); Si pudieras indicarme como cargar este módulo te estaria muy agradecido, saludos, y felicitaciones por tu excelente tutorial
que tal crysfel entiendo perfectamente como cargar el modulo, pero tienes algun tuto que pueda checar para saber como crear los modulos jejeje , saludos
Pues creo que mas o menos me contesto solo, cree un form con Ext Designer y con el archivo js que me creo lo pude mostrar en el Desktop sin problemas , ahora a darle funcionalidad :) gracias por los tutos , por ahí alguno que recomiendes de como darle funcionalidad al código generado por el Ext Designer pro ejemplo como crear un boton submit y un botón para limpiar los form seria estupendo
Hola. Prinero que todo gracias por compartir este excelente tutorial. Me he encontrado con el problema de no poder cargar mi modulo, creo q mi problema es en esta parte var twittext = new Ext.ux.Twittext Yo lo tengo definido de esta forma var Pre = new MyEditorGrid El cual es el que esta contenido en el fichero MyEditorGrid.js: MyEditorGrid = Ext.extend(MyEditorGridUi, { initComponent: function() { MyEditorGrid.superclass.initComponent.call(this); } }); Cuando ejecuto el codigo obtengo un error en el archivo ext-debug-all.js Me podrias ayudar? Gracias por todo
Hola, y como se agregaría un nuevo icono en el escritorio? para que abra el módulo por ejemplo el logito del bird de twiter que habra el modulo.
Hola mi duda es la siguiente, el ejemplo de desktop con que versión de Ext funciona bien, por que ahi estoy viendo que utilizan la versión 3.2.1. Yo la versión que tengo es la 3.0.0 eso tiene algo que ver...... Gracias por todo
hola que tal una pregunta como puedo hacer que al momento de crear un nuevo mudulo para el escritoio este no se cree tambien en el menu inicio, ya q en el ejemplo del desktop al momento de crear un nuevo mudulo ese lo utiliza tanto para el escritio como para el menu inicio...???osea quiero crear un nuevo modulo pero solo para que este en el escritorio y no el menu inicio... gracias por la respuesta...
Hola mi buen esta muy interesante el ejemplo, no mas una pequeña molestia podias subir el ejemplo por favor para checar el codigo. de antemano muchas gracias por esta gran labor que hacen salu2
Yo tengo un CodeIgniter integrado con EXTJS usando el desktop de EXT, cargo los modulos dinamicamente utilizando una peticion Ajax, los módulos que utilizo son basicamente objetos window los cuales llevan embebido un iframe que carga los ficheros javascript con la interfaz que quiero mostrar dentro de la ventana. Siempre me he preguntado si esto puede hacerse de una forma mas optima, puesto que en cada iframe debo llamar nuevamente las bibliotecas de ext y como provienen de una url diferente el navegador las vuelve a descargar. Este es mi fichero Main.js(sample.js): var modsLoaded = {}; // Sample desktop configuration MyDesktop = new Ext.app.App({ init :function(){ Ext.QuickTips.init(); }, getModules : function(){ return loadMenuModules(modsLoaded); }, // config for the start menu //~ getStartConfig : function(){ //~ return { //~ title: 'Jack Slocum', //~ iconCls: 'user', //~ }; //~ } // config for the start menu getStartConfig : function(){ return { title: 'Anonymous', iconCls: 'user', toolItems: [{ text:'Settings', iconCls:'settings', scope:this, },'-',{ text:'Login', iconCls:'lock-icon', handler: function(){ wloginForm.show(); }, scope:this }] }; } }); MyDesktop.BogusModule = Ext.extend(Ext.app.Module, { init : function(){ this.launcher = { text: 'BogusModule', iconCls:'bogus', handler : this.createWindow, scope: this, windowId:'000' } }, createWindow : function(src){ var desktop = this.app.getDesktop(); objDesk = this.app.getDesktop(); var win = desktop.getWindow('win-'+src.windowConfig.menu_id); if(!win){ win = desktop.createWindow({ id: 'win-'+src.windowConfig.menu_id, title:src.text, layout:'fit', items:new Ext.Panel({ id: 'iframe-panel-'+src.windowConfig.menu_id, border:false, html: '', layout:'fit' }), width:640, height:480, iconCls: (!src.windowConfig.iconcls || (src.windowConfig.iconcls == ''))?'application-icon':src.windowConfig.iconcls, shim:false, animCollapse:false, constrainHeader:true }); } win.show(); document.getElementById('iframe-panel-content-' + src.windowConfig.menu_id).src = src.windowConfig.uri; } }); MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, { init : function(){ this.launcher = { text: 'Bogus', iconCls: 'bogus', handler: function() { return false; }, menu: { items:getMenuItems(this, modsLoaded) } } } }); function getMenuItems(objDesk, objson){ var arrayItems = Array(); if (objson && objson.length){ for(var i=0; i 0)){ arrayItems[i]={ text: objson[i].text, iconCls: (!objson[i].iconcls || (objson[i].iconcls == ''))?'application-icon':objson[i].iconcls, handler: function() { return false; }, menu: { items:getMenuItems(objDesk, objson[i].menu) } } } else { arrayItems[i]={ text: objson[i].text, iconCls: (!objson[i].iconcls || (objson[i].iconcls == ''))?'application-icon':objson[i].iconcls, handler : objDesk.createWindow, scope: objDesk, windowConfig: objson[i], windowId: objson[i].menu_id } } } } return arrayItems; } function getMenuModules(aMenu,aPos){ iconMenu = (!aMenu.iconcls || (aMenu.iconcls == ''))?'folder-icon':aMenu.iconcls; eval('MyDesktop.SubModule'+aPos+' = Ext.extend(MyDesktop.BogusModule, {init : function(){this.launcher = {text:"' + aMenu.text + '",iconCls: "'+iconMenu+'",' + 'handler: function() {return false;},menu: {items:getMenuItems(this, aMenu.menu) }}}});'); } function loadMenuModules(modsLoaded){ var arrayModules = []; arrayModules = '['; for(var i = 0; i < modsLoaded.length; i++){ arrayModules+= (i+1 == modsLoaded.length)?'new MyDesktop.SubModule'+i+'()]':'new MyDesktop.SubModule'+i+'(),'; if((modsLoaded[i].menu)) getMenuModules(modsLoaded[i],i); } return eval(arrayModules); } Ext.Ajax.request({ url: '/desktop/main/loadmenu', method:'POST', callback: function (options,success,response){ if(success){ modsLoaded = Ext.decode(response.responseText); MyDesktop.initApp(); }else{ Ext.Msg.show({ title:'Error', msg: response.status + ' Check your logs for more details.', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR }); } } }); Ahh, en el App.js deben comentarear la linea que dice Ext.onReady(this.initApp, this); Las entradas de menu y demas elemntos configurables de los modulos los guardo en una DB. Si quieren el ejemplo completo pueden contactarme via email... sl2
hola alvk4r estoy interesado en ver el ejemplo completo de tu aplicacion ya que estoy intentando cargar modulos dinamicamente, de acuerdo a un perfil de usuario. Gracias.
hola alvk4r, no se si podrias enviarme el codigo completo de ejemplo, ya que parece muy interesante y ahora me encuentro desarrollando algo bastante parecido. Este es mi dirección de correo jamc17arrobahotmail.com
Hola amigos, he estado probando con el desktop y de momento me va bien, ahora me nace una duda, como hacer para que al momento que cargue el desktop me cargue un módulo por defecto.
Hola chicos, mañana tratare de enviar lo que piden o lo subo a un hosting, les mando el framework completo que como he dicho es un codeigniter (Ya hice las interfaces de gestion de usuarios y roles en exjs.). No puede ser hoy pk desde donde estoy (un complejo militar) no tengo acceso a mi correo internacional ni a ningun servicio tipo yahoo o gmail. De paso les dejo dicho email, pueden escribirme a rafael@oc.quimefa.cu. Estoy interesado en hostear el proyecto en un sitio al alcance de todos, si alguien puede ayudarme, contactenme.
Por cierto y disculpen el doble post, hay algo similar en http://qwikioffice.com/desktop-demo/, pero no se si carga los modulos dinamicamente, no puedo descargarlo puesto que googlecode banea las IPs de origen cubano y no puedo acceder a traves de proxies anonimos... tal vez les pueda ayudar. Ahh y en mi caso no cargo los modulos por role, lo que hago es mostrarlos, las controladoras que hacen los render de las vistas y demas controlan quien esta accediendo y cuando el usuario abre un modulo no permitido les muestro un cartel de error y les niego el acceso. Si quiere cargarse los modulos por role, basta con añadir un campo relacionado en la tabla donde almaceno las entradas de menu y modificar la consulta en el modelo que carga los modulos... Cuando pueda hostear el proyecto entenderan lo que digo...
hola alvk4r pues esperamos con ánsias tu Código mientras tanto te comento que comence a despejar mis dudas y ahora estoy por integrar el escritorio con la interfaz que ya tenía con Ext y Symfony.
Hola Crysfel, Muy bueno el tutorial. Yo soy nuevo en Extjs y quisiera conocer un ejemplo del extender que tiene el tutorial para poder entender este concepto ya que es lo que estoy buscando. Gracias
Amigos, he entrenado con el dektop de ExtJs, no tengo problemas ninguno en agregar modulos y hacerlos funcionar... ... tengo problemas al generar la ventana con un(os) item , despues de cerrar la ventana si intento abrirla me sale el siguente error return target && c.getPosition...parentNode == (target.dom || target); he intentado solucionar esto de varias formas, he encontrado una que es poniendo el codigo de los item de la ventana en el mismo archivo donde una agrega los modulos... creo que no es la mejor forma obviamente... Les posteo algo del codigo de ejemplo a ver si alguien ve algun problema logico y/o de programacion para me he heche una manito... ...Por favor ... [code] archivo : formulario.js /* Modulo de Login en ExtJs 3.3 **************************** */ //creamos una instancia del textfield var name = new Ext.form.TextField({ fieldLabel:'Name', name:'txt-name', emptyText:'Your name...', id:"id-name" }); //creamos un formulario formularioLogin = new Ext.FormPanel({ title:'New Developer', defaults:{xtype:'textfield'}, //componente por defecto del formulario bodyStyle:'padding: 10px', //alejamos los componentes del formulario de los bordes items:[ name, // le asignamos la instancia que creamos anteriormente { fieldLabel:'Email', // creamos un campo name:'txt-email', // a partir de una value:'default@quizzpot.com', //configuración id:"id-email" } ] }); // Fin Archivo formulario.js //Este es el codigo que va en el archivo donde se agregan los modulos : ... MyDesktop.FormWindow = Ext.extend(Ext.app.Module, { id:'form-win', init : function(){ this.launcher = { text: 'Formulario de Login', iconCls:'icon-grid', handler : this.createWindow, scope: this } }, createWindow : function(){ var desktop = this.app.getDesktop(); var win = desktop.getWindow('form-win'); var f = formularioLogin; if(!win){ win = desktop.createWindow({ id: this.id, title:'Form Window', width:740, height:480, iconCls: 'icon-grid', shim:false, animCollapse:false, constrainHeader:true, layout: 'fit', items:f }); } win.show(); } }); .... cuando se ejecuta un vez, todo sin problema , pero si lo cierro y vuelo abrir me sale el error antes mecionado.. Saludos, y atento a sus comentarios. [/code]
Estimados, cerando un namespace quedo solucionado el problema, asi es que se puede ejecutar cuantas veces sea necesario... ...ahora esto arrojo otro problema... cuando llamo el namespace creado la primera vez, ningun problema, pero cuando se llama por segunda vez y sin haber cerrado la instancia anterior... ... en este caso no repite la ventana, pero si los elementos del formulario... ... es decir, si el formulario tiene dos items (Nombres y Apellidos) despues tendra Nombres, Nombres, Apellidos,Apellidos... Alguien tiene alguna idea? Gracias de antemano. Saludso, atte.
hola, me podrias mandar el codigo completo a roman@estudiocanoniero.com.ar ? Muchas Gracias
Soy Nuevo con esto y me parece muy interesante esta herramienta lo que no he podido hacer es un desktop porque no entiendo como instanciar los modulo quisiera un ejemplo con desktop, menu inicio y un solo modulo el ejemplo desktop de EXTJS no le he podido quitar ni agregar nada
me pueden ayudar por favor? saben como hacer que se vean los demas iconos del desktop de sencha?, ya que muestra solo los primeros 6 iconos, la idea es que desde el septimo se muestren hacia el lado. de antemano, muchas gracias.
Excelente tutorial, desde hace mas de un año y no pude hacer. cuando lo haces para la version 4 del framework Gracias amigo
Contactame a la direccion de correo rernesto@uci.cu. Creo que puedo ayudarte.
como Puedo agregar modulos al desktop dinamicamente si alguien tuviera un ejemplo se le agredeceria mucho
alguien sabe como hacer para que os iconos del escritorio se generen en varias columnas .... tengo mas de 20 iconos y solo me aparecen 8 porque se acaba la columna... he visto un caso de desktop 2.0 que tiene eso pero yo ya tengo mucho cambiado en el desktop.js y no quiero perder lo realizado... como puedo hacerlo para que por cada columna queden por lo menos 7
Podrías enviar el codigo a mi email por favor? guttiv@gmail.com
cuales son los parametros del request?
Hola a todos, Estoy intentando crear un módulo en el desktop de la versión extjs4, pero siguiendo el tutorial (muy bueno por cierto) aunque algo varía con mi versión lo adapto, pero no consigo que me coja los cambios que hago. El problema es que si pongo el archivo desktop.html dentro de la carpeta desktop si me los coje, pero si los pongo fuera no me coje los cambios. Pero yo quiero que desktop.html esté fuera de esta carpeta. ¿Sabéis por qué puede ser? y ¿Cómo podría solucionarlo? No sé si se debe a un archivo classes.js que trae la versión 4 pero ese archivo no tengo claro si se debe de generar solo o se lo tengo que modificar también. De todas formas he probado ha modificar ahí algo también y nada... no hay manera. :( Por si os sirve para entenderme, la estructura que yo quiero tener en mi aplicación es la siguiente: -Webapp - extjs - desktop: -css -images -js .... - desktop.html Gracias de antemano.
Hola de nuevo, Parece que he conseguido que me cambie algo, por lo visto solo me ejecuta el fichero classes.js y no todos los *.js que hay. ¿Sabéis como funciona o como podría hacerlo para que no fuera todo en el classes.js si no en sus diferentes archivos para que esté más modular? Gracias
Creo no es compatible con la version 4 de ext js
como se crean los modulos dinamicos