Sebaaaaaaaa

Como primer paso creamos nuestro archivo .html y agregamos las Hojas de Estilo.
* La primera hoja de estilo sistema.css (creada por nosotros) nos servirá para poder cambiar los iconos por defecto de algunos componentes.
* La segunda hoja de estilo ext-all.css es necesaria crear la apariencia que conocemos de Ext JS
view plainprint?
1.<link rel="stylesheet" type="text/css" href="css/sistema.css">        
2.         <link rel="stylesheet" type="text/css" href="css/ext-all.css" />   

Las siguientes etiquetas son para mostrar el mensaje de carga al momento de ejecutar nuestra página web.
view plainprint?
1. <div id="loading-mask" style=""></div>  
2. <div id="loading">  
3.   <div class="loading-indicator">  
4.                <img src="images/blue-loading.gif" width="32" height="32" style="margin-right:8px; padding-left:120px; float:left;vertical-align:top;"/>  
5.                  Sistema de ejemplo <a href="www.ie-systems.com"></a>  
6.   
7.                 <span id="loading-msg">Cargando...</span>  
8.             </div>  
9.     </div>  

Gracias a laetiqueta header mostraremos el nombre de la aplicación  en la parte superior de nuestra página.
view plainprint?
1. <div id="header">  Aplicación Web de Ejemplo    </div>  

Agregamos los componentes que utilizaremos en nuestra aplicación y los mensajes que se mostraran antes que terminen de cargar cada una de estas.
view plainprint?
1.<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando el Componente Central ...';</script>  
2.             <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>  
3.             <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando la Interfaz Grafica...';</script>  
4.            <script type="text/javascript" src="js/ext-all.js"></script>  
5.             <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando Plugin Base...';</script>  
6.             <script type="text/javascript" src="js/ux/Ext.ux.StatusBar.js"></script>  
7.            <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando el Mapa de Navegacion...';</script>  
8.             <script type="text/javascript" src="js/app.navigation.js"></script>  
9.             <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando el Contenedor Central...';</script>  
10.            <script type="text/javascript" src="js/app.tabpanel.js"></script>  
11.             <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando Esquema General...';</script>  
12.             <script type="text/javascript" src="js/app.js"></script>  
13.            <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando Extension del Esquema General...';</script> <script type="text/javascript" src="js/ext-lang-es.js"></script>  

Como segundo paso, en el archivo app.navigation.js contruiremos el menú de opciones.
view plainprint?
1. Ext.ns('app');  
2. var loadTreeMask = null;  
3. app.mn_Mantenimiento= {  
4. id:'menu_mantenimiento',  
5. xtype: 'treepanel',  
6. title:'Mantenimiento',  
7.        iconCls:'x-icon-menu-mantenimiento',  
8.         rootVisible: false,  
9.         lines: false,  
10.         singleExpand: false,  
11.         useArrows: true,  
12.         autoScroll : true,  
13.         isExpandTag : true,  
14.         listeners: {  
15.             'expand' : function (p){  
16....