Ext.js - Preguntas y respuestas

Ext JS significa JavaScript extendido. Es un marco de JavaScript para desarrollar ricas aplicaciones de escritorio basadas en web UI.

Es un producto Sencha que se extiende desde YUI (interfaz de usuario de Yahoo).

Estos son los archivos principales para incluir en la página HTML para ejecutar el código Ext JS:

• Ext-all.js
• Ext-all.css

• Widgets de interfaz de usuario personalizables con una colección de interfaz de usuario rica, como cuadrículas, cuadrículas dinámicas, formularios, gráficos, árboles
• Compatibilidad de código de nuevas versiones con la anterior.
• Un administrador de diseño flexible ayuda a organizar la visualización de datos y contenido en varios navegadores, dispositivos y tamaños de pantalla.
• El paquete de datos avanzado desacopla los widgets de la interfaz de usuario de la capa de datos. El paquete de datos permite la recopilación de datos del lado del cliente utilizando modelos altamente funcionales que habilitan características como la clasificación y el filtrado.
• Es independiente del protocolo y puede acceder a datos desde cualquier fuente de back-end.
• Temas personalizables Los widgets Ext JS están disponibles en varios temas listos para usar que son consistentes en todas las plataformas.

• Optimiza el desarrollo multiplataforma en computadoras de escritorio, tabletas y teléfonos inteligentes, tanto para navegadores modernos como heredados.

• Aumenta la productividad de los equipos de desarrollo al integrarse en entornos de desarrollo empresarial a través de complementos IDE.

• Reduce el costo del desarrollo de aplicaciones web.

• Permite a los equipos crear aplicaciones con una experiencia de usuario atractiva.

• Tiene un conjunto de widgets para hacer que la interfaz de usuario sea potente y fácil.

• Sigue la arquitectura MVC, un código altamente legible.

• El tamaño de la biblioteca es grande, alrededor de 500 KB, lo que aumenta el tiempo de carga inicial y hace que la aplicación sea más lenta.

• HTML está lleno de etiquetas <DIV> lo que hace que sea complejo y difícil de depurar.

• De acuerdo con la política de licencia pública general, es gratis para aplicaciones de código abierto, pero se paga para aplicaciones comerciales.

• Algunas veces, para cargar incluso cosas simples se requieren pocas líneas de codificación, lo que es más simple en html o Jquery.

• Necesita un desarrollador bastante experimentado para desarrollar aplicaciones Ext JS.

Ext JS admite la compatibilidad con varios navegadores, es compatible con todos los navegadores principales como:

• IE 6 y superior
• Firefox 3.6 y superior
• Chrome10 y superior
• Safari 4 y superior
• Opera 11 y superior

Ext JS 4+ admite la arquitectura MVC (controlador de vista de modelo). Desde Ext JS 5, también comenzó a admitir MVVM (Model View Viewmodel).

Ext JS 6 es la última versión de Ext JS que tiene el gran beneficio de que se puede utilizar tanto para aplicaciones de escritorio como móviles. Básicamente es una fusión de Ext JS (aplicaciones de escritorio) y Sencha touch (aplicación móvil).

Ext JS es un marco de JavaScript, por lo que para comenzar a usarlo, debe tener conocimientos previos de HTML y JS (no nivel experto, pero debe tener conocimientos básicos). Luego, es necesario comprender lo básico, así que déle tiempo y aprenda gradualmente.

Ambos marcos son bastante diferentes, podemos comparar Ext JS y jQuery UI, ya que Ext JS es un marco completo de interfaz de usuario. Pero aún así, Ext JS tiene muchos más componentes que jQuery UI.

Ext JS 1.1

La primera versión de Ext JS fue desarrollada por Jack Slocum en 2006. Era un conjunto de clases de utilidad que es una extensión de YUI. Llamó a la biblioteca como YUI-ext.

Ext JS 2.0

Ext JS versión 2.0 se lanzó en 2007. Esta versión tenía nueva documentación API para aplicaciones de escritorio con características limitadas. Esta versión no tiene compatibilidad con versiones anteriores de Ext JS.

Ext JS 3.0

Ext JS versión 3.0 fue lanzada en 2009. Esta versión agregó nuevas características como vista de gráfico y lista, pero a costa de la velocidad. Tenía retrocompatibilidad con la versión 2.0.

Ext JS 4.0

Después del lanzamiento de Ext JS 3, los desarrolladores de Ext JS tuvieron el mayor desafío de aumentar la velocidad. Ext JS versión 4.0 fue lanzada en 2011. Tenía la estructura revisada completa seguida por la arquitectura MVC y una aplicación rápida.

