ExtJS Tutorial PDF

ExtJS Tutorial
Introduccin bsica
ExtJS soporte para JavaScript extendido, es un marco de JavaScript y el producto de sencha que se
basa en YUI (interfaz de usuario de Yahoo) es bsicamente una plataforma de desarrollo de
aplicaciones de escritorio con interfaz de usuario moderna. Este tutorial da una comprensin completa
de Ext JS. Esta referencia le llevar a travs de un enfoque sencillo y prctico, mientras que el
aprendizaje Ext JS.
Audiencia
Este tutorial ha sido preparado para los principiantes para ayudarles a entender los conceptos de Ext
JS para construir la interfaz de usuario web dinmica.
Requisitos previos
Para este tutorial, el lector debe tener un conocimiento previo de HTML, CSS y JavaScript de
codificacin. Sera de gran ayuda si el lector conoce los conceptos de la programacin orientada a
objetos y tienen idea general sobre la creacin de aplicaciones web.
Ejecutar ExtJS Online

Para la mayora de los ejemplos dados en este tutorial encontrar Prubalo opcin, por lo que slo
hacen uso de esta opcin para ejecutar sus programas de ExtJS en el lugar y disfrutar de su
aprendizaje.
Trate siguiente ejemplo usando Intntelo opcin disponible en la esquina superior derecha del
cuadro de cdigo de ejemplo siguiente -
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-
classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-
all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 100,
width: 200,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
});
</script>
</head>
<body>
<div id="helloWorldPanel"></div>
</body>
</html>
1
Ext.js - Informacin general
Cul es Ext JS
Ext JS es un marco de JavaScript populares que proporcionan rica interfaz de usuario para crear
aplicaciones web con la funcionalidad del navegador cruz. Ext JS se utiliza bsicamente para la
creacin de aplicaciones de escritorio Es compatible con todos los navegadores modernos como
Internet Explorer 6 +, FF, Chrome, Safari 6, pera 12+ etc. Mientras que otro producto de sencha,
touch sencha se utiliza para aplicaciones mviles.
Ext JS est basada en la arquitectura MVC / MVVM. La ltima versin de Ext JS 6 es una nica
plataforma que puede ser utilizado tanto para escritorio y aplicaciones mviles sin tener cdigo
diferente para diferentes plataformas.
historia
Ext JS 1.1
La primera versin de Ext JS fue desarrollada por Jack Slocum en 2006. Fue un conjunto de clases de
utilidad que es una extensin de YUI. Llam a la biblioteca como Yui-ext.
Ext JS 2.0
Ext JS versin 2.0 fue lanzado en 2007. Esta versin tena nueva documentacin de la API para la
aplicacin de escritorio con caractersticas limitadas. Esta versin no tena la compatibilidad con
versiones anteriores de Ext JS.
Ext JS 3.0
Ext JS versin 3.0 fue lanzado en 2009. Esta versin aade nuevas caractersticas como la carta y la
lista de vistas, pero a costa de la velocidad. Tena compatible con la versin 2.0.
Ext JS 4.0
Despus de la liberacin de Ext JS 3 los desarrolladores de Ext JS tuvieron el mayor reto de aumento
gradual de la velocidad. Ext JS versin 4.0 fue lanzado en 2011. Tena la estructura completa revisada
que sigue la arquitectura MVC y una aplicacin rpida.
Ext JS 5.0
Ext JS versin 5.0 fue lanzado en 2014. El principal cambio en esta versin era cambiar la
arquitectura MVC a la arquitectura MVVM. Incluye la capacidad de construir aplicaciones de escritorio
en dispositivos tctiles, datos de dos vas de unin, de disposiciones que responden y muchas ms
caractersticas.
Ext JS 6.0
Ext JS 6 fusiona el Ext JS (por aplicacin de escritorio) y el tacto sencha (para aplicaciones mviles)
marco.
Caractersticas
Estos son los rasgos que destacan Ext JS
1. widgets personalizables con la interfaz de usuario rica coleccin de interfaz de usuario, tales como rejillas,
rejillas de pivote, formularios, tablas, rboles.
2. compatibilidad de cdigo de nuevas versiones con la mayor.
2
3. Un controlador de distribucin flexible, ayuda a organizar la visualizacin de los datos y contenidos a
travs de mltiples navegadores, dispositivos y tamaos de pantalla.
4. paquete de datos antelacin desacopla los widgets de interfaz de usuario de la capa de datos. El paquete
de datos permite la recogida del lado del cliente de los datos utilizando modelos altamente funcionales que
permiten a caractersticas tales como la clasificacin y filtrado.
5. Es el protocolo agnstico, y se puede acceder a los datos desde cualquier fuente de fondo.
6. Temas personalizables Ext JS los widgets estn disponibles en mltiples temas fuera de la caja que son
consistentes en todas las plataformas.
Beneficios
Sencha Ext JS es el estndar lder para el desarrollo de aplicaciones web de nivel empresarial. Ext JS
proporciona las herramientas necesarias para construir aplicaciones robustas para el escritorio y
tabletas.
1. Agiliza el desarrollo multiplataforma en sistemas de escritorio, tabletas y telfonos inteligentes - tanto

para los navegadores modernos y antiguos.
2. Aumenta la productividad de los equipos de desarrollo mediante la integracin en entornos de desarrollo
de la empresa a travs de plugins IDE.
3. Reduce el coste de desarrollo de aplicaciones web.
4. Permite a los equipos para crear aplicaciones con una atractiva experiencia del usuario.
5. Se ha puesto de widgets para hacer la interfaz de usuario de gran alcance y fcil.
6. De ello se sigue la arquitectura MVC lo que el cdigo de fcil lectura.
Limitaciones
1. El tamao de la biblioteca es grande alrededor de 500 KB, que hace que el tiempo de carga inicial ms y
hace que la aplicacin lenta.
2. HTML est lleno de etiquetas hace que sea complejo y difcil de depurar.
3. De acuerdo con la poltica de la licencia pblica general, es libre para aplicaciones de cdigo abierto, pero
pagado para aplicaciones comerciales.
4. Algunas veces para cargar incluso cosas simples requiere pocas lneas de codificacin que es ms simple
en HTML plano o Jquery.
5. Necesita desarrollador bastante experiencia para el desarrollo de aplicaciones de Ext JS.
Instrumentos
Estas son las herramientas proporcionadas por el sencha utilizados para el desarrollo de aplicaciones
Ext JS principalmente para el nivel de produccin.
Sencha Cmd
Sencha CMD es una herramienta que proporciona las caractersticas de Ext JS minimizacin de cdigo,
andamios, la produccin de generacin de generacin.
Sencha IDE Plugins

Sencha plugins IDE que son integra marcos Sencha en IntelliJ, WebStorm IDEs. Lo que ayuda en la
mejora de la productividad del desarrollador al proporcionar caractersticas tales como la finalizacin
de cdigo, inspeccin de cdigo, navegacin de cdigo, generacin de cdigo, refactorizacin de
cdigo, creacin de plantillas, y la correccin ortogrfica, etc.
Sencha Inspector
Sencha Inspector es una herramienta de depuracin que ayuda depurador para depurar cualquier
problema durante el desarrollo.
3
Configuracin del entorno - Ext.js
Intntelo opcin en lnea
Hemos establecido Entorno de programacin ExtJS en lnea, de modo que usted puede compilar y
ejecutar todos los ejemplos disponibles en lnea. Se le da confianza en lo que ests leyendo y le
permite verificar los programas con diferentes opciones. No dude en para modificar cualquier ejemplo
y ejecutarlo en lnea.
El siguiente ejemplo muestra el uso Intntelo opcin disponible en la esquina superior derecha del
cuadro de cdigo de ejemplo siguiente:
<!DOCTYPE html>
<html>
<head>
all.js"></script>
height: 100,
width: 200,
});
});
</script>
</head>
<body>
<div id="helloWorldPanel"></div>
</body>
</html>
Para la mayora de los ejemplos dados en este tutorial, encontrar una opcin de probarlo en nuestras
secciones de cdigo en la pgina web de la esquina superior derecha que le llevar al compilador en
lnea. Por lo que slo hacer uso de ella y disfrutar de su aprendizaje.
La configuracin local para el Medio Ambiente

