es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar uno a varios registros en una cuadrícula de datos.

18 Jun, 2023 Programación

Puedes verificar si alguien tiene alguna solución para mostrar varias filas de los registros.

Modelo de Estudiante
– nombre
– estudianteid
– dirección

Ext.define('Estudiante',{
  extend: 'Ext.data.Model',
  requires: [
    'Ext.data.field.Field'
  ],
  uses: [
    'Curso'
  ],
  fields: [
    {
      mapping : 'nombre',
      name: 'nombre'
    },
    {
      mapping : 'estudianteid',
      name: 'estudianteid'
    },
    {
      mapping : 'dirección',
      name: 'dirección'
    }
  ],
  hasMany: {
    associatedName: 'Curso',
    model: 'Curso',
    name: 'Curso'
  }
});

Modelo de Curso
– idecurso
– nombrecurso
– codigocurso

Ext.define('Curso', {
  extend: 'Ext.data.Model',
  requires: [
    'Ext.data.field.Field'
  ],
  uses: [
    'Estudiante'
  ],
  fields: [
    {
      mapping: 'Estudiante.idecurso',
      name: 'idecurso'
    },
    {
      mapping: 'Estudiante.nombrecurso',
      name: 'nombrecurso'
    },
    {
      mapping: 'Estudiante.codigocurso',
      name: 'codigocurso'
    },
  ],
  belongsTo: {
    associatedName: 'Estudiante',
    model: 'Estudiante',
    name: 'Estudiante'
  }
});

A continuación se muestran los registros de datos

{
“nombre”: “John”,
“estudianteid”: “122”,
“dirección”: “111 XXX Road” ,
“curso”: [
{
“idecurso”:”1″,
“nombrecurso”:”Math”,
“codigocurso”:”MATH1″
},
{
“idecurso”:”2″,
“nombrecurso”:”English”,
“codigocurso”:”ENG1″
},
{
“idecurso”:”3″,
“nombrecurso”:”Science-Chemistry”,
“codigocurso”:”CHEMI”
}
]
}

Deseo mostrar los detalles del curso en una cuadrícula como se muestra a continuación

CÓDIGO DE CURSO NOMBRE DEL CURSO

1 MATH1 Matemáticas
2 ENG1 Inglés
3 CHEMI Química

Actualmente sólo puedo mostrar una fila en la cuadrícula basada en el renderizador

columns:[
{
xtype: ‘gridcolumn’,
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return record.course().first().get(‘codigocurso’);
},
dataIndex: ‘curso.codigocurso’,
text: ‘Código de curso’
},
{
xtype: ‘gridcolumn’,
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return record.course().first().get(‘nombrecurso’);
},
dataIndex: ‘curso.nombrecurso’,
text: ‘Nombre del curso’
},
]

El resultado actual es este:

CÓDIGO DE CURSO NOMBRE DEL CURSO

1 MATH1 Matemáticas

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar múltiples filas de los registros, podemos utilizar las características de la cuadrícula como agrupación, resumen de agrupación o cuadrículas anidadas.

    Un enfoque podría ser utilizar una cuadrícula anidada donde podemos mostrar los detalles de los cursos para cada estudiante en una fila separada de la subcuadrícula.

    Primero, necesitamos definir un componente de subcuadrícula y una tienda asociada para los datos de los cursos:

    Ext.define('CourseGrid', {
    extend: 'Ext.grid.Panel',

    xtype: 'coursegrid',

    columns: [
        { text: 'Código del Curso', dataIndex: 'coursecode' },
        { text: 'Nombre del Curso', dataIndex: 'coursename' }
    ],

    bind: {
        store: '{courses}'
    }
});

Ext.define('Course', {
    extend: 'Ext.data.Model',

    fields: [
        { name: 'courseid', type: 'int' },
        { name: 'coursename', type: 'string' },
        { name: 'coursecode', type: 'string' },
        { name: 'studentid', type: 'int' }
    ],

    proxy: {
        type: 'memory'
    }
});

Ext.create('Ext.data.Store', {
    storeId: 'courses',
    model: 'Course'
});

    Luego, podemos modificar la Cuadrícula de Estudiantes para incluir un complemento de expansor de fila que renderiza la subcuadrícula para cada registro de estudiante:

    Ext.define('StudentGrid', {
    extend: 'Ext.grid.Panel',

    xtype: 'studentgrid',

    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl: '<coursegrid></coursegrid>',
        expandOnDblClick: false
    }],

    columns: [
        { text: 'Nombre', dataIndex: 'name' },
        { text: 'ID del estudiante', dataIndex: 'studentid' },
        { text: 'Dirección', dataIndex: 'address' }
    ],

    bind: {
        store: '{students}'
    },

    items: [{
        xtype: 'coursegrid',
        hidden: true
    }]
});

Ext.define('Student', {
    extend: 'Ext.data.Model',

    fields: [
        { name: 'name', type: 'string' },
        { name: 'studentid', type: 'int' },
        { name: 'address', type: 'string' }
    ],

    associations: [{
        type: 'hasMany',
        model: 'Course',
        name: 'courses',
        foreignKey: 'studentid'
    }]
});

Ext.create('Ext.data.Store', {
    storeId: 'students',
    model: 'Student'
});

    Ahora, la cuadrícula mostrará cada registro de estudiante con una subcuadrícula anidada que muestra los detalles de los cursos.

    Tenga en cuenta que esta es solo una manera de abordar este problema y puede haber otras soluciones según los requisitos y limitaciones específicos del proyecto.

Comments are closed.