Bueno despues de investigar un poco voy a lanzar mi primer "boceto" de mi ERP.

Podeis ver una demo online AQUÍ.

Me pide Usuario y Contraseña para poder ver la demo y lo mismo para poder descargar el ZIP. Agradecería que compartas un usuario de prueba.

Saludos.

Perdon he hecho unos cambios en el server:

Usuario: userweb
pass: userweb

Muy buen ejemplo Manolo! Creo que es un tipo de aplicación donde los usuarios acuden mucho, el tener un í

Por supuesto! No hay problema. Pero me tendras que explicar como cambio el título del post que no lo encuentro . Sobre el tema de capturas y tal no te preocupes que las pondré. Estoy trabajando en el proyecto como veras en otros post y cuando tenga algo mas en firme abriré un post como dios manda

Manolo López escribió:Por supuesto! No hay problema. Pero me tendras que explicar como cambio el título del post que no lo encuentro . Sobre el tema de capturas y tal no te preocupes que las pondré. Estoy trabajando en el proyecto como veras en otros post y cuando tenga algo mas en firme abriré un post como dios manda

Bárbaro! Ahí lo cambié y de paso lo emprolijé para que quede mejor.

Nuevo cambios calentitos!! calentitos!!!

Demo : http://limestudio.es/ext/ext_test/test72/
Código:http://limestudio.es/ext/ext_test/test72/test72.zip

Cambios introducido:

- Se reorganizado el código de la aplicación para que sea más fácil su mantenimiento

- Creado una extensión del tabpanel añadiendo una función addTab

addTab(id,title,url,type)
id -> identificador de la pestaña
title -> Título
url -> url que se cargará
type -> Tipo de pestaña
iframe -> Crearemos un ifram en la pestaña y cargaremos dentro la url
load -> Cargaremos la url en un div

Código: Seleccionar todo

addTab: function (id,title,url,type)
    {
      //alert(url);
      var open = !this.getItem(id);
      if (open)
      {

         switch (type)
         {
            case 'iframe':

               //Creamos un nuevo ifram y cargamos dentro la url
               var newPanel = new Ext.Panel({
                    id : id,
                    title: title,
                    loadScripts: true,
                    autoScroll: true,
                    closable: true,
                    iconCls:'menu_'+id,
                    layout:'fit',

                    items: [ new Ext.ux.IFrameComponent({ id: id, url: url, name: id}) ]
                  });
                 this.add(newPanel);
                  this.setActiveTab(newPanel);
            break;
            case 'load':
               //Cargamos la pestaña por ajax


                   var newPanel = new Ext.Panel({
                    id : id,
                    contentEl: 'div',
                    title: title,
                    loadScripts: true,
                    autoScroll: true,
                    closable: true,
                    iconCls:'menu_'+id,
                    layout:'fit',

                  autoLoad: {url: url, scripts: true, scope: this}

                  });
                 this.add(newPanel);
                 this.setActiveTab(newPanel);
            break;
            default:
               alert("Tipo de tab no definido");
            break;
         }
      }
      else {
         //Si ya tenemos la pestaña creada la seleccionaremos
         this.setActiveTab(id);
      }

Podemo ver el funcionamiento con clientes ( que es del tipo load y con facturas que es del tipo iframe )

- Se han modificacdo el treepanel para que cada vez que se haga click en un nodo abra la pestaña correspondiente. La notable mejora es que pasamos toda la configuran desde el archivo json que usamos para crear el árbol.

tree.php

Código: Seleccionar todo

[{

    text:'Administracion',
    expanded:true,
    children:[
    {
       id : 'clientes',
       tabType:'load',
        text:'Clientes',
        iconCls:'menu_clientes',
        leaf:true
    },{
       id : 'facturas',
       tabType:'iframe',
        text:'Facturas',
        iconCls:'menu_facturas',
        leaf:true
    }]
},
{

   text:'Web',
   expanded:true,
   children:[
   {
      id : 'google',
      tabType:'iframe',
      url: 'http://www.google.com',
       text:'Google',
       iconCls:'group',
       leaf:true
   }]
}
]

Código: Seleccionar todo

...
listeners: {
      click : {
         scope  : this,
             fn     : function( n, e ) {

                //Accedemos a los a atributod del json que usamos para crear el nodo con
                if (n.attributes.url)
                {
                   url = n.attributes.url;
                }
                else {
                   url = n.id+'/'+n.id+'.html';
                }

                //Abrimos el nuevo tab
                app.tabpanel.addTab(n.id,n.text,url,n.attributes.tabType);
             }
      }

   },
...

Podemos acceder a los atributos de la hoja mediante n.attributes.


Bueno , por ahora, esto es todo, poco a poco iré ampliando con mas cosas.


Por cierto. Si abrís la pestaña clientes vereis que la grid no ocupa todo el alto del contenedor. ¿Alguna idea para solucionar esto ?


Un saludo.

Vas bien!!!

Manolo López escribió:Por cierto. Si abrís la pestaña clientes vereis que la grid no ocupa todo el alto del contenedor. ¿Alguna idea para solucionar esto ?

Podes hacer:

Código: Seleccionar todo

new Ext.GridPanel({
      ,...
      ,height: Ext.getCmp('tabpanel').getInnerHeight()-1
      ,...
});

Es una de las alternativas...espero que te sirva.

Suerte.

Pues parece que lo de

Código: Seleccionar todo

Ext.getCmp('tabpanel').getInnerHeight()-1

no sirve

Me imagino que cambiaste el 'tabpanel' por el id de tu TabPanel, verdad?

UPS!!!! :rolleyes:

Solucionado.

Gracias

Por cierto, sabes como hacer para que si redimensionas la ventana se reajuste la altura ?

Para ese caso creo que te vendría bien usar los plugins: FitToContainer o FitToParent.

Saludos.

Saludos desde mexico!
He revisado el codigo y aunque hay partes que aun no comprendo del todo hay en especial una funcion que me intriga no encontrar cual es su utilidad; me refiero a Ext.ns()

Tengo entendido que significa "namespace" y lei un poco para que sirve usar namespace en general pero no entiendo del todo en que beneficia usarlo, en el codigo viene algo como "Ext.ns('app') y he visto que crean objetos JSON (corriganme si em equivoco) escribiendo algo asi "app.miTab = .........." pero como dije, no entiendo bien que beneficios trae consigo usarlo.

Ojala puedan aclararme eso y les estare enormemente agradecido!

Hasta pronto!

No funciona ningun link para ver o descargar el ejemplo podrias corregirlo por favor ya que me seria de mucha ayuda el aprender a hacer lo que planteas en el tema.

Saludos