¿A qué empresa pertenece extjs?
Prefacio
ExtJS es un marco ajax de front-end que se utiliza principalmente para crear interfaces de usuario de front-end y no tiene nada que ver con la tecnología de back-end.
Rico en funciones, nadie puede superarlo
Ya sea por la belleza de la interfaz o el poder de las funciones, el control de tabla de ext ocupa el primer lugar de la lista.
Selección de una sola fila, selección de varias filas, resaltado de filas seleccionadas, arrastre para cambiar el ancho de las columnas y clasificación por columnas No mencionaremos estas funciones básicas.
Genere automáticamente números de fila, admita la selección de casillas de verificación, seleccione dinámicamente qué columnas mostrar, admita paginación local y remota y represente celdas según sus propias ideas.
Además, puede editar la cuadrícula, agregar nuevas filas, eliminar una o más filas, solicitar datos sucios, presionar y arrastrar para cambiar el tamaño de la cuadrícula, empujar y arrastrar una o más filas entre cuadrículas, e incluso entre árbol y cuadrícula Arrastrar y soltar entre, ah, estas funciones son realmente sorprendentes. Lo que es aún más sorprendente es que todas estas funciones se implementan en el control de la tabla ext.
Jaja ~ Pero ext no es omnipotente. En comparación con ecside de fins, ext no puede bloquear columnas (Tudou dijo que el bloqueo de columnas es compatible con 1.x, pero no está disponible en 2.0 porque afecta la eficiencia. ), tampoco existe una función estadística predeterminada y no admite la exportación de datos a Excel, PDF, etc. Además, Fins dijo que a través de las pruebas, la eficiencia de ecside es significativamente mejor que la de ext. :)
[Editar este párrafo] Historia del desarrollo de Ext
1. El primer YUI-Ext "yendo al extranjero" fue solo el plan del autor Jack para desarrollar la interfaz de usuario de Yahoo! Biblioteca basada en el protocolo BSD Es una extensión personalizada, pero luego eclipsó a su YUI principal, lo cual es suficiente para mostrar el entusiasmo de todos por él. Mucha gente lo incluyó en el proyecto y no lo entendió muy bien. Los analistas hicieron una metáfora: es como caer en una loca admiración por una persona sin conocer su familia, educación, carácter y otros orígenes solo porque tiene una apariencia delicada y hermosa. Por lo tanto, los analistas sugieren que antes de invertir en un proyecto, se deben comprender cuidadosamente los principios subyacentes de EXT y sus diferencias con otras bibliotecas Ajax.
2. A principios de 2006, Jack Slocum trabajó en una ampliación de la utilidad para la biblioteca Yahoo! User Interface (YUI). Estas extensiones se organizaron rápidamente en un código de biblioteca independiente y se publicaron con el nombre "yui-ext".
3. En el otoño de 2006, Jack lanzó la versión 0.33 de yui-ext, que finalmente resultó ser la versión final del código, según su nombre (bajo la licencia DSB de código abierto). A finales de año, la biblioteca se había vuelto tan popular que el nombre se redujo a Ext, lo que refleja su madurez e independencia como marco.
La empresa se fundó a principios de 2007 y Ext ahora tiene doble licencia, utilizando LGPL y una licencia comercial.
4. El 1 de abril de 2007, se lanzó la versión oficial 1.0.
5. A partir de hoy (8 de enero de 2010), ExtJS se ha desarrollado para cubrir usuarios de todo el mundo, como Estados Unidos, Japón, China, Francia, Alemania, etc., y la versión actual es Ext-3.1.0
6. El funcionario lanzó la versión 3.0 RC de Ext en la primera Conferencia Ext del 14 al 16 de abril de 2009.
7. El 4 de mayo de 2009, se lanzó la versión 3.0 de Ext.
[Editar este párrafo] ¿Qué es EXT?
1. ExtJS se puede utilizar para desarrollar RIA, que es una aplicación cliente AJAX enriquecida. Está escrita en javascript y se utiliza principalmente para. crear interfaces La interfaz de usuario es un marco ajax de front-end que no tiene nada que ver con la tecnología de back-end. Por lo tanto, ExtJS se puede utilizar en aplicaciones desarrolladas en varios lenguajes de desarrollo como .Net, Java y Php.
ExtJs se basó originalmente en la tecnología YUI y fue desarrollado por el desarrollador Jack Slocum. Organiza componentes visuales haciendo referencia a mecanismos como JavaSwing. Desde la aplicación de estilos CSS en la interfaz de la interfaz de usuario hasta el manejo de excepciones en el análisis de datos. herramienta poco común. Lo mejor de la tecnología de cliente JavaScript.
2. El modelo de componentes UI de Ext y el concepto de desarrollo se derivan de la biblioteca de componentes YUI de Yahoo y Swing en la plataforma Java, y protegen una gran cantidad de procesamiento entre navegadores para los desarrolladores. En términos relativos, EXT es más fácil que los desarrolladores para desarrollar componentes de interfaz de usuario directamente contra el modelo de objetos DOM y W3C.
[Editar este párrafo] Introducción a ExtJs UI Engine
Al principio, ExtJs era solo una extensión de diálogo para Yahoo UI. Más tarde, desarrolló gradualmente sus propias características y se convirtió en una extensión de diálogo. profundamente amado por los internautas. Hasta ahora, además de YUI, Ext también admite una variedad de bibliotecas subyacentes de JS, como Jquery, Prototype, etc., lo que permite a todos elegir libremente. Este marco se basa completamente en tecnología Html/CSS+JS pura, proporciona componentes de interfaz de usuario enriquecidos para varios navegadores y utiliza de manera flexible el desarrollo de fuentes de datos JSON/XML para reducir realmente la carga en la capa de presentación del lado del servidor, logrando así MVC del lado del cliente. aplicaciones!
ExtJs es compatible con los principales navegadores en múltiples plataformas Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+, Opera9+. Los proveedores en uso incluyen IBM, Adobe, Cisco y más. Sitio web oficial de ExtJs www.extjs.com
[Editar este párrafo] Marco principal Ajax y ExtJS
JQuery, Prototype y YUI son bibliotecas JS muy básicas. Aunque YUI, y más recientemente JQuery, han construido una serie de dispositivos UI (Widgets), no tienen una plataforma de desarrollo de programas verdaderamente integrada y completa. Aunque estas bibliotecas centrales de bajo nivel ya son muy buenas, cuando se colocan en un entorno de desarrollo real, los desarrolladores aún necesitan trabajar mucho para mejorar muchas deficiencias. Y Ext está aquí para llenar estos vacíos. Entre los principales marcos de trabajo de código abierto, sólo Dojo, como Ext, intenta proporcionar una plataforma de desarrollo integrada. En comparación con Dojo, un excelente conjunto de herramientas, creemos que Ext puede proporcionar un marco de aplicación más coherente. Cada componente de Ext está diseñado para funcionar perfectamente con otras combinaciones de componentes Ext. Este tipo de interoperabilidad fluida es inseparable de un equipo estrechamente cooperativo y siempre debe enfatizar la unidad de objetivos en el diseño y el desarrollo, algo que muchos proyectos de código abierto no logran lograr. Desde el comienzo de la construcción de cada componente, siempre enfatizamos la apariencia, el rendimiento, la interoperabilidad y la escalabilidad del componente, y creemos que el componente ha cumplido estos requisitos.
Ext definitivamente se puede usar solo. De hecho, salvo requisitos específicos, se recomienda utilizar Ext solo, para que el tamaño del archivo sea menor y el soporte y la integración sean más cercanos. También admitimos la integración con jQuery, YUI o Prototype, apareciendo como una biblioteca de bajo nivel para proporcionar varios servicios principales, como DOM y manejo de eventos, conexiones Ajax y efectos de animación. Una razón para usar la integración es que ya tienen algunos dispositivos específicos que Ext no admite de forma nativa; el control de Historial de YUI es un ejemplo típico. En este momento, Ext necesita confiar en la capa inferior de la biblioteca YUI para implementar el control Historial. Esto también puede eliminar la necesidad de la propia biblioteca de la capa inferior de Ext, reduciendo así la huella de memoria de todo el programa. Otra razón para utilizar el enfoque de integración es que para muchos programas que ya utilizan otras bibliotecas subyacentes, es posible que desee agregar gradualmente Ext. En resumen, si ya existen otras bibliotecas, Ext puede aprovecharlas. Nuestro objetivo es proporcionar a los usuarios diversas posibilidades y optimizaciones de rendimiento. El hecho es que siempre que se implemente la interfaz de biblioteca subyacente correspondiente, no hay problema en agregar un adaptador a cualquier marco: las personas pueden convertir fácilmente Dojo, Moo, Ajax.NET u otras bibliotecas JS en la capa subyacente de Ext.
Ext empieza a cobrar desde 2.x, lo que trae algunos problemas a sus perspectivas de aplicación. Sin embargo, no tendrá mucho impacto en los desarrolladores nacionales. Después de todo, los clientes pagan.
[Editar este párrafo] Resumen de la experiencia de aplicación y aprendizaje de Ext
1. Comprender el DOM HTML, el elemento y el componente Ext
Para aprender y aplicar el marco Ext bueno, debes comprender las diferencias entre Html DOM, Ext Element y Component.
Ext es un marco de cliente enriquecido basado en la Web. Está completamente construido en base a la tecnología estándar W3C y utiliza HTML, CSS, DIV y otras tecnologías relacionadas. Lo más destacado de Ext es que ha desarrollado una serie de controles y componentes muy simples y fáciles de usar. Solo necesitamos usar estos componentes para realizar el desarrollo de varias UI coloridas.
No importa cuántas propiedades de configuración, eventos, métodos, etc. tenga un componente, eventualmente se convertirá a HTML y se mostrará en el navegador, y cada página HTML tiene un modelo de árbol DOM jerárquico. en el navegador tiene objetos DOM correspondientes, y el cambio dinámico del contenido de la página se logra mediante el uso de un lenguaje de secuencias de comandos para operar objetos DOM.
El DOM por sí solo no es suficiente. Por ejemplo, si queremos mover un nodo en la página a otra ubicación, agregar un efecto de sombra a un nodo, ocultar o mostrar un nodo, etc., todos lo necesitamos. para aprobar Sólo se necesitan unas pocas frases de javascript para completarlo. Por lo tanto, el elemento Ext creado por Ext basado en el elemento DOM se puede utilizar para envolver cualquier DOM. Se agrega una serie de métodos prácticos rápidos y sencillos al objeto Element.
Para los usuarios finales, simplemente tener Element no es suficiente. Por ejemplo, el usuario quiere mostrar una tabla, un árbol, una ventana emergente, etc. Por lo tanto, además de Element, Ext también ha establecido una serie de componentes de interfaz de cliente Componente Al programar, solo necesitamos usar estos componentes Componente para lograr la visualización e interacción de datos relacionados, y Componente es una abstracción de nivel superior, cada uno de ellos. Cuando se renderiza el componente, generará el efecto de página final a través de Element y DOM en secuencia.
En las aplicaciones desarrolladas con Ext, el componente Componente es el nivel más alto de abstracción y es utilizado directamente por los usuarios. Ext Element es la API subyacente de Ext, que es llamada principalmente por Ext o componentes personalizados. la API original definida por el estándar W3C. El elemento de extensión implementa la visualización del efecto de la página operando el DOM.
En Ext, después de renderizar el componente, puede obtener el Elemento correspondiente al componente accediendo al atributo el del componente, y puede obtener el objeto DOM debajo de él accediendo al atributo dom del Elemento. Además, podemos obtener el componente Componente, Elemento Ext y nodo DOM a través de los métodos abreviados getCmp, get, getDom y otros métodos de la clase Ext.
Por ejemplo:
var view=new Ext.Viewport();//Creó un componente Component
view.el.setOpacity(.5);//Llame al método setOpacity de Element
view.el.dom.innerHTML="Hello Ext";// Manipular el objeto DOM a través del atributo dom de Element
Mire el siguiente código nuevamente:
var win=new Ext.Window({id:"win1",title:"Mi ventana",ancho:200,alto:200});
win.show();
var c=Ext.getCmp("win1");//Obtener componente win
var e=Ext.get("win1");//Obtener el elemento correspondiente del componente ganar según id
var dom=Ext.getDom("win1");//Obtener el nodo DOM con id win1
2. Familiarizado con el sistema de componentes ext
Ext2.0 Se ha reconstruido todo el marco. Lo más destacado es la introducción de un sistema de componentes basado en la clase Component, se diseñan una serie de componentes y controles utilizando métodos orientados a objetos. . Por lo tanto, para poder utilizar Ext con facilidad, es fundamental estar familiarizado con el sistema de componentes de Ext.
En la "Guía práctica de desarrollo de ExtJS", hay un diagrama de componentes de la siguiente manera:
A través del diagrama de estructura de componentes, podemos ver claramente todo el sistema de composición y herencia de componentes Ext. Al usar Cuando se trata de un componente, debemos comprender su sistema de herencia, lo que puede facilitarnos el dominio de las diversas características del componente.
3. Domine los controles principales
Los controles son en realidad componentes, como TreePanel para mostrar información del árbol, GridPanel y EditorGridPanel para mostrar tablas y Ext que representa la ventana de la aplicación. etc. son todos controles Ext. Al usar Ext, debes dominar algunos controles básicos, especialmente aquellos en las clases base. Por ejemplo, todos los controles mencionados anteriormente se heredan del Panel, por lo que debemos concentrarnos en dominar las características del control central del Panel. Por ejemplo, un panel consta de las siguientes partes: una barra de herramientas superior (tbar), una barra de herramientas inferior (bbar), un encabezado del panel (header), una cola del panel (inferior) y un área principal del panel (cuerpo). La clase de panel también tiene funciones integradas como la expansión y el cierre del panel, y proporciona una serie de botones de herramientas reutilizables para que podamos implementar fácilmente comportamientos personalizados. El panel se puede colocar en cualquier otro contenedor. y se pueden incluir varios otros componentes. Mientras domines la aplicación de Panel, aprender TreePanel, Window, etc. será mucho más fácil.
De la misma manera, para los campos de formulario de Ext, ya sea ComboBox, NumberField o DateField, todos son subclases de la clase Ext.form.Field, en la que se definen los campos del formulario. Varias operaciones y características básicas. Al aprender a utilizar los componentes de los campos de formulario, debe centrarse en la clase Field. Dominar sus métodos principales, eventos, etc. le ayudará a aprender mejor a utilizar otros campos.
4. Ejemplos de estudio e investigación
Debido a que el lenguaje JavaScript es muy flexible, no tiene patrones de diseño de código fijos como los lenguajes estáticos fuertemente tipados (como Java), pero A menudo diferentes personas tienen diferentes estilos de programación. En el desarrollo de aplicaciones real, solo si está bien informado podrá crear una biblioteca de desarrollo en su propia mente.
Aprender de los ejemplos de otras personas será de gran ayuda para nuestro desarrollo. Los ejemplos incluyen la aplicación de componentes básicos, aplicaciones integrales y otros aspectos. A continuación se ofrecen algunas recomendaciones sencillas.
1. Los ejemplos oficiales ext, en el directorio de ejemplos del paquete de descarga del proyecto ext, incluyen demostraciones de aplicaciones básicas de cada control, así como algunos ejemplos de combinación más complejos, incluidos simples y complejos, muy adecuados para principiantes. Estudia atentamente.
2. Ejemplos lanzados por Vifir Algunos ejemplos lanzados por Vifir incluyen principalmente dos categorías, una son aplicaciones de muestra de código abierto y la otra son ejemplos prácticos para usuarios VIP. Los ejemplos de código abierto se refieren principalmente al sistema de blog de usuario único wlr, que es un ejemplo completo de ext que integra tecnologías front-end y back-end. Los ejemplos prácticos para usuarios VIP son ejemplos que pueden usarse como esqueletos de desarrollo o extendidos. componentes.
3. Otros ejemplos Hay muchos ejemplos excelentes de aplicaciones ext en la comunidad ext. Algunos son solo demostraciones de aplicaciones. Aunque no se proporciona la descarga del código fuente, podemos descargar directamente los archivos js a los que se hace referencia para obtenerlos. El código de aplicación ext de muestra también puede lograr un muy buen efecto de aprendizaje.
5. Úselo más
Ext parece ser algo muy simple. Las personas con un poco de conocimiento de programación pueden seguir la guía introductoria en la "Guía práctica de desarrollo de ExtJS". se puede utilizar en media hora. Aprenda a utilizar Ext. Sin embargo, al prepararme para usar Ext para desarrollar un proyecto, no sé por dónde empezar, o al usar Ext, surge un pequeño problema y no sé cómo solucionarlo. La programación es una ciencia práctica. No basta con leer libros y ver el código escrito por otros. Por lo tanto, es necesario practicar más y comprender las características y características de los componentes de Ext. comprensión profunda de eventos, mecanismos de procesamiento de eventos e interfaces de interacción del lado del servidor, etc. Solo usándolo más y comprendiendo profundamente los principios y mecanismos de funcionamiento de los componentes ext se pueden escribir aplicaciones Ext avanzadas.
6. Familiarízate con el código fuente del proyecto Ext
Si quieres aplicar Ext en profundidad, leer el código fuente del proyecto Ext es un paso esencial. La calidad de Ext es muy Gao. Al leer su código podemos tener una comprensión más profunda de la programación orientada a objetos de JavaScript. El código Ext contiene muchas habilidades js avanzadas y patrones de diseño. En el proceso de uso de Ext, a menudo ampliamos los componentes Ext y diseñamos nuestros propios componentes o controles de acuerdo con las necesidades del proyecto. En cuanto a cómo implementar un componente Ext personalizado, podemos encontrar la respuesta en el código fuente de cada componente. ext.
El código fuente de Ext se encuentra en el directorio fuente del proyecto Ext. La lectura del código fuente de Ext no necesariamente tiene que comenzar desde un lugar determinado, pero el código central del componente Component.js, el código del componente del contenedor Container.js, el panel Panel.js, etc. son lecturas obligatorias en Element.js y Ext; el directorio principal .js, etc. también es una visita obligada. Cuando necesite ampliar desde un control, lo mejor es simplemente echar un vistazo al código fuente del control.
Adjunto: A mí personalmente me gusta usar jquery, jaja