Esta seccin le gua sobre cmo descargar e instalar Ext JS en su mquina. Por favor, siga los pasos
para configurar el entorno.
La descarga de archivos de la biblioteca

Descargar una versin de prueba de archivos de la biblioteca Ext JS de
sencha https://www.sencha.com . Obtendr la versin de prueba desde el sitio en su identificador de
correo certificado, que ser un ext-6.0.1-juicio archivo comprimido llamado.
Descomprimir la carpeta y se encuentran varios archivos JavaScript y CSS que se va a incluir en

nuestra aplicacin. Vamos a incluir en su mayora siguientes archivos:
(1) Los archivos Javascript archivo JS que se puede encontrar en la carpeta \ ext-6.0.1-ensayo \
ext-6.0.1 \ build son:
4
Archivo y Descripcin
ext.js
Este es el archivo de ncleo que contiene toda la funcionalidad para ejecutar la aplicacin.
ext-all.js
Este archivo contiene todo el cdigo minified sin comentarios en el archivo
ext-all-debug.js
Esta es la versin de unminified ext-all.js para propsitos de depuracin.
ext-all-dev.js
Este archivo tambin es unminified y se utiliza para fines de desarrollo, ya que contiene todas
las observaciones y registros de la consola tambin para comprobar cualquier error / problema
ext-all.js
Este archivo se utiliza para el propsito de la produccin en su mayora, ya que es mucho ms
pequeo que cualquier otra.
Puede agregar estos archivos a la carpeta de proyectos JS o se puede dar camino directo donde el
archivo reside en su sistema.
(2) Archivos CSS Hay una serie de archivos en funcin del tema que se puede encontrar en la
carpeta \ ext-6.0.1-ensayo \ build \ \ clsico tema clsico recursos \ \ ext-6.0.1 \ tema clsico-all.css
Si vamos a usar aplicacin de escritorio, entonces podemos usar temas clsicos bajo la carpeta \ ext-
6.0.1-ensayo \ ext-6.0.1 \ build \ clsica
Si vamos a utilizar la aplicacin mvil, entonces vamos a utilizar temas modernos que se pueden
encontrar en la carpeta \ ext-6.0.1-ensayo \ ext-6.0.1 \ build \ moderna
Estos archivos de la biblioteca se aadirn en una aplicacin Ext JS de la siguiente manera:
<html>
<head>
<link rel = "stylesheet" type ="text/css" href= "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-
classic\resources\theme-classic-all.css" />
<script type ="text/javascript" src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
Usted va a mantener el cdigo de aplicacin en ExtJS app.js archivo.
Configuracin CDN
CDN es la red de distribucin de contenidos con los que no es necesario descargar los archivos de la
biblioteca Ext JS en su lugar se puede aadir directamente enlace CDN para ExtJS a su programa de
la siguiente manera:
5
html>
<head>
<link rel = "stylesheet" type ="text/css" href=
"https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" /
>
<script type ="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-
all.js" > </script>
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
Editores populares
Como se trata de un marco de JavaScript que se utiliza para el desarrollo de aplicaciones web, en
nuestro proyecto tendremos HTML, archivos JS y para escribir sus programas de Ext JS, se necesita
un editor de texto. Incluso hay mltiples entornos de desarrollo disponibles en el mercado. Pero, por
ahora, se puede considerar una de las siguientes:
Bloc de notas: El equipo de Windows se puede utilizar cualquier simple editor de texto como Notepad
(recomendado para este tutorial), Notepad ++, sublime.
Eclipse: es un IDE desarrollado por la comunidad Eclipse de cdigo abierto y se puede descargar
desdehttp://www.eclipse.org/ .
Navegador
Ext JS es compatible con la compatibilidad del navegador cruz, es compatible con todos los principales
navegadores como:
IE 6 y superior
Firefox 3,6 y por encima de
Chrome10 y por encima
Safari 4 y superiores
Opera 11 y por encima de
Se puede utilizar cualquier navegador para ejecutar la aplicacin Ext JS.
Ext.js - convencin de nomenclatura

La convencin de nombres es un conjunto de reglas que deben seguirse para identificadores.
Esto hace que el cdigo sea ms legible y comprensible para los otros programadores tambin.
Convencin de nomenclatura en Ext JS sigue la convencin de JavaScript estndar que no es

obligatorio, pero es una buena prctica a seguir.
Debera siguiente sintaxis caso de camellos de denominacin de la clase, mtodo, variable y

propiedades.
Si el nombre se combina con dos palabras, segunda palabra se iniciar con letra mayscula siempre
doLayout por ejemplo (), StudentForm, firstName etc.
Nombre Convencin
6
Nombre de la Se debe comenzar con letra mayscula y seguido por caso camello Ej
clase StudentClass
Nombre del Se debe comenzar con letra minscula y seguido por caso camello Ej
mtodo doLayout ()
Nombre de la Se debe comenzar con letra minscula y seguido por caso camello Ej
variable firstName
Nombre constante Debe estar en maysculas ejemplo COUNT, MAX_VALUE
Nombre de la Se debe comenzar con letra minscula y seguido por caso camello por
propiedad ejemplo enableColumnResize = true
Ext.js - Arquitectura
Ext JS sigue la arquitectura MVC / MVVM.
MVC - la arquitectura Modelo Vista Controlador (versin 4)
MVVM - Modelo Vista ViewModel (versin 5)
Esta arquitectura no es obligatorio para el programa, pero es mejor prctica a seguir esta estructura
para hacer que el cdigo altamente mantenible y organizada.
Estructura del proyecto Con Ext JS App

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files
Carpeta de aplicacin Ext JS residir en la carpeta JavaScript de su proyecto.
La aplicacin contendr controlador, visin, modelo, tienda, archivos de utilidad con app.js.
app.js: el archivo principal, desde donde el flujo de programa se iniciar, que debe ser incluido en el
archivo HTML principal uso de la etiqueta <script>. Aplicacin llama al controlador de aplicacin para
el descanso de la funcionalidad.
7
Controller.js: Es el archivo de controlador de la arquitectura MVC Ext JS. Este contiene todo el
control de la aplicacin, los eventos a los oyentes la mayor funcionalidad del cdigo. Tiene la
trayectoria definida para todos los dems archivos usados en esa solicitud tal como almacenar, ver,
modelo, requieren, mixins.
View.js: Contiene la parte de interfaz de la aplicacin que aparece para el usuario. Ext JS utiliza
diversos puntos de vista ricas de interfaz de usuario que puede ampliarse y personalizarse aqu de
acuerdo con el requisito.
Store.js: Contiene los datos en cach local que va a ser emitida el punto de vista con la ayuda de los
objetos del modelo. Tienda recoge los datos utilizando proxies que tiene la trayectoria definida por los
servicios para recuperar los datos de back-end.
Model.js: Contiene los objetos que se une a los datos de la tienda para ver. Tiene mapeo de objetos
de datos back-end a la vista dataIndex. Los datos se recuperan con la ayuda de la tienda.
Utils.js: No est incluido en la arquitectura MVC, pero una buena prctica utilizar para hacer que el
cdigo limpio, menos complejo sea ms legible. Podemos escribir mtodos de este archivo y llamarlos
en el controlador o procesador de vista donde quiera que sea necesario. Es til para los fines de
reutilizacin del cdigo tambin.
En MVVM controlador de la arquitectura se sustituye por modelo de vista.
Modelo de vista: Se bsicamente medica los cambios entre la vista y el modelo. Se une los datos de
modelo para ver. Al mismo tiempo que no tiene ninguna interaccin directa con vista slo tiene
conocimiento de modelo.
Cmo funciona
Por ejemplo, si estamos utilizando un objeto de modelo a las dos - tres lugares en la interfaz de
usuario, si cambiamos el valor en un solo lugar de la interfaz de usuario se puede ver sin siquiera
ahorro que cambia el valor de los cambios de modelo y as es reflejada en todos los lugares en la
interfaz de usuario donde cada vez se utiliza el modelo.
Esto hace que los desarrolladores esfuerzo mucho menor y ms fcil ya que no se requiere ninguna
codificacin adicional para el enlace de datos.
Ext.js - Primer Programa

