Introducción a las características de las tablas en extjs
La tabla está definida por la clase ext.grid.gridpanel, heredada de ext.panel, y el xtype es cuadrícula
La información de la columna de la tabla se define por Ext.Grid.ColumnModel
El almacenamiento de datos de la tabla se define por Ext.Data.Store. Según los diferentes datos analíticos, el almacenamiento de datos se puede dividir en los siguientes tipos:
Jsonstore, SimpleStore, GroupingStore ...
El proceso de escritura básica de una tabla:
1. Cree un modelo de columna de tabla
var cm = new Ext.Grid.ColumnModel ({{Header: 'role', dataindex: 'role'}, {header: 'nivel', dataindex: 'grado'}, {header: 'create date', dataindex: 'creatiate', type: 'date', renderer: ext.util.format.daterenderer ('yway mes mun. datos});2. Cree una matriz de datos
var data = [['Soldier', '7', '2011-07-2412: 34: 56'], ['General', '10', '2011-07-2412: 34: 56'],];
3. Cree un almacén de objetos de almacenamiento de datos, que contiene dos partes: proxy, la forma de obtener datos; lector, la forma de analizar los datos
El mapeo de ArrayReader se usa para establecer el orden de las columnas
var store = new Ext.Data.store ({proxy: new Ext.Data.MemoryProxy (data), lector: new Ext.Data.ArrayReader ({}, [{name: 'rol', mapeo: 1}, {nombre: 'grado', mapeo: 0} {name: 'creatado', mapeo: 2, type: date: DateFormat: 'YM-DH: I: S'} // Crear columna de fecha y formato de visualización])}); store.load ();4. Cree una gridpanel, ensamble la columna y almacena
var grid = new Ext.Grid.GridPanel ({renderto: 'Grid', Store: Store, CM: CM});Además, puede usar scripttagproxy para obtener datos remotos, como se muestra a continuación
var store = new Ext.Data.store ({proxy: new Ext.Data.ScriptTagProxy ({url: 'http: // ...'}), lector: new Ext.Data.Arrayreader ({}, [{name: 'rol', mapeo: 1}, {name: 'grado', mapping: 0}], orthinfo: {{{CHANDE: {CHONDE: { Dirección: "ASC"} // Establezca la secuencia de clasificación predeterminada, ASC/Desc});Propiedades comunes de las tablas
var grid = new Ext.Grid.GridPanel ({EnlecolumnMove: False, // Las columnas de arrastrar y soltar están prohibidas para ser habilitado. var cm = new Ext.Grid.ColumnModel ({{Header: 'role', dataindex: 'role', width: 90, sortable: true}, // width establece el ancho de columna, el valor predeterminado es 100px, se establece la función de clasificación {id: 'grado', encabezado: 'nivel', datainDex: 'grado', width: 40}}}}; Ext.grid.gridpanel ({rendererto: 'grid', store: store, cm: cm viewConfig: {// Deja que cada columna llene automáticamente el formulario ForceFit: true} autoexpandcolumn: 'grado' // extender automáticamente la columna, la identificación de la columna se define en la columnaModel});Renderizar tablas y establecer estilos especiales para tablas
Simplemente agregue un atributo de renderizador a CM y agregue una función personalizada para representar el estilo de los parámetros pasados (aprobados automáticamente por ext), es decir, ensamble los eventos de respuesta HTML, CSS o JS correspondientes antes de devolver el valor.
función renderSex (valor) {if (valor == 'macho') {return "<span style = 'color: blue;'> macho </span> <img src = 'images/icon_male.png'/>"; } else {return "<span style = 'color: rojo;'> femenino </span> <img src = 'images/icon_female.png'/>"; }}var cm = new Ext.grid.ColumnModel([ {header:'id',dataIndex:'id'}, {header:'name',dataIndex:'name'}, {header:'sex',dataIndex:'sex',renderer:renderSex},]);var data = [ ['1','Jason','male'], ['2', 'kate', 'femenino']]]; var store = new ext.data.store ({proxy: new ext.data.memoryProxy (data), lector: new Ext.Data.ArrayReader ({}, [{nombre: 'id'}, {nombre: 'nombre'}, {name: 'Sex'}])}); Ext.grid.gridpanel ({autoHeightIight: true, renderto: 'grid', store: store, cm: cm});Muestre automáticamente los números de línea, simplemente cree un tosco al crear CM
var cm = new Ext.Grid.ColumnModel ([new Ext.Grid.Rownumberer (), // Show Line Numbers {Header: 'id', dataindex: 'id'}, {header: 'name', dataindex: 'name'}, {header: 'sex', dataindex: 'sex', renderer: renderersx},]);Eliminar columnas
store.remove (store.getat (i));
Actualiza la mesa
grid.view.refresh ();
Agregue una casilla de verificación para una mesa
Necesita usar chechboxSelectionModel
SelectionModel SM debe colocarse en CM y tabla cuando se usa
var sm = new Ext.Grid.checkboxSelectionModel (); var cm = new Ext.Grid.ColumnModel ([new Ext.Grid.Rownumberer (), sm, {header: 'number', dataindex: 'id'}, {header: 'name', dataindex: 'name'}]); var data = ['1', 'name 1', ['2', 'name2']]]]; var store = new Ext.Data.store ({proxy: new Ext.Data.MemoryProxy (data), lector: new Ext.Data.arrayReader ({}, [{name: 'id'}, {name: 'name'}])}); store.load (); var grid = new ext.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.grid.griDp AutoHeight: True, Renderto: 'Grid', Store: Store, CM: CM, SM: SM});Solo se selecciona una fila a través de la configuración del Modelo de selección de filas:
var grid = new Ext.Grid.GridPanel ({AutoHeight: true, renderTo: 'Grid', store: store, cm: cm, sm: new ext.grid.rowselectionModel ({singleselect: true})});Use el modelo Seleccionar para obtener datos
grid.on ('click', function () {var selections = grid.getSelectionModel (). getSelections (); for (var i = 0; i <selections.length; i ++) {var registro = selections [i]; ext.msg.alert (registro.get ("id"));}});Vista de mesa
De la idea de MVC, los controles de la tabla:
* Ext.data.Store puede considerarse como un modelo
* Ext.grid.gridpanel puede considerarse como un controlador
* Ext.Grid.GridView se puede ver como una vista
* En general, GridView se genera automáticamente por GridPanel. Si desea establecer las propiedades de GridView, puede obtener la instancia de vista a través de getView () de ext.grid.gridpanel.
Ext.get ('Button1'). On ('Click', function () {Grid.getView (). ScrollTotOp (); Grid.getView (). FocusCell (0, 0); var cell = Grid.getView (). GetCell (0, 0); Cell.Style.BackgroundColor = 'Red';});Use ViewConfig de GridPanel para establecer los parámetros de inicialización de la vista de gridview al crear una tabla
var grid = new Ext.Grid.GridPanel ({Height: 100, Width: 400, RenderTo: 'Grid', Store: New Ext.Data.Store ({Autoload: True, Proxy: New Ext.Data.MemoryProxy (Data), lector: New Ext.Data.ArayReader ({}, Meta)}), Columns: COLUNSS: META, Met. ColumnStext: 'Show Column', // Establezca el text del menú desplegable Scrolloffset: 30, // Establezca el ancho reservado de la barra de desplazamiento en el sortAsctext correcto: 'ascText', // Establezca el menú desplegable El texto de texto Sortdesctext: 'Orden de abajo', // Establezca el menú desplegable de texto Fuerza de texto: True // Extender automáticamente la longitud de cada columna}}});;Agregue una barra de herramientas de paginación a una mesa
* Puede usar la propiedad BBAR de GridPanel y crear el objeto Ext.PagingToolBar Paging Barra
* Tenga en cuenta que si la barra de herramientas de paginación está configurada, store.load () debe ejecutarse después de construir la tabla.
var grid = new Ext.Grid.GridPanel ({rendererto: 'grid', autoHeight: true, store: store, cm: cm, bbar: new ext.pagingtoolBar ({pagesize: 10, // 10 elementos de datos se muestran por página almacena: almacenar, mostrar, mostrarinfo: true, /mostrar información de datos muestes: 'show de {0} {2} ', showymsg: "sin registro" // información que se muestra cuando no hay datos})}); store.load ();Obtener datos de paginación del script de fondo
Use httpproxy para aprobar la solicitud, obtener los datos JSON del servidor y entregarlo a JSONReader para su análisis
var cm = new Ext.grid.ColumnModel([ {header:'number',dataIndex:'id'}, {header:'name',dataIndex:'name'}]);var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'page.jsp'}), reader: new Ext.data.jsonReader ({TotalProperty: 'TotalProperty', root: 'root'}, [{name: 'id'}, {name: 'name'}])}); var grid = nuevo ext.grid.gridpanel ({rendererTo: 'grid', autoHeight: verdadero: // La altura es desconocida antes de los datos, por lo que debe usar la altura de la altura, por lo que se necesita. Store, CM: CM, BBAR: New Ext.PagingToolBar ({PageSize: 10, Store: Store, DisplayFo: True, DisplayMsg: 'Mostrar el {0} a {1} registros/total {2}', vacía: "sin registro"})}); store.load ({params: {start: 0, límite: 10}});Si desea que aparezca la barra de herramientas de paginación en la parte superior de la tabla, puede agregar la barra de herramientas con la configuración de la propiedad TBAR GridPanel.
Deje que los extjs paginen los datos devueltos
* Debe presentar el archivo PagingMemoryProxy.js en el directorio de ejemplos/locales en la página
* Use PagingMemoryProxy para configurar el proxy
var store = new ext.data.store ({proxy: new Ext.Data.PagingMemoryProxy (data), lector: new Ext.Data.ArrayReader ({}, [{name: 'id'}, {nombre: 'nombre'}, {nombre: 'Descn'}])}); // store.load ({params: {inicio: 0, límite: 3}});Uso de EditorGrid con control de mesa editable
Pasos para hacer un editor simple:
1. Defina la columna columnmodel y agregue el atributo del editor a él
var cm = new Ext.Grid.ColumnModel ([{Header: 'Number', dataindex: 'id', editor: new Ext.grid.grideditor (new Ext.Form.textfield ({DESHEINBLANK: false // valor no de entrada en textfield no está permitido})}, {encabezado: 'nombre', datainDex: 'name', editor: editor: nuevo editor: nuevo. Ext.Form.TextField ({DESHEWBLANK: FALSE}))}]);2. Prepare una matriz
var data = [['1', 'Jason'], ['2', 'Jay']];
3. Crear ext.data.store, establecer proxy de memoria y establecer ArrayReader en matrices de análisis
var store = new ext.data.store ({proxy: new Ext.Data.MemoryProxy (data), lector: new Ext.Data.ArrayReader ({}, [{name: 'id'}, {nombre: 'nombre'}])});4. Cargar datos y crear EditorGridPanel
store.load (); var grid = new Ext.Grid.EditorGridPanel ({AutoHeight: true, renderto: 'Grid', store: store, cm: cm});Agregar y eliminar datos para tablas editables
1. Cree un conjunto de registros usando el método de creación de registro MyRecord. Myrecord es equivalente a una clase
var myrecord = ext.data.record.create ([{name: 'id', type: 'string'}, {name: 'name', type: 'string'}]); store.load ();2. Cree el panel EditorGridPanel y cree ext.Toolbar en la propiedad tbar
var grid = new Ext.grid.EditorGridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, tbar: new Ext.Toolbar(['-', { //- means menu separator text: 'Add a row', handler: function(){ var p = new MyRecord({ id:'', name:'' }); grid.stopediting (); Eliminar? ', Funcion (BTN) {if (btn ==' yes ') {var sm = grid.getSelectionModel (); '-'])});Guardar resultados modificados para tablas editables
Basado en el ejemplo anterior, agregue un botón Guardar
texto: 'guardar', manejador: function () {var m = store.modified.slice (0); // Obtenga los datos modificados en el almacén para (var i = 0; i <m.length; i ++) {// Verifique si la información de la tabla es correcta y si contiene espacios var registro = m [i]; VAR FIELDS = RECORD.FIELDS.KEYS; for (var j = 0; j <fields.length; j ++) {var name = Fields [j]; value var = registro.data [nombre]; var colindex = cm.FindColumnIndex (nombre); var rowindex = store.indexofid (registro.id); Var editor = cm.getCellEditor (colindex) .field; if (! editor.ValidateValue (valor)) {ext.msg.alert ('tip', 'verifique si los datos ingresados son correctos!', function () {grid.StarDiting (rowIndex, colindex);}); devolver; }}} var jsonArray = []; Ext.each (m, function (item) {jSonArray.push (item.data); // Ponga los datos modificados en jsonArray}); Ext.lib.ajax.request (// use la solicitud de AJAX para enviar al fondo 'post', 'save_data.jsp', {éxito: function (respuesta) {// return Exit.msg.alert ('información', respuesta.Responsetext, function () {store.Reload ();}); "¡El error de datos guardado en el servidor!");Además, la tienda puede establecer la propiedad PrunemodifiedRecords: True. De esta manera, la tienda borrará automáticamente la etiqueta modificada cada vez que elimina o cargue operaciones, lo que puede evitar el fenómeno de traer toda la información modificada la próxima vez que se envíe.
Limite el tipo de datos de entrada de tabla
Numberfield
{encabezado: 'id', dataindex: 'id', editor: nuevo ext.grid.grideditor (nuevo ext.form.numberfield ({// numberfield Limits que solo se pueden ingresar los números de Iltodblank: false, AlloweGative: false, // No se puede ingresar minus firma maxValue: 10})}Combobox
var combodata = [['0', 'java'], ['1' ',' android ']]; {header:' comboBox ', dataindex:' combo ', editor: nuevo ext.grid.grideditor (new ext.form.combobox ({store: new Ext.Data.Simplestore ({{Fields: [' Value ',' Text '], Data'], Data ', HACUTTATATI 'Seleccione', Modo: 'Local', TriggerAction: 'All', valuefield: 'value', displayfield: 'text', readonly: true})), renderer: function (valor) {return combodata [valor] [1]; }}Campo de fecha
{Header: 'Date', dataindex: 'date', editor: new Ext.grid.grideditor (new Ext.Form.DateField ({format: 'ym-d', minvalue: '2011-07-24', discapacitado día: [0, 6], discapacitadodaystext: 'Seleccione la fecha entre lunes y sábado'})), renderer: function (valor) {devuelve value). }}Uso de PropertyGrid
Es un componente de formulario avanzado más inteligente desarrollado basado en EditorGrid
var grid = new Ext.Grid.PropertyGrid ({Title: 'PropertyGrid', AutoHeight: True, Width: 400, RenderTo: 'Grid', ViewConfig: {ForceFit: True}, fuente: {"String": "String", "Date": New Date (PARSE.PARSE ('07/24/2011 ')), "Boolean": Falso, "Flat": New Date (Fecha (PARSE ('07/24/2011')), " }});Cómo deshabilitar la función de edición de PropertyGrid
grid.on ('antes que la función (e) {e.cancel = true; return false;});Obtener valor de acuerdo con el nombre de la tabla
grid.store.getbyid ('Jason'). Get (valor);Implementar tablas anidadas en extjs
Veamos el efecto primero:
El código es el siguiente:
<! Doctype html public "-// w3c // dtd xhtml 1.0 content = "text/html; charset = utf-8"/> <title> test </title> <script type = "text/javascript"> </script> <link rel = "stylesheet" type = "text/css" href = "lib/extjs/2_2/recursos/css/ext-all.css"/> <script type = "text/javaScript" src = "lib/extjs/2_2/adapter/ext/ext/ext-base.js"> </script> <script type = "text/javaScript" src = "lib/extjs/2_2/ext-all-debug.js"> </script> <script type = "text/javaScript" src = "lib/extjs/2_2/fuente/locale/ext-lang-zh_cn.js"> </script> <script type = "text/javascript" src = "lib/extjs/plus/rowExPANDER.JS"> </script> <script type = "text/javaScript"> ext.onready (function () {var testDatE = [[[ ["Lugreen", "masculino", 26, [["matemáticas", 100], ["chino", 150]]], ["lisi", "masculino", 25, [["matemáticas, 100], [" chino ", 150]]], [" zhangsan "," masculino ", 27, [" matemáticas ", 120], [" chino ", 158]]]] Ext.data.simplestore ({Fields: ["name", "sexo", "edad", "grado"], data: testData}); var expander = new ext.grid.rowexpander ({tpl: new Ext.xtemplate ('<siv>', '', '</div>')}; // encontrar ventana de grid.Testele = Body; = new Ext.Grid.ColumnModel ([{Header: "Artículo", DataIndex: 'class', width: 130, Hidable: false, clasable: false, resizable: true}, {header: "score", dataindex: 'degrade', width: 130, oculto: falso, solible: falso, resenable: true}]); Ext.domQuery.select ("div.detaildata") [0]; Ext.grid.checkboxselectionModel ({singleselect: true}); 130, Hidable: False, Sortable: False, Resizable: True}]); );}); </script> <style type = "text/css">#div2 h2 {font-weight: 200; Font-size: 12px;}. C1 H2 {FONT-Weight: 200;} </ystye> </head> <body> <div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>El "RowExpander.js" utilizado está construido en el ejemplo oficial de extjs.
Hay dos consejos a tener en cuenta al implementar esta tabla anidada:
1. La fuente de datos proporcionada al almacén de datos en la tabla externa representa los datos en el área de detalles en forma de una matriz anidada, como se muestra en BOLD a continuación.
var testData = [["Lugreen", "masculino", 26, [["matemáticas", 100], ["chino", 150]], ["lisi", "masculino", 25, ["matemáticas", 100], ["chino", 150]]], ["zhangsan", "masculino", 27, ["matemáticas", 120], ["chino", 158]]]]]]]
Use el atributo JSON del objeto de registro en la matriz para obtener los datos en detalle
data var = r.json [3];
2. Agregue tablas anidadas en el evento de expansión de RowExpander.