Buying EXTJS small programming issue - Closed

Hi

I have a issue with the following
[removed link]

Essentially it is a SQL query builder that allows you to drag tables, and link up the primary keys with each other. It was created in EXT 3, and I converted it to EXT 4 - but in doing so the line connecting the tables together got screwed up. I tried to fix it, but got it linking to the window instead. It is meant to be connecting the data grid row from the drag to the other data grid row on other table.

The file is located here.

[removed link]

The problem is on line 1125. I just don't know how to find the data grid row.

Willing to give $20 for a function (or something fixed in the code) to find the row. So the line will connect from and to the other row instead of the window box.

Thank you . Kind regards,
Lance.

function findComponentByElement(node) {
           var topmost = document.body,
             target = node,
             cmp;
       
           while (target && target.nodeType === 1 && target !== topmost) {
             cmp = Ext.getCmp(target.id);
       
             if (cmp) {
               return cmp;
             }
       
             target = target.parentNode;
           }
       
           return null;
         }
       
 
  if (node) {
           var nodeblah = findComponentByElement(document.getElementById(node.id));

  sqlTable1 = data.view.up('window');
  sqlTable1.shadowSprite.bConnections = true;
 
  sqlTable2 = nodeblah.up('window');
  sqlTable2.shadowSprite.bConnections = true;
 
  dropTable = ux.vqbuilder.sqlSelect.getTableById(sqlTable1.tableId);
  targetTable = ux.vqbuilder.sqlSelect.getTableById(sqlTable2.tableId);
 
  aBBPos = [data.item.viewIndex, node.viewIndex];
         
         
 
  connection = sqlTable2.connection(sqlTable1.shadowSprite, sqlTable2.shadowSprite, "#000", aBBPos);
 
  sqlTable1.connectionUUIDs.push(connection.uuid);
  sqlTable2.connectionUUIDs.push(connection.uuid);
 
  ux.vqbuilder.connections.push(connection);
 
  // bgLine is white(invisible) and its stroke-width is 10
  // so it is easier to capture the dblclick event
  connection.bgLine.el.on('contextmenu', showJoinCM, connection);
 
  // line is black and its stroke-width is 1
  connection.line.el.on('contextmenu', showJoinCM, connection);
 
  // create an instance of the join model
  join = Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLJoin');
  // set join id
  join.set('id', connection.uuid);
  // sqlTable1 is the left table
  join.set('leftTableId', sqlTable1.tableId);
  // data.records[0] represents the model of the dragged node
  join.set('leftTableField', data.records[0].get('field'));
  // sqlTable1 is the left table
  join.set('rightTableId', sqlTable2.tableId);

           var elm = Ext.get(node.id);
  // node.viewIndex is the index of the target node
         
  join.set('rightTableField', sqlTable2.down('grid').store.getAt(elm.getAttribute('data-recordindex')).get('field'));
  // set the defaul join type to INNER
  join.set('joinType', 'INNER');
 
  if (dropTable.get('tableAlias') != '') {
  joinCondition = joinCondition + dropTable.get('tableAlias') + '.' + join.get('leftTableField') + '=';
  }
  else {
  joinCondition = joinCondition + dropTable.get('tableName') + '.' + join.get('leftTableField') + '=';
  }
 
  if (targetTable.get('tableAlias') != '') {
  joinCondition = joinCondition + targetTable.get('tableAlias') + '.' + join.get('rightTableField');
  }
  else {
  joinCondition = joinCondition + targetTable.get('tableName') + '.' + join.get('rightTableField');
  }
 
  join.set('joinCondition', joinCondition);
  ux.vqbuilder.sqlSelect.addJoin(join);
  }

Code (markup):

 

Resolved it myself