Ext Js es un framework pero eso implica que sea una librería por definición, así que lo primero que tienes que hacer tú que comienzas con Ext es incluir los ficheros de Ext a tu archivo html, o php si hacer desea hacer el render.
Ejemplo:
Código: Seleccionar todo
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="/ext-4.1.1a/resources/css/ext-all.css">
<script src="/ext-4.1.1a/ext-dev.js"></script>
<script src="jquery.js"></script>
<script src = "app.js" ></script>
</head>
<body>
</body>
</html>
Las librerías incluidas te permitirán utilizar Ext JS 4.1 en el fichero app.js, y es en ese fichero donde practicas el modo del framework para hacer aplicaciones web.
Ejemplo:
Código: Seleccionar todo
// para cargar de modo lazy las librerías
Ext.require([
'Ext.grid.Panel',
'Ext.data.Store',
'Ext.data.reader.Xml'
]);
// inicializador de Ext, es como el main, función principal
Ext.onReady(function () {
//modelo
Ext.define('Material',{
extend: 'Ext.data.Model',
fields:[
{name: 'nombre', type: 'string'},
{name: 'mes', type: 'string'},
{name: 'plan', type: 'int'},
{name: 'real', type: 'int'}
]
});
// para cargar los dato desde /tests/materiales.xml, siguiendo el modelo
var materialStore = Ext.create('Ext.data.Store',{
model: 'Material',
proxy: {
type: 'ajax',
url: '/tests/materiales.xml',/*
extraParams: {
isXml: true
},*/
reader: {
type: 'xml',
root: 'materiales',
record: 'material'
}
},
autoLoad: true
});
// para mostrar el modelo
Ext.create('Ext.grid.Panel',{
title: 'Materiales',
store: materialStore,
width: 250,
height: 200,
columns: [
{
text: 'Nombre',
dataIndex: 'nombre'
},
{
text: 'Mes',
dataIndex: 'mes'
},
{
text: 'Plan',
dataIndex: 'plan'
},
{
text: 'Real',
dataIndex: 'real'
}
],
// esencial para que todo aparezca en el render
renderTo: Ext.getBody()
});
});
A continuación, los datos en el fichero materiales.xml:
Código: Seleccionar todo
<materiales>
<material>
<nombre>Acero</nombre>
<mes>Enero</mes>
<plan>34</plan>
<real>12</real>
</material>
</materiales>