Ext JS 5.0

Ext JS versión 5.0 se lanzó en 2014. El cambio principal en esta versión fue cambiar la arquitectura MVC a la arquitectura MVVM. Incluye la capacidad de crear aplicaciones de escritorio en dispositivos táctiles, enlace de datos bidireccional, diseños receptivos y muchas más funciones.

Ext JS 6.0

Ext JS 6 fusiona el marco Ext JS (para aplicaciones de escritorio) y sencha touch (para aplicaciones móviles).

Ext JS tiene varios componentes de interfaz de usuario, algunos de los componentes más utilizados son:

• Grid
• Form
• Caja de mensaje
• Barra de progreso
• Sugerencia de herramienta
• Window
• Editor HTML
• Charts

xType define el tipo de componente Ext JS UI, que se determina durante la renderización del componente. Por ejemplo, campo de texto, numérico, botón, etc.

Este es el tipo de validación que se puede personalizar fácilmente. Pocos tipos de vType proporcionados por Ext JS son:

alphanumText - Devuelve falso si el texto ingresado tiene algún símbolo que no sea alfabético o numérico.

emailText - Esto devuelve falso, si el texto no es una dirección de correo electrónico válida.

Sí, Ext JS se puede integrar con Ajax. Implementación como: supongamos que en algún cuadro de texto después del desenfoque tiene que validar los datos del servidor para que podamos tener una llamada Ajax onblur / onchange al id del cuadro de texto para verificar si los datos ingresados ​​en el cuadro de texto están presentes en el servidor / base de datos .

Sí, Ext JS puede integrarse con otro marco del lado del servidor como Java, .net, Ruby on rails, PHP, ColdFusion, etc.

Ext JS se puede implementar en cualquier entorno de desarrollo integrado (IDE) popular como Eclipse, Aptana, Sublime, Webstrom, etc.

Estas son algunas formas de acceder a elementos DOM en Ext JS:

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

La arquitectura MVVM es Model View Viewmodel. En la arquitectura MVVM, el controlador de MVC se reemplaza por ViewModel.

ViewModel- Básicamente se trata de medicar los cambios entre vista y modelo. Vincula los datos del modelo a la vista. Al mismo tiempo, no tiene ninguna interacción directa con la vista, solo tiene conocimiento del modelo.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady () es el primer método que se llama cuando el DOM está completamente cargado para que cualquier elemento al que desee hacer referencia esté disponible cuando se ejecute el script.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Los diferentes tipos de cuadros de alerta en Ext JS son:

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.promt();
• Ext.MessageBox.show();

Las clases base para Store son Ext.data.Store

Para el modelo es Ext.data.Model

Para el controlador es un controlador de aplicación externo

Estas son las diferentes formas de manejo de eventos:

• Usar oyentes
• Adjuntar eventos más tarde
• Usar eventos personalizados

Store.getCount() - Para registros en caché

Store.getTotalCount() - Por no total de registros en la base de datos.

El método Store.getModifiedRecords () se utiliza para obtener registros modificados.

Store.commitChanges () método para actualizar los cambios de la tienda.

Si tenemos la identificación de la cuadrícula: Ext.getCmp ('gridId'). GetStore (). GetAt (index);

Si tenemos el ID de la tienda: Ext.getStore ('storeId'). GetAt (index);

Store.load ();

• Clase base para Grid - Ext.grid.GridPanel
• Para formulario - Panel de formulario externo
• Para panel - Panel externo Panel
• Para gráfico - Gráfico externo Gráfico
• Para árbol - Ext.tree.Panel

Los diferentes tipos de diseños son:

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

Esto se puede hacer usando pagingToolbar () como -

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Loadmask se usa para evitar cualquier otra operación mostrando la carga (o mensaje personalizado) al usuario hasta que los datos se procesan en la cuadrícula. Loadmask: verdadero; es la propiedad para mostrar la máscara de carga mientras los datos se procesan en la cuadrícula.

El renderizador se usa cuando queremos manipular los datos que obtenemos de la tienda para mostrar datos manipulados en función de algunos criterios. Es una propiedad de columna que se puede utilizar como:

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). GetValue ();

Oculto: cierto;

Clasificable: verdadero; que es verdadero por defecto.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 tiene un paquete de herramientas con el que puede incluir elementos visuales de ambos frameworks (Ext JS y Sencha Touch).

Se puede agregar como:

'toolkit': 'clásico', // o 'moderno'

Si el kit de herramientas es clásico, incluye el marco de aplicación de escritorio Ext JS.

Y si el kit de herramientas es moderno, incluye el marco de aplicación móvil sencha touch.