Esta lista de captulos se establece los pasos para escribir el primer programa Hola Mundo en Ext JS:
Paso 1
Crear pgina index.htm en un editor de nuestra eleccin. Incluir los archivos de biblioteca necesarios
en la seccin de la cabeza de la pgina html como se menciona a continuacin:
index.htm
<!DOCTYPE html>
<html>
<head>
all.js"></script>
8
height: 200,
width: 600,
});
});
</script>
</head>
<body>
<div id="helloWorldPanel" />
</body>
</html>
EXPLICACIN
Ext.onReady mtodo () ser llamada una vez que el Ext JS est listo para hacer que los elementos de Ext
JS.
Ext.create mtodo () se utiliza para crear el objeto en Ext JS aqu estamos creando un objeto de la clase
sencilla Ext.Panel panel.
Ext.Panel es la clase predefinida en Ext JS para la creacin de un panel.
Cada clase Ext JS cuenta con diferentes propiedades para realizar algunas funciones bsicas.
Ext.Panel clase tiene varias propiedades como:
renderTo es el elemento donde este panel se tiene que hacer.'helloWorldPanel' es el id div en el archivo
index.html.
Altura y anchura propiedades son para dar tamao personalizado del panel.
Ttulo de propiedad es proporcionar el ttulo al panel.
Html propiedad es el contenido HTML que se muestra en el panel.
Paso 2
Abrir el archivo index.htm en un navegador estndar y obtendr el siguiente resultado en el
navegador.
Ext.js - Clases
Ext JS es un marco de JavaScript que tiene funcionalidades de programacin orientada a objetos. Ext
es el espacio de nombres que encapsula todas las clases en Ext JS.
9
La definicin de una clase en Ext JS
Ext ofrece ms de 300 clases que podemos utilizar para diversas funcionalidades.
Ext.define () se utiliza para definir clases en Ext JS.
Sintaxis:
Ext.define(class name, class members/properties, callback function);
Nombre de la clase es el nombre de la clase de acuerdo con la estructura de aplicacin, por ejemplo
appName.folderName.ClassName studentApp.view.StudentView.
Las propiedades de clase / miembros - que definen el comportamiento de la clase.
Funcin de devolucin es opcional. Se llama cuando la clase ha cargado correctamente.
Ejemplo de definicin de clase Ext JS
Ext.define(studentApp.view.StudentDeatilsGrid, {
extend : 'Ext.grid.GridPanel',
id : 'studentsDetailsGrid',
store : 'StudentsDetailsGridStore',
renderTo : 'studentsDetailsRenderDiv',
layout : 'fit',
columns : [{
text : 'Student Name',
dataIndex : 'studentName'
},{
text : 'ID',
dataIndex : 'studentId'
},{
text : 'Department',
dataIndex : 'department'
}]
});
Creacin de objetos
Como al igual que otros lenguajes basados OOPS podemos crear objetos en Ext JS tambin.
Diferentes formas de crear objetos en Ext JS-
Utilizando la nueva palabra clave:
var studentObject = new student();

studentObject.getStudentName();
Usando Ext.create ():
renderTo : 'helloWorldPanel',
height : 100,
width : 100,
title : 'Hello world',
html : 'First Ext JS Hello World Program'
});
Herencia en Ext JS
Herencia en el principio de utilizar la funcionalidad definida en la clase A en la clase B.
10
En Ext JS herencia puede hacerse utilizando dos mtodos-
Ext.extend:
Ext.define(studentApp.view.StudentDeatilsGrid, {
extend : 'Ext.grid.GridPanel',
...
});
Aqu nuestra clase personalizada StudentDetailsGrid est utilizando caractersticas bsicas de
GridPanel clase Ext JS.
Usando Mixins:
Mixins es la diferente forma de utilizar la clase A en clase B sin extender.
mixins : {
commons : 'DepartmentApp.utils.DepartmentUtils'
},
Mixins que poner en el controlador donde declaramos todas las otras clases, tales como almacenar,
ver, etc. De esta manera podemos llamar a la clase DepartmentUtils y utilizar sus funciones de
controlador o en esta solicitud.
Ext.js - Contenedores
Contenedores
Recipiente en Ext JS es el componente en el que podemos aadir otros componentes de contenedor o
un nio. Estos recipientes pueden tener de diseo mltiple para organizar los componentes en los
recipientes. Podemos agregar o quitar componentes del envase y de sus elementos
secundarios. Ext.container.Container es la clase base para todos los contenedores en Ext JS.
SN Descripcin
11
1 Los componentes del interior del envase
Este ejemplo muestra cmo definir los componentes del interior de contenedores
2 Contenedor dentro del contenedor
Este ejemplo muestra cmo definir contenedor dentro del contenedor con otros
componentes
Hay varios tipos de contenedores Ext.panel.Panel, Ext.form.Panel, Ext.tab.Panel y

Ext.container.Viewport se utilizan con frecuencia en los contenedores Ext JS. A continuacin se
presentan el ejemplo que muestra cmo utilizar estos contenedores.
SN Tipo de Contenedores y Descripcin
1 Ext.panel.Panel
Este ejemplo muestra un recipiente Ext.panel.Panel
2 Ext.form.Panel
Este ejemplo muestra un recipiente Ext.form.Panel
3 Ext.tab.Panel
Este ejemplo muestra un recipiente Ext.tab.Panel
4 Ext.container.Viewport
Este ejemplo muestra un recipiente Ext.container.Viewport
Ext.js - Presentaciones
Disposicin es la forma en que los elementos estn dispuestos en un recipiente. Eso podra ser
horizontal, vertical o cualquier otro. Ext JS cuenta con diferente diseo definido en su biblioteca, pero
que siempre puede escribir diseos personalizados tambin.
SN Disposicin y Descripcin
1 Absolute
Esta disposicin permite posicionar los elementos mediante coordenadas XY en el

recipiente.
2 Accordion
Este diseo permite colocar todos los elementos de la moda pila (una encima de la otra)
12
en el interior del recipiente.
3 Anchor
Esta disposicin da el privilegio de usuario para dar el tamao de cada elemento con
respecto al tamao del recipiente.
4 Border
En este diseo de varios paneles estn anidados y separadas por fronteras.
5 Auto
Este es el diseo predeterminado decide la disposicin de los elementos basados en el
nmero de elementos.
6 Card(TabPanel)
En este diseo se organiza diferentes componentes de la moda pestaa. Las pestaas se

