JSFiddle - React, Tailwind, and code Playground

JavaScript

Ext.onReady(function(){
  var _idGen = 1,
      _outerIdGen = 1;
  var childItems = [], items = [];

  for (var i = 0; i < 9; i++) {
    childItems.length = 0;
    for (var j = 0; j < 9; j++) {
       childItems.push({
           xtype: 'panel',
           itemId: 'inner-'+_idGen++,
           html: _idGen + "",
           width: 50,
           height: 50,
           style: {margin: '1px',borderColor: 'white',backgroundColor:'cornflowerblue'}
       });
    }
    items.push({
        xtype: 'panel',
        layout: {
            type: 'table',
            columns: 3
        },
        itemId: 'outer-'+_outerIdGen++,
        items: childItems
    });
  }
  Ext.create('Ext.container.Container', {
     layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
     },
     renderTo: Ext.getBody(),    
     style: {width: '455px',marginLeft: 'auto',marginRight: 'auto', marginTop: '30px'},
     items: items,
      test: function(e) {if(e.isSpecialKey())console.log(new Ext.EventObjectImpl(e))},
      listeners: {
          afterrender: function(p){
           p.mon(Ext.getDoc(), Ext.EventManager.getKeyEvent(), p.test, p);
          }
          
      }
  });
  console.log(Ext.ComponentQuery.query('container > panel[itemId=outer-1] > panel[itemId=inner-73]')[0]);
});