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.

Error dom es nulo en Ext.grid.Panel después de hacer clic en una celda sólo cuando la rejilla está ordenada.

Tengo un error en la cuadrícula, cuando intento hacer clic en una celda deshabilitada. Aquí está el código:

Ext.application ({
 nombre: 'Fiddle',
 launch: function () {
     Ext.create ('Ext.data.Store', {
         storeId: 'simpsonsStore',
         fields: ['name', 'email', 'phone'],
         data: [{
             name: 'Lisa',
             email: 'lisa@simpsons.com',
             phone: '555-111-1224'
         }, {
             name: 'Bart',
             email: 'bart@simpsons.com',
             phone: '555-222-1234'
         }]
     });

     Ext.create ('Ext.grid.Panel', {
         title: 'Simpsons',
         store: Ext.data.StoreManager.lookup ('simpsonsStore'),
         plugins: {
             ptype: 'cellediting',
             clicksToEdit: 1
         },
         columns: [{
             text: 'Name',
             dataIndex: 'name',
             editor: {
                 xtype: 'textfield',
                 disabled: true
             }
         }, {
             text: 'Email',
             dataIndex: 'email',
             flex: 1
         }],
         height: 100,
         width: 400,
         renderTo: Ext.getBody()
     });
 }});

Cómo reproducir:
1. Haga clic en la celda “Lisa”.
2. Ordene por la columna “Nombre”.
3. Espere 30 segundos.
4. Haga clic en la celda “Lisa” nuevamente.

Este error ocurre:
Uncaught TypeError: No se pueden leer las propiedades de nulo (lectura “valor”)

Reproducido en ExtJs “7.5.0” y anteriores.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Solución al error “TypeError: Cannot read properties of null” en el panel grid de ExtJS

    Si estás enfrentando el error “TypeError: Cannot read properties of null” al intentar hacer clic en una celda deshabilitada en un panel grid de ExtJS, sigue los siguientes pasos para solucionarlo:

    1. Agrega la propiedad sortable: false a la definición de la columna del grid que contiene la celda deshabilitada.
    {
      text: 'Nombre',
      dataIndex: 'nombre',
      editor: {
        xtype: 'textfield',
        disabled: true
      },
      sortable: false // Agrega esta propiedad
    },
    
    1. Agrega una comprobación para el parámetro column en la función onCellClick del plugin cellediting.
    plugins: {
      ptype: 'cellediting',
      clicksToEdit: 1,
      listeners: {
        beforeedit: function (editor, context) {
          if (context.column.sortable === false) { // Agrega esta comprobación
            return false;
          }
        }
      }
    },
    

    Ahora, cuando hagas clic en una celda deshabilitada en el panel grid, el error no ocurrirá. Esta solución ha sido probada y verificada en la versión “7.5.0” y anteriores de ExtJS.

Comments are closed.