mostrarn en la parte superior de las veces container.Every slo una pestaa es visible y
cada ficha se considera como componente diferente.
7 Card(Wizard)
En este esquema cada vez que los elementos viene por el espacio contenedor
lleno. Habra una barra de herramientas de fondo en el asistente para la navegacin.
8 Column
Este diseo es para mostrar varias columnas en el recipiente.Podemos definir ancho fijo o
porcentaje a las columnas. La anchura porcentaje se calcula basndose en el tamao
completo del contenedor.
9 Fit
En este diseo el recipiente se llena con un solo panel y cuando no hay ningn requisito
especfico relacionado con la disposicin, se utiliza dicha disposicin.
10 Table
Como su nombre lo indica este diseo ordena los componentes en un recipiente en el

formato de tabla HTML.
11 vBox
Esta disposicin permite que el elemento a ser distribuido de la manera vertical. Esta es
una de la disposicin ms utilizada.
12 hBOX
13
Esta disposicin permite que el elemento a ser distribuido de la manera horizontal.
Ext.js - Componentes
ExtJS interfaz de usuario se compone de uno o muchos widgets llamados Components.Ext Js tiene
diversos componentes de interfaz de usuario definidos que se pueden personalizar segn sus
necesidades.
SN Mtodos y descripcin
1 Grid
Componente de la red se puede utilizar para mostrar los datos en el formato tabular.
2 Form
widget de formulario es para obtener los datos del usuario.
3 Message Box
Buzn de mensajes se utiliza bsicamente para mostrar los datos en forma de cuadro de
alerta.
4 Chart
Los grficos se utilizan para representar datos en formato pictrico.
5 Tool tip
Punta de la herramienta se utiliza para mostrar informacin bsica cuando se produce

ningn evento.
6 Window
Este widget de interfaz de usuario es crear una ventana que debera aparecer cuando se
produce cualquier evento.
7 HTML editor
Editor HTML es uno de los componentes de interfaz de usuario muy til que se utiliza
para estilizar los datos que el usuario entra en trminos de tipos de letra, color, tamao,
etc.
8 Progress bar
Para mostrar el progreso del trabajo de back-end.
14
Ext.js - Arrastrar y soltar
Descripcin
Arrastrar y soltar caracterstica es una de las caractersticas de gran alcance aadido para la
fabricacin de los desarrolladores de operacin tarea easy.A arrastre, en esencia, es un gesto clic en
algn elemento de interfaz de usuario, mientras que el botn del ratn se mantiene presionado y se
mueve el ratn. Una operacin de descenso se produce cuando el botn del ratn se libera despus de
una operacin de arrastre.
Sintaxis
Adicin de arrastre y cada de la clase de los objetivos que pueden arrastrarse.
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {

isTarget: false
});
Adicin de arrastre y destino de colocacin clase para drappable objetivo
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {

ignoreSelf: false
});
Ejemplo
Lo que sigue es un ejemplo sencillo
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-
classic-all.css" rel="stylesheet" />
all.js"></script>
Ext.application({
launch: function() {
var images = Ext.get('images').select('img');
Ext.each(images.elements, function(el) {
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
isTarget: false
});
});
}
});
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
ignoreSelf: false
});
</script>
<style>
#content{
width:600px;
height:400px;
padding:10px;
border:1px solid #000;
}
#images{
float:left;
width:40%;
height:100%;
border:1px solid Black;
background-color:rgba(222, 222, 222, 1.0);
}
15
#mainRoom{
float:left;
width:55%;
height:100%;
margin-left:15px;
background-color:rgba(222, 222, 222, 1.0);
}
.image{
width:64px;
height:64px;
margin:10px;
cursor:pointer;
display: inline-block;
}
</style>
</head>
<body>
<div id="content">
<div id="images">
<img src = "/extjs/images/1.jpg" class = "image" />
</div>
<div id="mainRoom"></div>
</div>
</body>
</html>
Esto producir siguiente resultado
Con la ayuda de arrastrar y soltar en Extjs podemos mover datos desde la red elctrica a la red y la
red de form.Below son el ejemplo de los datos entre las redes y formas en movimiento.
16
Ext.js - Temas
Ext.js ofrece una serie de temas para ser utilizado en las aplicaciones. Se pueden aadir diferentes
inplace tema de tema clsico y ver la diferencia en la produccin, esto se hace simplemente mediante
la sustitucin de los archivos de temas CSS como se explica a continuacin.
Neptuno Tema
Tenga en cuenta su primera aplicacin Hello World. Retire el siguiente CSS de la aplicacin:
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css
Agregue el siguiente CSS a utilizar el tema de Neptuno:
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css
Para ver el efecto, probar el siguiente programa:
<!DOCTYPE html>
<html>
<head>
neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
height: 200,
width: 600,
});
});
</script>
</head>
<body>
</body>
</html>
Esto producir siguiente resultado:
17
Tema quebradizo
Agregue el siguiente CSS a utilizar el tema de Neptuno:
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-
crisp-all.css" rel="stylesheet" />
all.js"></script>
height: 200,
width: 600,
});
});
</script>
</head>
<body>
</body>
</html>
Triton Tema
Agregue el siguiente CSS a utilizar el tema de Tritn:
18
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css
<!DOCTYPE html>
<html>
<head>
triton/resources/theme-triton-all.css" rel="stylesheet" />
all.js"></script>
height: 200,
width: 600,
});
});
</script>
</head>
<body>
</body>
</html>
Gray Tema
Agregue el siguiente CSS a utilizar el tema de Gray:
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-
gray-all.css" rel="stylesheet" />
all.js"></script>
19
height: 200,
width: 600,
});
});
</script>
</head>
<body>
</body>
</html>
Ext.js - Eventos personalizados y oyentes

Los eventos son cosa que hacer disparado cuando sucede algo a la clase.Por ejemplo, cuando se est
hace clic en un botn o antes / despus se vuelve elemento.
Mtodos de eventos de escritura:

1. Construido en eventos utilizando los oyentes
2. eventos que unen ms tarde
3. Los eventos personalizados
Construido en eventos utilizando los oyentes

Ext JS proporciona la propiedad de escucha para la escritura de sucesos y eventos personalizados en
los archivos de Ext JS.
Escribiendo oyente en Ext JS
Vamos a aadir el oyente en el propio programa anterior mediante la adicin de escuchar alojamiento
hasta el panel de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
all.js"></script>
20
Ext.onReady(function(){
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('helloWorldPanel'),
text: 'My Button',
listeners: {
click: function() {
Ext.MessageBox.alert('Alert box', 'Button is clicked');
}
}
});
});
</script>
</head>
<body>
<p> Please click the button to see event listener </p>
<div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- >
</body>
</html>
De esta manera podemos escribir mltiples eventos tambin en la propiedad oyentes.
Mltiples eventos en misma escucha
<!DOCTYPE html>
<html>
<head>
all.js"></script>
Ext.get('tag2').hide()
text: 'My Button',
listeners: {
click: function() {
this.hide();
},
hide: function() {
Ext.get('tag1').hide();
Ext.get('tag2').show();
}
}
});
});
</script>
</head>
<body>
21
<div id = "tag1">Please click the button to see event listener.</div>
<div id = "tag2">The button was clicked and now it is hidden.</div>
</body>
</html>
Colocacin caso ms tarde

