1 El panel de cuadrícula más fácil
El panel de la cuadrícula es una de las partes centrales de los extjs, y los datos se pueden mostrar, ordenar, agruparse y editarse a través del panel de cuadrícula. El modelo y el almacén son el núcleo de los datos de procesamiento del panel de cuadrícula, y cada panel de cuadrícula debe configurar el modelo y almacenar. Para crear un panel de cuadrícula, primero debe definir el modelo. El modelo incluye todos los campos que el panel de la cuadrícula necesita mostrar, que es equivalente a una colección de campos de tabla en la base de datos. La tienda puede considerarse como una colección de una fila de datos o una colección de instancias modelo. Cada tienda contiene una o más instancias de modelo, y los datos que muestran el panel de la cuadrícula se almacenan en la tienda. El panel de cuadrícula obtiene datos a través de la tienda y los muestra, mientras que la tienda lee y guarda datos a través del proxy.
A continuación se muestra un panel de cuadrícula para mostrar la información básica del usuario, incluido el nombre de usuario, el correo electrónico, el número de teléfono móvil (nombre, correo electrónico, teléfono), y primero crear un modelo de usuario (modelo de usuario).
Ext.define ('user', {extender: 'ext.data.model', campos: ['nombre', 'correo electrónico', 'teléfono']});A continuación, cree una tienda, que es una colección de usuarios, incluidas múltiples instancias de usuario.
var userStore = Ext.create('Ext.data.Store', { model: 'User', //User Model data just created: [ { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' }, { name: 'Bart', email: '[email protected]', phone: '555-222-1234' }, {Nombre: 'Homer', correo electrónico: '[email protected]', teléfono: '555-222-1244'}, {nombre: 'marge', correo electrónico: '[email protected]', teléfono: '555-222-1254'}]});Después de crear tanto el modelo como la tienda, puede crear un panel de cuadrícula.
Ext.create ('ext.grid.panel', {rendererto: ext.getBody (), store: userStore, // bing the store width: 400, altura: 200, título: 'usuarios de aplicaciones', columnas: [{text: 'name', width: 100, sortable: false, oculto: falso, duraineDex. Modelo}, {texto: 'dirección de correo electrónico', ancho: 150, dataindex: 'correo electrónico', oculto: true}, {texto: 'número de teléfono', flex: 1, dataindex: 'phone'}]});El último panel de cuadrícula de usuario se muestra en la figura.
2 agrupación de datos de panel de cuadrícula (agrupación)
Mientras la propiedad Groupfield se establezca en la tienda, se pueden agrupar los datos que muestran el panel de la cuadrícula. Supongamos que la compañía tiene muchos empleados y necesita agrupar a los empleados de la compañía por departamento en el panel de la red. Primero, coloque la propiedad de Groupfield en el departamento de la tienda.
Ext.create ('ext.data.store', {modelo: 'empleado', datos: ..., groupfield: 'departamento' // establece datos agrupados por el departamento});Luego agregue la función de agrupación al panel de la cuadrícula para lograr el efecto de visualización de agrupación.
Ext.create ('ext.grid.panel', {... características: [{ftype: 'agrupar'}]});El efecto de visualización del grupo se muestra en la figura a continuación. Haga clic aquí para ver el código de visualización del grupo oficial.
Pantalla de paginación de 3 paneles de cuadrícula
Cuando hay más datos y más páginas para mostrar, los datos deben mostrarse. El panel de la cuadrícula puede realizar una pantalla de paginación a través de dos métodos: barra de herramientas de paginación y desplazamiento de paginación. La barra de herramientas de paginación tiene la página anterior/los botones de la página siguiente. Paging Scroller carga dinámicamente datos cuando el panel de la cuadrícula se desplaza hacia la parte inferior.
Para implementar la pantalla de paginación, primero debe establecer la tienda para admitir la paginación. Establezca páginas en la tienda. La página predeterminada es 25. Establezca el número total de datos en el lector TotalProperty, y las paginas del complemento de paginación según PageSize y TotalProperty. El siguiente código se establece en 4, y TotalProperty se obtiene de los datos JSON devueltos.
Ext.create ('ext.data.store', {modelo: 'user', autoload: true, pageSize: 4, // Establezca el número de datos que se muestran por página proxy: {type: 'ajax', url: 'data/users.json', lector: {type: 'json', raíz: 'usuarios', // especificar qué propiedad de JSON a obtener datos a obtener datos. Atributo relacionado de JSON: 'Total' // Cantidad total de datos}}});Suponga que el formato de datos JSON es el siguiente
{"éxito": true, "total": 12, "usuarios": [{"nombre": "lisa", "correo electrónico": "[email protected]", "teléfono": "555-111-1224"}, {"nombre": "bart", "correo electrónico": "[email protected]", "Teléfono": "555-222-1234" "Bart", "" "Nombre": "Nombre:": ":" Teléfono ":" 555-22221234 "" "" "Nombre", "" Nombre ":" "". "Home", "Correo electrónico": "[email protected]", "teléfono": "555-222-1244"}, {"nombre": "marge", "correo electrónico": "[email protected]", "teléfono": "555-222-1254"}]}Se ha establecido la paginación de la tienda. La función de paginación de la barra de herramientas de paginación se implementa en el panel de la cuadrícula.
Ext.create ('ext.grid.panel', {store: userStore, columnas: ..., dockedItems: [{xtype: 'Pagingtoolbar', // Agregar tienda de herramientas de la barra de paginación: userStore, // Establezca la tienda Paging Toolbar al mismo que el Docke de la tienda del panel de la cuadrícula: 'Bottom Bottom', DisplayInfo: True}]});El efecto de paginación de la barra de herramientas de paginación se muestra en la figura a continuación. Haga clic aquí para ver el código oficial de función de paginación de la barra de herramientas de la barra de paginación.
La implementación de la paginación del desplazador de paginación es relativamente simple. Simplemente establezca el siguiente código en el panel de la cuadrícula. Haga clic aquí para ver el código de función oficial de paginación del desplazamiento de paginación.
Ext.create ('ext.grid.panel', {// use el complemento de scroller de paginación el complemento de la paginación verticalScroller: 'PagingGridScroller', // no restablece la barra de desplazamiento cuando la vista actualiza InvalidatesCrolleronRefresh: false, // El desplazamiento infinito no es compatible4 panel de cuadrícula Agregue la casilla de verificación
Simplemente configure la propiedad Selmodel del panel de la red en ext.selection.CheckboxModel, haga clic aquí para ver el ejemplo de código oficial.
Ext.create ('ext.grid.panel', {selModel: ext.create ('ext.selection.checkboxmodel'), // Establecer el modo de selección del panel de cuadrícula en la casilla de verificación almacena: userStore, columnas: ...});5 Ejemplos completos
var grid = new Ext.Grid.GridPanel ({store // Fuente de datos cm //ext.grid.columnmodel columnas // Las funciones son las mismas que ext.grid.columnmodel. Solo tengo una con cm autowidth: verdadero ancho de ancho: columnas falsas: verdadero: verdadero, renderto // muestra el div tag animcoll Efecto de animación (el valor predeterminado es verdadero, cuando la clase Ext.fx está disponible). DisplayInfo: true, // documento fuente DisplayInfo: true, // documentAmsg: 'Mostrar los registros de {0} a {1}, un total de {2}', showymsg: 'no registro'}), tbar: [{text: 'consulty', icon: '/comercial/images/delete.gif', cls: 'x-btn-t-t-tex-icon', Handler: function () {win.show ();}}}) // *********************************************** // Pagingtoolbar Paging // pasando a la ubicación de la consulta de los datos del servidor, limite cuántos elementos a consulta // clasificación // sort de servidor, dir // **************************************************** Var com = nuevo ext.columnmodel (newmodel (NEWMODEK******************************************* Ext.grid.RowNumberer(), {header: "Customer ID", width: 50, sortable: true, dataIndex: 'memid'}, {header: "Customer Name", width: 75, sortable: true, dataIndex: 'memName'}, {header:'Secret No.', width:50, dataIndex:'sex', align:'center', sortable:true, renderer: function (v) {return (v == '1' ')?' <img src = "images/user_suit.png"> ':' <img src = "images/user_female.png"> ';}} {encabezado:' número de seguimiento ', ancho: 150, duraineDex. dataindex: 'kd_time'}]); /******************************************************************************************/ EditorGridPanel chickToEdit:1 //Number of clicks ColumnModel editor:new Ext.form.TextField({ }) //Get modified data var storeEdit = grid.getStore(); // var modificado = storeedit.modified.slice (0); // ext.each (modificado, función (m) {alerta (m.data.id); // Los datos están en m.data e id es el nombre de campo}) // Obtener datos de cuadrícula var selmodel = grid.getSelectionModel (); Obtener registro VAR de modo de selección; if (! SelModel.hasselection ()) {ext.msg.alert ('advertencia', 'por favor seleccione la fila a modificar!'); devolver; } selModel.getSelections (). Longitud; // número de filas seleccionadas registro = selModel.getSelected (); // Obtener datos de filas seleccionadas(1) Obtener datos:
Línea única
id = registro.get ('id');o
id = registro.data.id;
Múltiples líneas
registrar [i] .get ('ddd')(2) Eliminar datos:
var obj = grid.getSelectionModel (). getSelected (); store.remove (OBJ); grid.getView (). refresh ();
(3) Consulta
store.baseParams ['memid'] = fb.form.findfield ('memid'). getValue (); store.baseParams ['inicio'] = 0; store.load ();(4) Agregue una fila:
Ext trae un complemento
Requiere archivo RowExPander.js
var expande = new Ext.ux.grid.roweSpander ({tpl: new Ext.template ('<p> {dirección} </p>')});Agregue expandir a las columnas de la cuadrícula,
Y agregar complementos: expandir al atributo de la cuadrícula