En el mtodo anterior de los acontecimientos de escritura que hemos escrito eventos en los oyentes
en el momento de la creacin de elementos.
Otra forma consiste en conectar los eventos en el que:
<!DOCTYPE html>
<html>
<head>
all.js"></script>
var button = Ext.create('Ext.Button', {
text: 'My Button'
});
// This way we can attach event to the button after the button is created.
button.on('click', function() {
Ext.MessageBox.alert('Alert box', 'Button is clicked');
});
});
</script>
</head>
<body>
<p> Please click the button to see event listener </p>
</body>
</html>
22
Los eventos personalizados
Podemos escribir los eventos personalizados en Ext JS y el fuego de los eventos con el mtodo
fireEvent, por debajo de ejemplo se explica cmo escribir una serie de eventos personalizados.
<!DOCTYPE html>
<html>
<head>
all.js"></script>
var button = Ext.create('Ext.Button', {
text: 'My Button',
listeners: {
myEvent: function(button) {
Ext.MessageBox.alert('Alert box', 'My custom event is called');
}
}
});
Ext.defer(function() {
button.fireEvent('myEvent');
}, 5000);
});
</script>
</head>
<body>
<p> The event will be called after 5 seconds when the page is loaded. </p>
</body>
</html>
Una vez que se carga la pgina y documento est listo aparecer la pgina de la interfaz de usuario
con el botn y ya que estamos disparando un evento despus de 5 seg el documento est listo el
cuadro de alerta aparecer despus de 5 segundos.
23
Aqu hemos escrito el evento personalizado 'MyEvent' y estamos disparando eventos como
button.fireEvent (eventName);
Estas son las tres formas de escribir eventos en Ext JS.
Ext.js - Datos
paquete de datos se utiliza para cargar y guardar todos los datos en la aplicacin.
El paquete de datos tiene numerosas nmero de clases, pero las clases ms importantes son:
1. Modal
2. Almacenar
3. Apoderado
Modelo:
La clase base para modal es Ext.data.Model.It representa una entidad en una aplicacin. Se une los
datos de la tienda para ver. Tiene mapeo de objetos de datos back-end a la vista dataIndex. Los
datos se recupera con la ayuda de la tienda.
Creacin de un modelo:
Para crear un modelo que necesitamos para extender la clase Ext.data.Model y tenemos que definir
campos de su nombre y la cartografa.
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
Aqu el nombre debe ser el mismo que el que dataIndex declaramos en la vista y el mapeo debe
coincidir con los datos, ya sea esttica o dinmica de la base de datos que ha de ser trada de la
memorizacin.
Almacenar:
La clase base para la tienda es Ext.data.Store. Contiene los datos en cach local que va a ser emitida
el punto de vista con la ayuda de los objetos del modelo. Tienda recoge los datos utilizando proxies
que tiene la trayectoria definida por los servicios para recuperar los datos de back-end.
Almacenar los datos se pueden recuperar a partir de dos formas estticas o dinmicas.
tienda esttica:
Para tienda esttica vamos a tener todos los datos en el almacn de la siguiente manera:
Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "68" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
24
];
});
almacn dinmico:
Los datos dinmicos se pueden recuperar usando proxy. podemos tener proxy puede descabellada
datos de Ajax, Resto y JSON.
Proxy:
La clase base para proxy es Ext.data.proxy.Proxy. Proxy es utilizado por Modelos y tiendas para
manejar la carga y el almacenamiento de datos del modelo.
Hay dos tipos de proxies:
1. El cliente de proxy
2. Proxy Server
El cliente de proxy
proxies cliente incluyen memoria y almacenamiento local usando HTML5 de almacenamiento local.
Proxy Server
Los servidores proxy de mangos de datos desde un servidor remoto utilizando datos Ajax, JSON y
servicio Rest.
DEFINICIN DE SERVIDORES PROXY EN EL SERVIDOR:

Ext.create('Ext.data.Store', {
proxy : {
type : 'rest',
actionMethods : {
read : 'POST' // Get or Post type based on requirement
},
url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path which fetches data
from database or Json file path where the data is stored
reader: {
type : 'json', // the type of data which is fetched is of JSON type
root : 'data'
},
}
});
Ext.js - Fuentes
Descripcin
Extjs ofrece la posibilidad de utilizar diferentes paquetes de fuentes.paquetes de fuentes se utilizan
para agregar diferentes clases de iconos disponibles en el paquete.
1. Fuentes-Impresionante
2. Fuentes-pictos
FONT-IMPRESIONANTE
ExtJS tema nuevo Tritn tiene la familia de fuentes incorporado font-impresionante incluida en el
marco inself por lo que no necesitamos requiere ningn explcito para la hoja de estilos de fuente-
impresionante.
A continuacin se muestra el ejemplo del uso de las clases de fuente-Tritn impresionante en el tema.
25
Font-impresionante con Triton tema
Cuando estamos utilizando cualquier otro tema que no sea Triton tenemos que exigir o aadir hoja de
estilo para la fuente-impresionante explcitamente.
A continuacin se muestra el ejemplo del uso de las clases de fuente-impresionante y sin Triton tema.
Font-impresionante con el tema normal (Cualquier otro tema a continuacin, Triton tema)
FONT-PICTOS
Font-pictos no se incluyen en el marco de ExtJs as que tenemos que exigir que la primera y nica
licencia de usuario de sencha tendr el beneficio de usar font-pictos.
Pasos para agregar font-pictos
1. Requerir font class-pictos como:
"requires": ["font-pictos"]
2. Ahora suma clases PICTOS como:
iconCls: 'pictos pictos-home'
Ext.js - Estilo
Aplicacin Styling se refiere a un usuario ajustar la apariencia de los componentes. Estos ajustes
pueden incluir: color, gradientes de color, tipo de letra, mrgenes / relleno, etc. Ext JS 6 tiene una
nueva forma de estilizar la aplicacin.
Se utiliza SCSS para el peinado. SCSS es la forma ms dinmica de la escritura de cdigo

CSS. Podemos escribir las variables en nuestra hoja de estilo con la ayuda de este. Pero un navegador
no puede entender SCSS slo se puede entender CSS, por lo que todo el archivo SCSS debe conseguir
compilado en un cdigo CSS para la produccin de preparados.
Por eso se llama archivo SCSS archivos del preprocesador. En la compilacin Extjs se realiza a travs
de herramientas Sencha CMD.
Sencha CMD compila slo una vez manualmente mediante el comando de la siguiente manera:
aplicacin sencha acumulacin [de desarrollo]
Global_CSS es el archivo CSS principal que tiene toda variable de SCSS associted con l en ExtJS que
podemos utilizar en nuestra aplicacin para la personalizacin de nuestro tema, proporcionando valor
diferente en funcin de nuestras necesidades.
A continuacin se presentan algunas de las variables CSS disponible en el Global_CSS en Extjs:
SN Variable y Descripcin
1 $base-color
$base-color : color (e.g. $base-color : #808080)
26
Este color base que se utiliza en todo el tema.
2 $base-gradient
$base-gradient : string (e.g. $base-gradient : 'matte')
El gradiente de base que se utiliza en todo el tema.
3 $body-background-color
$body-background-color : color (e.g. $body-background-color : #808080)
El color de fondo que se aplicar al elemento del cuerpo. Si se establece en "ninguna"

transparente o sin estilo background-color se ajustar en el elemento del cuerpo
4 $color
$color : color (e.g. $color : #808080)
El color del texto por defecto que se utilizar en el tema
5 $font-family
$font-family : string (e.g. $font-family : arial)
La familia de fuentes predeterminada que se utiliza en todo el tema.
6 $font-size
$font-size : number (e.g. $font-size : 9px )
El tamao de fuente por defecto que se utilizar en el tema.
7 $font-weight
$font-weight : string/number (e.g. $font-weight : normal )
La fuente-peso predeterminado que se utiliza en todo el tema
8 $font-weight-bold
$font-weight-bold : string/number (e.g. $font-weight-bold : bold )
La fuente-peso por defecto para la fuente negrita que se utilizar en el tema
9 $include-chrome
$include-chrome : boolean (e.g. $include-chrome : true)
27
Es cierto que incluir disposiciones especiales Chrome
10 $include-ff
$include-ff : boolean (e.g. $include-ff : true)
Es cierto que incluir disposiciones especiales para Firefox
11 $include-ie
$include-ie : boolean (e.g. $include-ie : true)
Es cierto que incluir disposiciones especiales para Internet Explorer IE9 e inferior
12 $include-opera
$include-opera : boolean (e.g. $include-opera : true)
Es cierto que incluir disposiciones especiales Opera
13 $include-safari
$include-safari : boolean (e.g. $include-safari : true)
Es cierto que incluir disposiciones especiales Opera
14 $include-webkit
$include-webkit : boolean (e.g. $include-webkit : true)
Es cierto que incluir disposiciones especiales Webkit
Ext.js - Dibujo
Dibujo paquete en ExtJS permite dibujar grficos de uso general. Esto puede ser utilizado para
grficos que funcionan en todos los navegadores y dispositivos mviles.
SN Dibujo
1 Circle
Esto se utiliza grficos para crear forma circulare.
2 Rectangle
Esto se utiliza grficos para crear forma rectanglar.
28
3 Arc
Se utiliza este grficos para crear una forma de arco.
4 Ellipse
Esto se utiliza grficos para crear forma de elipse.
5 EllipticalArc
Se utiliza este grficos para crear forma de arco elptico.
6 Image
Esto se utiliza grficos para aadir imagen a la aplicacin.
7 Path
Esto se utiliza para crear grficos camino libre.
8 Text
Esto se utiliza grficos para aadir cualquier texto a su appication.
9 Translate after render
Esta propiedad se utiliza para mover su punto de partida en su contenedor despus de

que el grfico se representa. Puede ser utilizado con cualquier grfico.
10 Rotation
Esta propiedad se utiliza para agregar la rotacin al dibujo aadi.Puede ser utilizado con
cualquier grfico.
11 Square
Se utiliza este grfico para crear un cuadrado.
Ext.js - Localizacin
Siempre es mejor para comunicar a los usuarios en el idioma que comprendan y prefieren. paquete de
localizacin extjs soporta ms de 40 idiomas como el alemn, francs, coreano, chino, etc. Es muy
simple de implementar la configuracin regional en ExtJs.You'll encontrar todos los archivos de
traduccin de paquetes en la carpeta de anulacin del paquete de extensin de la configuracin
regional. archivos de localizacin no son slo las anulaciones que le dicen a Ext JS para reemplazar los
valores por defecto en ingls de ciertos componentes.
Este programa es para mostrar el mes en el entorno local diferente para ver el efecto, probar el
siguiente programa:
29
<!DOCTYPE html>
<html>
<head>
all.js"></script>
src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>
var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
var ds = Ext.create('Ext.data.Store', {
fields: ['month'],
remoteSort: true,
pageSize: 6,
proxy: {
type: 'memory',
enablePaging: true,
data: monthArray,
reader: {type: 'array'}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: 'grid',
id : 'gridId',
width: 600,
height: 200,
title:'Month Browser',
columns:[{
text: 'Month of the year',
dataIndex: 'month',
width: 300
}],
store: ds,
bbar: Ext.create('Ext.toolbar.Paging', {
pageSize: 6,
store: ds,
displayInfo: true
})
});
Ext.getCmp('gridId').getStore().load();
});
</script>
</head>
<body>
<div id="grid" />
</body>
</html>
Descripcin:
30
Para el uso de diferentes configuracin regional diferente al Ingls tendramos que aadir el archivo
de configuracin regional especfica en nuestro programa aqu estamos utilizando
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr Js para el francs. Se puede
utilizar otra configuracin regional de idioma para diferentes tales como para
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js etc. coreano
Este programa es para mostrar el selector de fecha en la configuracin regional coreana para ver el
efecto, probar el siguiente programa:
<!DOCTYPE html>
<html>
<head>
all.js"></script>
src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>
Ext.create('Ext.picker.Date', {
renderTo: 'datePicker'
});
});
</script>
</head>
<body>
<div id="datePicker" />
</body>
</html>
A continuacin se presentan los pocos lugares disponibles en ExtJS y la URL principal archivo de
entorno local que ha cambiado.
Lugar Idioma URL de configuracin regional
ko coreano https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr francs https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
31
eS Espaol https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
ja japons https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
eso italiano https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ru ruso https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN Simplifica https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-

china zh_CN.js
Ext.js - Accesibilidad
Qu es la accesibilidad?
En accesibilidad general significa la disponibilidad, el contenido es accesible significa que el contenido
se encuentra disponible.
En trminos de software de la aplicacin es accesible significa que la aplicacin est disponible para
todos. Aqu todos los medios que las personas con discapacidad, la discapacidad visual una vez o
aquellos que usan lectores de pantalla, usar una computadora o aquellos que prefieren toda la
navegacin con el teclado en lugar de utilizar un ratn.
Las aplicaciones que se puede acceder son llamados ARIA (con acceso para aplicaciones dinmicas de
Internet).
Accesibilidad en Ext JS:

Ext JS est diseado para tener esto en cuenta que debe trabajar con todo el teclado navigations.It
ha construido en la pestaa de indexacin y enfocar-capacidad, y siempre est activada de forma
predeterminada de modo que no es necesario aadir ninguna propiedad para habilitar esta
funcionalidad.
Esta funcionalidad permite que todos los componentes del teclado habilitado para interactuar con el
usuario cuando pestaas en. Al igual que la pestaa se puede utilizar para pasar al siguiente
componente en lugar de un ratn para mover en ese componente. De la misma forma podemos
cambiar + tab para moverse hacia atrs y entrar en el teclado para hacer clic, etc.
Enfoque peinado y fichas:

El foco est incorporado en Extjs utilizando las pulsaciones de teclas de tabulacin.
Debajo ejemplo muestra cmo los cambios en el estilo cuando el foco cambia con las pestaas.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-
crisp-all.css" rel="stylesheet" />
32
all.js"></script>
renderTo: Ext.getElementById('button1'),
text: 'Button1',
listeners: {
click: function() {
Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');
}
}
});
text: 'Button2',
listeners: {
click: function() {
}
}
});
text: 'Button3',
listeners: {
click: function() {
}
}
});
});
</script>
</head>
<body> <p>Please click the button to see event listener:</p>
<span id="button3"/>
</body>
</html>
Para ver la ficha utilizacin efecto de movimiento a partir del prximo botn y shft + tab para enfocar
hacia atrs Pulse Enter y vea descripcin relacionada con el botn de centrado surgira
ARIA tema:
ExtJS proporciona el aria tema para la persona con discapacidad visual.
Aqu el ejemplo para mostrar el tema aria que es ms accesible para las personas con discapacidad
visual.
A continuacin se muestra el ejemplo el tema Aria:
33
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-
aria-all.css" rel="stylesheet" />
all.js"></script>
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
// Creation of data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
// Store data
var myData = [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "68" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
// Creation of first grid store
var firstGridStore = Ext.create('Ext.data.Store', {
data: myData
});
// Creation of first grid
var firstGrid = Ext.create('Ext.grid.Panel', {
store : firstGridStore,
columns :
[{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1,
sortable: true
},{
header: "Age",
dataIndex: 'age',
flex: .5,
sortable: true
},{
header: "Marks",
dataIndex: 'marks',
flex: .5,
sortable: true
}],
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
// Creation of a panel to show both the grids.

var displayPanel = Ext.create('Ext.Panel', {
width : 600,
height : 200,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
34
},
renderTo : 'panel',
defaults : { flex : 1 },
items : [
firstGrid
]
});
});
</script>
</head>
<body>
<div id = "panel" > </div>
</body>
</html>
Esto producir siguiente resultado y se puede utilizar la ficha y el ratn arriba y abajo para mover el
enfoque a travs de la red y el tema es bsicamente para las personas con discapacidad visual.
Esta es la forma en ExtJS tema integrado y centrado hace que sea fcil acceso para cualquier
persona.
Ext.js - depuracin de cdigo Ext JS

Cualquier cdigo JavaScript se puede depurar utilizando cuadro de alerta () o console.log () o con el
puntero de depuracin en un depurador.
1. cuadro de alerta:
colocar un cuadro de alerta en el cdigo en el que desea comprobar el flujo o cualquier valor de la
variable. por ejemplo alert ( 'mensaje que mostrar' + variable);
2. Herramienta de desarrollo / depuracin:
Depurador es la herramienta ms importante para cualquier desarrollador para comprobar el problema y el

error en el cdigo durante el desarrollo.
Ext JS es un marco de JavaScript por lo que se puede depurar fcilmente utilizando herramientas de
desarrollador proporcionados por o especficas para los diferentes navegadores.
Todos los principales navegador tiene sus herramientas para desarrolladores disponibles para probar y
depurar cdigo JavaScript.
depuradores populares son la herramienta de desarrollo para IE IE, Firebug para Firefox, cromo
herramienta de desarrollo para el navegador Chrome.
depurador Chrome viene con el navegador Chrome, pero quemador tiene que tener instalado
especficamente en lo que no viene como un paquete con Firefox.
35
Aqu hay un enlace para instalar Firebug para Firefox http://getfirebug.com
Acceso directo para abrir la herramienta de desarrollo en el sistema operativo Windows es F12 tecla del
teclado.
Cmo depurar cdigo JS en el depurador:

Hay dos maneras de depurar cdigo JavaScript
La colocacin de console.log () en el cdigo y ver el valor del registro que se imprimir en la consola de la
herramienta de desarrollo.
El uso de puntos de interrupcin en la herramienta de desarrollo:
o Abra el archivo en entre todas las secuencias de comandos disponibles bajo etiqueta de script
o Ahora coloque un punto de interrupcin en la lnea que desea depurar
o Ejecutar la aplicacin en el navegador
o Ahora cada vez que el flujo de cdigo llegar a esta lnea se romper el cdigo y permanecer all
hasta que el usuario ejecute el cdigo de teclas F6 (pase a la siguiente lnea de cdigo), F7 (ir
dentro de la funcin) o F8 (ir al siguiente punto de interrupcin o ejecutar el cdigo si no hay ms
puntos de interrupcin) en base al flujo desea depurar.
o Se puede seleccionar la variable o la funcin que desee ver el valor de.
o Puede utilizar la consola para comprobar el valor o para comprobar algunos cambios en el propio
navegador.
Ext.js - Mtodos
A continuacin se presentan algunas funciones incorporadas que se utilizan sobre todo en Ext JS:
Ext.is clase:
Esta clase comprueba la plataforma que est utilizando, si se trata de un telfono o de escritorio, un
sistema operativo Windows o Mac. Estos son los siguientes mtodos relacionados con la clase Ext.is
1 Ext.is.Platforms
Esta funcin devuelve la plataforma disponible para esta versin.
Por ejemplo Cuando se ejecuta la siguiente funcin devuelve algo como esto:
[Object { property="platform", regex=RegExp, identity="iPhone"}, Object {

property="platform", regex=RegExp, identity="iPod"}, Object {
property="userAgent", regex=RegExp, identity="iPad"}, Object {
property="userAgent", regex=RegExp, identity="Blackberry"}, Object {
property="userAgent", regex=RegExp, identity="Android"}, Object {
property="platform", regex=RegExp, identity="Mac"}, Object {
property="platform", regex=RegExp, identity="Windows"}, Object {
property="platform", regex=RegExp, identity="Linux"}]
2 Ext.is.Android
Esta funcin devolver cierto si usted est utilizando el sistema operativo Android si no
devuelve falso.
36
3 Ext.is.Desktop
Esta funcin devolver verdadero si est utilizando una computadora de escritorio para la
aplicacin de lo contrario devuelve false.
4 Ext.is.Phone
Esta funcin devolver verdadero si est utilizando una cosa mvil devuelve falso.
5 Ext.is.iPhone
Esta funcin devolver verdadero si est utilizando iPhone si no devuelve falso.
6 Ext.is.iPod
Esta funcin devolver verdadero si est utilizando el iPod si no devuelve falso.
7 Ext.is.iPad
Esta funcin devolver verdadero si est utilizando el iPad si no devuelve falso.
8 Ext.is.Windows
Esta funcin devolver verdadero si est utilizando las ventanas del sistema si no
devuelve falso operativo.
9 Ext.is.Linux
Esta funcin devolver cierto si usted est utilizando el sistema operativo Linux si no
devuelve falso.
10 Ext.is.Blackberry
Esta funcin devolver verdadero si est utilizando Blackberry si no devuelve falso.
11 Ext.is.Mac
Esta funcin devolver verdadero si est utilizando el sistema operativo Mac si no

devuelve falso.
Ext.supports clase:
Como su nombre lo indica esta clase da informacin acerca de la funcin es compatible con el
navegador / dispositivo de medio ambiente o no, bsicamente actual.
37
1 Ext.supports.History
Esto devuelve el valor booleano basado en el dispositivo es compatible con HTML 5, como
la historia window.history o no. Si el dispositivo es compatible con la historia a
continuacin, devuelve verdadero otra cosa falsa.
2 Ext.supports.GeoLocation
Este retorno el valor booleano basado en el dispositivo compatible con el mtodo de

geolocalizacin o no. Internamente se comprueba navigator.geolocation mtodo.
3 Ext.supports.Svg
Este retorno el valor booleano en funcin del dispositivo en el mtodo de HTML 5 funcin
de grficos vectoriales escalables (SVG) o no es compatible. Internamente se comprueba
doc.createElementNS && doc.createElementNS !! ( "http: /" + "/www.w3.org/2000/svg",
"SVG") createSVGRect..
4 Ext.supports.Canvas
Este retorno el valor booleano basado en el dispositivo es compatible con HTML 5 lienzo
funcin para dibujar mtodo o no. Internamente se comprueba doc.createElement (
'lienzo'). GetContext y valor de retorno basado en la salida de este mtodo.
5 Ext.supports.Range
Esto devuelve el valor booleano basado en el navegador compatible con el mtodo

document.createRange o no.
Ext.String clase:
Ext.String clase tiene varios mtodos para trabajar con datos de cadena, el mtodo ms utilizado a
codificar decodificacin, Trim, de palanca, EyC urlAppend.
La codificacin de la funcin de decodificacin: Estas son las funciones disponibles en la clase

Ext.String para codificar y decodificar los valores HTML.
1 Ext.String.htmlEncode
Esta funcin se utiliza para codificar el valor del HTML para que sea apta para su
procesamiento.
E.g. Ext.String.htmlEncode("< p > Hello World < /p >");

Output - "< p > Hello World < /p >".
2 Ext.String.htmlDecode
Esta funcin se utiliza para decodificar el valor codificado html
38
E.g. Ext.String.htmlDecode("< p > Hello World < /p >");
Output - "< p > Hello World < /p >"
3 Ext.String.trim
Esta funcin es para recortar el espacio deseado en la cadena.
Por ejemplo Ext.String.trim ( 'hola');
Salida - "hola"
4 Ext.String.urlAppend
Este mtodo se utiliza para aadir valor en la cadena de URL
Por ejemplo Ext.String.urlAppend ( 'https://www.google.com', 'hola');
Salida - "https://www.google.com?hello"
Ext.String.urlAppend ( 'https://www.google.com?index=1', 'hola');
Salida - "https://www.google.com?index=1&hello"
5 Ext.String.toggle
Esta funcin es para cambiar el valor entre dos valores diferentes.
Por ejemplo, var toggleString = 'ASC'
toggleString = Ext.String.toggle (a, 'ASC', 'DESC');
Salida - DESC como toggleString tena valor ASC. Ahora de nuevo si es la impresin de la
misma obtendremos toggleString = "ASC", esta vez, ya que tena un valor 'DESC'.
Es similar al operador ternario
toggleString = ((toggleString == 'ASC') 'DESC':? 'ASC');
Varios mtodos
1 Ext.userAgent ()
Esta funcin proporciona informacin sobre userAgent navegador. El agente de usuario es

identificar el navegador y el sistema operativo en el servidor web.
Por ejemplo, si se est trabajando en Mozilla vuelve algo como: "Mozilla / 5.0 (Windows
NT 6.1; wow64; rv: 43.0) del Gecko / 20100101 Firefox / 43.0"
2 funcin relacionada con la versin
Estos funcin devuelve la versin del navegador actualmente en uso si se invoca la
39
funcin relacionada con el IE en el navegador Firefox se devolver 0. Estas funciones son
Ext.firefoxVersion, Ext.ieVersion etc.
Por ejemplo, si estamos utilizando el navegador Firefox y lo llamamos mtodo

Ext.ieVersion para ir a buscar la versin de IE a continuacin, devuelve 0 o si estamos
usando el mismo mtodo en el navegador Internet Explorer luego volver la versin que
estamos utilizando como 8,9, etc.
3 Ext.getVersion ()
Esta funcin devuelve la versin actual Ext JS en uso.
Por ejemplo, si llamamos Ext.getVersion () que devuelve un conjunto de valores como la

versin, versin corta, etc.
Ext.getVersion (). Versin devolver la versin actual de Ext JS utilizado en el programa

como "4.2.2".
4 funciones relacionadas con el navegador
Estos funcin devuelve valores booleanos basado en el navegador en uso. Este mtodo
son Ext.isIE, Ext.isIE6, Ext.isFF06, Ext.isChrome.
Por ejemplo, si estamos utilizando el navegador Chrome cual debern funcionar

Ext.isChrome devolver true todos los dems volvern falsa.
5 Ext.typeOf ()
Esta funcin devuelve el tipo de datos de la variable tal como
E.g. var a = 5;
var b = 'hello';
Ext.typeOf(a);
Output Number
Ext.typeOf(b);
Output - String
6 Mtodos relacionados Tipo de datos: Estos funcin devuelve el valor booleano basado en
el tipo de datos de la variable.
E.g. var a = ['a', 'bc'];

var b = 'hello';
var c = 123;
var emptyVariable;
var definedVariable;
function extraFunction(){return true;}
Ext.isArray (a); // Devuelve true
Ext.isString (b); // Devuelve verdadero
40
Ext.isNumber (c); // Devuelve verdadero
Ext.isEmpty (emptyVariable); // Devuelve verdadero
Ext.isEmpty (b); //falso retorno
Ext.isDefined (definedVariable); // Devuelve verdadero
Ext.isfunction (extraFunction); // Devuelve verdadero
41

ExtJS Tutorial PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

ExtJS Tutorial PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

ExtJS Tutorial

Ejecutar ExtJS Online

1. Agiliza el desarrollo multiplataforma en sistemas de escritorio, tabletas y telfonos inteligentes - tanto

Sencha IDE Plugins

La configuracin local para el Medio Ambiente

La descarga de archivos de la biblioteca

Descomprimir la carpeta y se encuentran varios archivos JavaScript y CSS que se va a incluir en

Estos archivos de la biblioteca se aadirn en una aplicacin Ext JS de la siguiente manera:

Ext.js - convencin de nomenclatura

Convencin de nomenclatura en Ext JS sigue la convencin de JavaScript estndar que no es

Debera siguiente sintaxis caso de camellos de denominacin de la clase, mtodo, variable y

Nombre constante Debe estar en maysculas ejemplo COUNT, MAX_VALUE

MVC - la arquitectura Modelo Vista Controlador (versin 4)

MVVM - Modelo Vista ViewModel (versin 5)

Estructura del proyecto Con Ext JS App

En MVVM controlador de la arquitectura se sustituye por modelo de vista.

Ext.js - Primer Programa

Ext.Panel es la clase predefinida en Ext JS para la creacin de un panel.

Ext.Panel clase tiene varias propiedades como:

Ttulo de propiedad es proporcionar el ttulo al panel.

Html propiedad es el contenido HTML que se muestra en el panel.

Ext.define () se utiliza para definir clases en Ext JS.

Ext.define(class name, class members/properties, callback function);

Las propiedades de clase / miembros - que definen el comportamiento de la clase.

Funcin de devolucin es opcional. Se llama cuando la clase ha cargado correctamente.

Ejemplo de definicin de clase Ext JS

Diferentes formas de crear objetos en Ext JS-

Utilizando la nueva palabra clave:

var studentObject = new student();

Herencia en el principio de utilizar la funcionalidad definida en la clase A en la clase B.

Mixins es la diferente forma de utilizar la clase A en clase B sin extender.

2 Contenedor dentro del contenedor

Hay varios tipos de contenedores Ext.panel.Panel, Ext.form.Panel, Ext.tab.Panel y

SN Tipo de Contenedores y Descripcin

Este ejemplo muestra un recipiente Ext.panel.Panel

Este ejemplo muestra un recipiente Ext.form.Panel

Este ejemplo muestra un recipiente Ext.tab.Panel

Este ejemplo muestra un recipiente Ext.container.Viewport

Esta disposicin permite posicionar los elementos mediante coordenadas XY en el

En este diseo de varios paneles estn anidados y separadas por fronteras.

En este diseo se organiza diferentes componentes de la moda pestaa. Las pestaas se

Como su nombre lo indica este diseo ordena los componentes en un recipiente en el

widget de formulario es para obtener los datos del usuario.

Los grficos se utilizan para representar datos en formato pictrico.

Punta de la herramienta se utiliza para mostrar informacin bsica cuando se produce

Para mostrar el progreso del trabajo de back-end.

var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {

Adicin de arrastre y destino de colocacin clase para drappable objetivo

var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {

Agregue el siguiente CSS a utilizar el tema de Neptuno:

Para ver el efecto, probar el siguiente programa:

Esto producir siguiente resultado:

Agregue el siguiente CSS a utilizar el tema de Neptuno:

Para ver el efecto, probar el siguiente programa:

Agregue el siguiente CSS a utilizar el tema de Tritn:

Para ver el efecto, probar el siguiente programa:

Agregue el siguiente CSS a utilizar el tema de Gray:

Para ver el efecto, probar el siguiente programa:

Ext.js - Eventos personalizados y oyentes

Mtodos de eventos de escritura:

Construido en eventos utilizando los oyentes

Escribiendo oyente en Ext JS

De esta manera podemos escribir mltiples eventos tambin en la propiedad oyentes.