//http://www.html580.com
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLTableSprite', {
extend: 'Ext.draw.Sprite',
alias: ['widget.sqltablesprite'],
bConnections: false,
startDrag: function(id){
var me = this, win, sqlTablePanel, xyParentPos, xyChildPos;
// get a reference to a sqltable
win = Ext.getCmp(id);
// get the main sqlTablePanel
sqlTablePanel = Ext.getCmp('SQLTablePanel');
// get the main sqlTablePanel position
xyParentPos = sqlTablePanel.el.getXY();
// get the size of the previously added sqltable
xyChildPos = win.el.getXY();
me.prev = me.surface.transformToViewBox(xyChildPos[0] - xyParentPos[0] + 2, xyChildPos[1] - xyParentPos[1] + 2);
},
onDrag: function(relPosMovement){
var xy, me = this, attr = this.attr, newX, newY;
// move the sprite
// calculate new x and y position
newX = me.prev[0] + relPosMovement[0];
newY = me.prev[1] + relPosMovement[1];
// set new x and y position and redraw sprite
me.setAttributes({
x: newX,
y: newY
}, true);
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLTableModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'tableName',
type: 'string'
}, {
name: 'tableAlias',
type: 'string'
}]
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLTableStore', {
extend: 'Ext.data.Store',
autoSync: true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLTableModel',
proxy: {
type: 'memory'
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLJoin', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'leftTableId',
type: 'string'
}, {
name: 'rightTableId',
type: 'string'
}, {
name: 'leftTableField',
type: 'string'
}, {
name: 'rightTableField',
type: 'string'
}, {
name: 'joinCondition',
type: 'string'
}, {
name: 'joinType',
type: 'string'
}],
createUUID: function(){
// http://www.ietf.org/rfc/rfc4122.txt
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.JoinStore', {
extend: 'Ext.data.Store',
autoSync: true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLJoin',
proxy: {
type: 'memory'
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLFieldsModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'tableName',
type: 'string'
}, {
name: 'tableId',
type: 'string'
}, {
name: 'extCmpId',
type: 'string'
}, {
name: 'tableAlias',
type: 'string'
}, {
name: 'field',
type: 'string'
}, {
name: 'output',
type: 'boolean'
}, {
name: 'expression',
type: 'string'
}, {
name: 'aggregate',
type: 'string'
}, {
name: 'alias',
type: 'string'
}, {
name: 'sortType',
type: 'string'
}, {
name: 'sortOrder',
type: 'int'
}, {
name: 'grouping',
type: 'boolean'
}, {
name: 'criteria',
type: 'string'
}]
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLFieldsStore', {
extend: 'Ext.data.Store',
autoSync: true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLFieldsModel',
proxy: {
type: 'memory'
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLSelect', {
config: {
tables: '',
fields: '',
joins: ''
},
constructor: function(){
this.tables = Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLTableStore', {
storeId: 'SQLTableStore'
});
// handle all updates on sql tables
this.tables.on('update', this.handleSQLTableUpdate, this);
this.tables.on('add', this.handleSQLTableAdd, this);
this.tables.on('remove', this.handleSQLTableRemove, this);
this.fields = Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLFieldsStore', {
storeId: 'SQLFieldsStore'
});
this.fields.on('update', this.handleSQLFieldChanges, this);
this.fields.on('remove', this.handleSQLFieldRemove, this);
this.joins = Ext.create('Ext.ux.window.visualsqlquerybuilder.JoinStore', {
storeId: 'JoinStore'
});
// this.joins.on('update', this.handleSQLJoinChanges, this);
this.joins.on('add', this.handleSQLJoinChanges, this);
this.joins.on('remove', this.handleSQLJoinChanges, this);
this.callParent(arguments);
},
handleSQLTableUpdate: function(tableStore, table, operation){
if (operation == 'commit') {
this.updateFieldTableData(table);
this.updateJoinTableData(table);
this.updateSQLOutput();
}
},
handleSQLTableAdd: function(tableStore, table, index){
this.updateSQLOutput();
},
handleSQLTableRemove: function(tableStore, table, index){
var aJoins = [];
// get table joins and remove them
aJoins = this.getJoinsByTableId(table.get('id'));
// loop over the joins array
for (var i = 0, l = aJoins.length; i < l; i++) {
// remove join from store
this.removeJoinById(aJoins[i].get('id'));
}
this.updateSQLOutput();
},
handleSQLJoinChanges: function(joinStore, join){
this.updateSQLOutput();
},
updateFieldTableData: function(table){
var tableId, expression, tableAlias, tableName;
tableId = table.get('id');
tableAlias = table.get('tableAlias');
tableName = table.get('tableName');
// loop over all fields of the fields store
this.fields.each(function(field){
// check if current field belongs to sql table
if (field.get('tableId') == tableId) {
if (tableAlias != '') {
// we have a table alias
expression = tableAlias + '.' + field.get('field');
}
else {
// no table alias
expression = tableName + '.' + field.get('field');
};
field.beginEdit();
// update the field table alias
field.set('tableAlias', tableAlias);
// update the field expression
field.set('expression', expression);
field.commit(true);
field.endEdit();
}
});
return;
},
updateJoinTableData: function(table){
var joins, tableId;
tableId = table.get('id');
joins = this.getJoinsByTableId(tableId);
for (var i = 0, rightTable, leftTable, joinCondition = '',l = joins.length; i < l; i++) {
leftTable = this.getTableById(joins[i].get('leftTableId'));
rightTable = this.getTableById(joins[i].get('rightTableId'));
if (leftTable.get('tableAlias') != '') {
joinCondition = joinCondition + leftTable.get('tableAlias') + '.' + joins[i].get('leftTableField') + '=';
}
else {
joinCondition = joinCondition + leftTable.get('tableName') + '.' + joins[i].get('leftTableField') + '=';
}
if (rightTable.get('tableAlias') != '') {
joinCondition = joinCondition + rightTable.get('tableAlias') + '.' + joins[i].get('rightTableField');
}
else {
joinCondition = joinCondition + rightTable.get('tableName') + '.' + joins[i].get('rightTableField');
}
joins[i].beginEdit();
joins[i].set('joinCondition', joinCondition);
joins[i].commit(true);
joins[i].endEdit();
}
},
handleSQLFieldChanges: function(fieldStore, model, operation){
if (operation == 'commit') {
this.updateSQLOutput();
}
},
handleSQLFieldRemove: function(fieldStore){
this.updateSQLOutput();
},
updateSQLOutput: function(){
var sqlOutput, sqlHTML, sqlQutputPanel;
sqlOutput = this.toString();
sqlHTML = '<pre class="brush: sql">' + sqlOutput + '</pre>';
sqlQutputPanel = Ext.getCmp('SQLOutputPanel');
sqlQutputPanel.update(sqlHTML);
},
sortTablesByJoins: function(tables, oUsedTables){
var aTables = [], aJoins = [], oUsedTables = oUsedTables ||
{};
// loop over tables
for (var i = 0, aCondition = [], aJoin, l = tables.length; i < l; i++) {
// check if current table is a new one
if (!oUsedTables.hasOwnProperty(tables[i].get('id'))) {
// it is a new one
aTables.push(tables[i]);
// mark table as used
oUsedTables[tables[i].get('id')] = true;
// get any joins for the current table
aJoin = this.getJoinsByTableId(tables[i].get('id'));
// loop over the join tables
for (var j = 0, joinTable, len = aJoin.length; j < len; j++) {
// check if it is a new join
if (!oUsedTables.hasOwnProperty(aJoin[j].get('id'))) {
// mark join as used
oUsedTables[aJoin[j].get('id')] = true;
if (tables[i].get('id') != aJoin[j].get('leftTableId')) {
joinTable = this.getTableById(aJoin[j].get('leftTableId'));
this.changeLeftRightOnJoin(aJoin[j]);
}
else {
joinTable = this.getTableById(aJoin[j].get('rightTableId'));
}
oTemp = this.sortTablesByJoins([joinTable], oUsedTables);
oUsedTables = oTemp.oUsedTables;
aTables = aTables.concat(oTemp.aTables);
}
}
}
}
return {
aTables: aTables,
oUsedTables: oUsedTables
};
},
changeLeftRightOnJoin: function(join){
var leftTable, leftTableField, rightTable, rightTableField, joinCondition = '';
// prepare new data
leftTable = this.getTableById(join.get('rightTableId'));
leftTableField = join.get('rightTableField');
rightTable = this.getTableById(join.get('leftTableId'));
rightTableField = join.get('leftTableField');
// construct new joinCondition
if (leftTable.get('tableAlias') != '') {
joinCondition = joinCondition + leftTable.get('tableAlias') + '.' + join.get('rightTableField') + '=';
}
else {
joinCondition = joinCondition + leftTable.get('tableName') + '.' + join.get('rightTableField') + '=';
}
if (rightTable.get('tableAlias') != '') {
joinCondition = joinCondition + rightTable.get('tableAlias') + '.' + join.get('leftTableField');
}
else {
joinCondition = joinCondition + rightTable.get('tableName') + '.' + join.get('leftTableField');
}
// start transaction
join.beginEdit();
// change left and right join table data
join.set('leftTableId', leftTable.get('id'));
join.set('leftTableField', leftTableField);
join.set('rightTableId', rightTable.get('id'));
join.set('rightTableField', rightTableField);
join.set('joinCondition', joinCondition);
// silent commit without firing store events
// this prevents endless loop
join.commit(true);
join.endEdit();
// end transaction
return;
},
toString: function(){
var sqlOutput = 'SELECT ', aJoins = [], aOutputFields = [], oJoinTables = {}, aTables = [], aJoinTables = [], aCriteriaFields = [], aGroupFields = [], aOrderFields = [], selectFieldsSQL = '', fromSQL = '', aFromSQL = [], criteriaSQL = '', orderBySQL = '', groupBySQL = '', fieldSeperator = ', ', joinSQL = '', bFirst = true, bPartOfJoin = false;
this.fields.each(function(field){
// should the field be a part of the output
if (field.get('output')) {
aOutputFields.push(field);
}
// any criteria
if (field.get('criteria') != '') {
aCriteriaFields.push(field);
}
// check for grouping
if (field.get('grouping')) {
aGroupFields.push(field);
}
// check for sorting
if (field.get('sortType') != '') {
aOrderFields.push(field);
}
});
// tables
// sorting of tables
this.tables.each(function(table){
aTables.push(table);
});
aTables = this.sortTablesByJoins(aTables).aTables;
this.joins.each(function(join){
aJoins.push(join);
});
//create fromSQL
for (var k = 0, aJoin = [], oJoinTables = {}, joinCondition = '', joinType, leftTable, rightTable, l = aTables.length; k < l; k++) {
if (k == aTables.length - 1) {
fieldSeperator = '';
}
else {
fieldSeperator = ', ';
};
// is the current table the first one
if (bFirst) {
// yes it is the first
// table id merken
oJoinTables[aTables[k].get('id')] = true;
bFirst = false;
// check if current table is not the last one in the loop
if ((k + 1) < aTables.length) {
// get joins where joins leftTableID is a property of oJoinTables and joins rightTableID equal to aTables[i+1].get('id')
for (var h = 0, len = aJoins.length; h < len; h++) {
if (oJoinTables.hasOwnProperty(aJoins[h].get('leftTableId')) && aJoins[h].get('rightTableId') == aTables[k + 1].get('id')) {
aJoin.push(aJoins[h]);
}
if (oJoinTables.hasOwnProperty(aJoins[h].get('rightTableId')) && aJoins[h].get('leftTableId') == aTables[k + 1].get('id')) {
this.changeLeftRightOnJoin(aJoins[h]);
aJoin.push(aJoins[h]);
}
}
// check if we have a join
if (aJoin.length > 0) {
// yes we have a join between aTables[k] and aTables[k+1] with at least one join condition
leftTable = aTables[k];
rightTable = aTables[k + 1];
// table id merken
oJoinTables[rightTable.get('id')] = true;
for (var j = 0, fieldSeperator = '', ln = aJoin.length; j < ln; j++) {
if (j == aJoin.length - 1) {
fieldSeperator = '';
}
else {
fieldSeperator = '\nAND ';
};
joinType = aJoin[j].get('joinType');
joinCondition = joinCondition + aJoin[j].get('joinCondition') + fieldSeperator;
}
// reset the join array
aJoin = [];
if (joinSQL != '') {
joinSQL = joinSQL + ',\n';
}
if (leftTable.get('tableAlias') != '') {
// we have an leftTable alias
joinSQL = joinSQL + leftTable.get('tableName') + ' ' + leftTable.get('tableAlias') + ' ' + joinType + ' JOIN ';
}
else {
//no alias
joinSQL = joinSQL + leftTable.get('tableName') + ' ' + joinType + ' JOIN ';
}
if (rightTable.get('tableAlias') != '') {
// we have an rightTable alias
joinSQL = joinSQL + rightTable.get('tableName') + ' ' + rightTable.get('tableAlias') + ' ON ' + joinCondition;
}
else {
//no alias
joinSQL = joinSQL + rightTable.get('tableName') + ' ON ' + joinCondition;
}
// clear joinCondition
joinCondition = '';
}
else {
// no join between aTables[i+1] and the one before
bFirst = true;
oJoinTables = {};
// check for tableAlias
if (aTables[k].get('tableAlias') != '') {
fromSQL = aTables[k].get('tableName') + ' ' + aTables[k].get('tableAlias');
}
else {
fromSQL = aTables[k].get('tableName');
}
aFromSQL.push(fromSQL);
}
}
else {
// its the last and only one in the loop
// check for tableAlias
if (aTables[k].get('tableAlias') != '') {
fromSQL = aTables[k].get('tableName') + ' ' + aTables[k].get('tableAlias');
}
else {
fromSQL = aTables[k].get('tableName');
}
aFromSQL.push(fromSQL);
}
}
else {
// no, it is not the first table
bFirst = true;
// check if current table is not the last one in the loop
if ((k + 1) < aTables.length) {
// get joins where joins leftTableID is a property of oJoinTables and joins rightTableID equal to aTables[i+1].get('id')
for (var h = 0, len = aJoins.length; h < len; h++) {
if (oJoinTables.hasOwnProperty(aJoins[h].get('leftTableId')) && aJoins[h].get('rightTableId') == aTables[k + 1].get('id')) {
aJoin.push(aJoins[h]);
}
if (oJoinTables.hasOwnProperty(aJoins[h].get('rightTableId')) && aJoins[h].get('leftTableId') == aTables[k + 1].get('id')) {
this.changeLeftRightOnJoin(aJoins[h]);
aJoin.push(aJoins[h]);
}
}
// check if we have a join
if (aJoin.length > 0) {
// yes we have a join between aTables[k] and aTables[k+1] with at least one join condition
rightTable = aTables[k + 1];
// table id merken
oJoinTables[rightTable.get('id')] = true;
for (var j = 0, fieldSeperator = '', ln = aJoin.length; j < ln; j++) {
if (j == aJoin.length - 1) {
fieldSeperator = '';
}
else {
fieldSeperator = '\nAND ';
};
joinType = aJoin[j].get('joinType');
joinCondition = joinCondition + aJoin[j].get('joinCondition') + fieldSeperator;
}
// reset the join array
aJoin = [];
bFirst = false;
if (rightTable.get('tableAlias') != '') {
// we have an rightTable alias
joinSQL = joinSQL + '\n' + joinType + ' JOIN ' + rightTable.get('tableName') + ' ' + rightTable.get('tableAlias') + ' ON ' + joinCondition;
}
else {
//no alias
joinSQL = joinSQL + '\n' + joinType + ' JOIN ' + rightTable.get('tableName') + ' ON ' + joinCondition;
}
// clear joinCondition
joinCondition = '';
}
else {
bFirst = true;
oJoinTables = {};
}
}
else {
// its the last and only one
// check for tableAlias
oJoinTables = {};
}
}
}
fromSQL = aFromSQL.join(', ');
if (joinSQL != '' && fromSQL != '') {
joinSQL = joinSQL + ', ';
}
fromSQL = '\nFROM ' + joinSQL + fromSQL;
// output fields
for (var i = 0, l = aOutputFields.length; i < l; i++) {
// check if it is the last array member
if (i == aOutputFields.length - 1) {
fieldSeperator = '';
}
else {
fieldSeperator = ', ';
};
// yes, output
// check alias
if (aOutputFields[i].get('alias') != '') {
// yes, we have an field alias
selectFieldsSQL = selectFieldsSQL + aOutputFields[i].get('expression') + ' AS ' + aOutputFields[i].get('alias') + fieldSeperator;
}
else {
// no field alias
selectFieldsSQL = selectFieldsSQL + aOutputFields[i].get('expression') + fieldSeperator;
}
}
// criteria
for (var i = 0, l = aCriteriaFields.length; i < l; i++) {
if (i == 0) {
criteriaSQL = criteriaSQL + '\nWHERE ';
}
else {
criteriaSQL = criteriaSQL + 'AND ';
}
if (i == aCriteriaFields.length - 1) {
fieldSeperator = '';
}
else {
fieldSeperator = '\n';
}
criteriaSQL = criteriaSQL + aCriteriaFields[i].get('expression') + ' ' + aCriteriaFields[i].get('criteria') + fieldSeperator;
}
// group by
for (var i = 0, l = aGroupFields.length; i < l; i++) {
// check if it is the last array member
if (i == aGroupFields.length - 1) {
fieldSeperator = '';
}
else {
fieldSeperator = ', ';
}
if (i == 0) {
groupBySQL = '\nGROUP BY ';
}
groupBySQL = groupBySQL + aGroupFields[i].get('expression') + fieldSeperator;
}
// order by
for (var i = 0, l = aOrderFields.length; i < l; i++) {
// check if it is the last array member
if (i == aOrderFields.length - 1) {
fieldSeperator = '';
}
else {
fieldSeperator = ', ';
}
}
return sqlOutput + selectFieldsSQL + fromSQL + criteriaSQL + groupBySQL + orderBySQL;
},
getJoinsByTableId: function(tableId){
var aReturn = [];
this.joins.each(function(join){
if (join.get('leftTableId') == tableId || join.get('rightTableId') == tableId) {
aReturn.push(join);
}
});
return aReturn;
},
removeTableById: function(tableID){
var table;
table = this.tables.getById(tableID);
this.tables.remove(table);
},
getTableById: function(tableID){
return this.tables.getById(tableID);
},
removeFieldById: function(id){
var field;
field = this.fields.getById(id);
this.fields.remove(field);
},
removeFieldsByTableId: function(tableId){
var aRecords = [];
this.fields.each(function(model){
if (model.get('tableId') == tableId) {
aRecords.push(model);
}
});
this.fields.remove(aRecords);
},
addTable: function(table){
this.tables.add(table);
},
addFieldRecord: function(record, bOutput){
var tableAlias, model, expression;
// get the tableAlias
tableAlias = this.getTableById(record.get('tableId')).get('tableAlias');
// build the expression
// check if the tableAlias is not an empty string
if (tableAlias != '') {
// alias is not an empty string
expression = tableAlias + '.' + record.get('field');
}
else {
// alias is an empty string
expression = record.get('tableName') + '.' + record.get('field');
};
// get a new field instance
model = this.getNewField();
// set the expression
model.set('expression', expression);
// set output to false per default
model.set('output', bOutput);
// set an id, so it is possible to remove rows if the associated table is removed
model.set('id', record.get('id'));
// set the field
model.set('field', record.get('field'));
// copy tableId to the new model instance
model.set('tableId', record.get('tableId'));
// copy cmp id of origin sqltable to the new model instance
model.set('extCmpId', record.get('extCmpId'));
this.addField(model);
},
addField: function(field){
this.fields.add(field);
},
getNewField: function(){
return Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLFieldsModel');
},
removeJoinById: function(joinID){
var join;
join = this.joins.getById(joinID);
this.joins.remove(join);
},
addJoin: function(join){
this.joins.add(join);
},
arrayRemove: function(array, filterProperty, filterValue){
var aReturn;
aReturn = Ext.Array.filter(array, function(item){
var bRemove = true;
if (item[filterProperty] == filtervalue) {
bRemove = false;
}
return bRemove;
});
return aReturn
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLTablePanel', {
extend: 'Ext.panel.Panel',
alias: ['widget.sqltablepanel'],
id: 'SQLTablePanel',
items: [{
xtype: 'draw',
listeners: {
afterrender: function(){
this.initDropTarget();
}
},
initDropTarget: function(){
// init draw component inside qbwindow as a DropTarget
this.dropTarget = Ext.create('Ext.dd.DropTarget', this.el, {
ddGroup: 'sqlDDGroup',
notifyDrop: function(source, event, data){
var sqlTablePanel;
// add a sqltable to the sqlTablePanel component
sqlTablePanel = Ext.getCmp('SQLTablePanel');
sqlTablePanel.add({
xtype: 'sqltable',
constrain: true,
title: data.records[0].get('text')
}).show();
return true;
}
});
}
}]
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLOutputPanel', {
extend: 'Ext.panel.Panel',
alias: ['widget.sqloutputpanel'],
id: 'SQLOutputPanel',
listeners: {
afterlayout: function(){
SyntaxHighlighter.highlight();
}
},
initComponent: function(){
this.callParent(arguments);
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLFieldsGrid', {
requires: ['Ext.ux.CheckColumn'],
extend: 'Ext.grid.Panel',
alias: ['widget.sqlfieldsgrid'],
id: 'SQLFieldsGrid',
store: 'SQLFieldsStore',
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
viewConfig: {
listeners: {
render: function(view){
this.dd = {};
this.dd.dropZone = new Ext.grid.ViewDropZone({
view: view,
ddGroup: 'SQLTableGridDDGroup',
handleNodeDrop: function(data, record, position){
// Was soll nach dem Drop passieren?
}
});
},
drop: function(node, data, dropRec, dropPosition){
// add new rows to the SQLFieldsGrid after a drop
for (var i = 0, l = data.records.length; i < l; i++) {
ux.vqbuilder.sqlSelect.addFieldRecord(data.records[i], false);
}
}
}
},
columns: [{
xtype: 'actioncolumn',
menuDisabled: true,
text: 'Action',
width: 60,
moveGridRow: function(grid, record, index, direction){
var store = grid.getStore();
if (direction < 0) {
index--;
if (index < 0) {
return;
}
}
else {
index++;
if (index >= grid.getStore().getCount()) {
return;
}
}
// prepare manual syncing
store.suspendAutoSync();
// disable firing store events
store.suspendEvents();
// remove record and insert record at new index
store.remove(record);
store.insert(index, record);
// enable firing store events
store.resumeEvents();
store.resumeAutoSync();
// manual sync the store
store.sync();
},
items: [{
icon: 'resources/images/up_arrow.gif',
tooltip: 'Move Column Up',
getClass: function(value, metadata, record){
var store, index;
store = record.store;
index = store.indexOf(record);
if (index == 0) {
return 'x-action-icon-disabled';
}
else {
return 'x-grid-center-icon';
}
},
handler: function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex);
this.moveGridRow(grid, rec, rowIndex, -1);
}
}, {
icon: 'resources/images/down_arrow.gif',
getClass: function(value, metadata, record){
var store, index;
store = record.store;
index = store.indexOf(record);
if ((index + 1) == store.getCount()) {
return 'x-action-icon-disabled';
}
else {
return 'x-grid-center-icon';
}
},
tooltip: 'Move Column Down',
handler: function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex);
this.moveGridRow(grid, rec, rowIndex, 1);
}
}, {
icon: 'resources/images/remove.gif',
iconCls: 'x-grid-center-icon',
tooltip: 'Delete Column',
handler: function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex), store, tableId, tableGrid, selectionModel, bDel = true;
// rec contains column grid model, the one to remove
// get tableId of original sqltable
tableId = rec.get('extCmpId');
// get the sql tables grid and its selection
tableGrid = Ext.getCmp(tableId).down('gridpanel');
selectionModel = tableGrid.getSelectionModel();
Ext.Array.each(selectionModel.getSelection(), function(selection){
// deselect the selection wich corresponds to the column
// we want to remove from the column grid
if (rec.get('id') == selection.get('id')) {
// deselect current selection
// deselection will lead to removal, look for method deselect at the SQLTableGrid
selectionModel.deselect(selection);
bDel = false;
}
});
if (bDel) {
store = grid.getStore();
store.remove(rec);
}
}
}]
}, {
xtype: 'checkcolumn',
sortable: false,
text: 'Output',
flex: 0.075,
menuDisabled: true,
dataIndex: 'output',
align: 'center'
}, {
xtype: 'gridcolumn',
text: 'Expression',
sortable: false,
menuDisabled: true,
flex: 0.225,
dataIndex: 'expression',
editor: 'textfield'
}, {
xtype: 'gridcolumn',
text: 'Aggregate',
flex: 0.125,
sortable: false,
menuDisabled: true,
dataIndex: 'aggregate',
editor: 'textfield'
}, {
xtype: 'gridcolumn',
text: 'Alias',
flex: 0.125,
sortable: false,
menuDisabled: true,
dataIndex: 'alias',
editor: 'textfield'
}, {
xtype: 'gridcolumn',
text: 'Sort Type',
flex: 0.125,
sortable: false,
menuDisabled: true,
dataIndex: 'sorttype'
}, {
xtype: 'gridcolumn',
text: 'Sort Order',
flex: 0.125,
sortable: false,
menuDisabled: true,
dataIndex: 'sortorder'
}, {
xtype: 'checkcolumn',
text: 'Grouping',
flex: 0.075,
sortable: false,
menuDisabled: true,
dataIndex: 'grouping',
align: 'center'
}, {
xtype: 'gridcolumn',
text: 'Criteria',
flex: 0.125,
sortable: false,
menuDisabled: true,
dataIndex: 'criteria',
editor: 'textfield'
}],
initComponent: function(){
this.callParent(arguments);
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLTableTree', {
extend: 'Ext.tree.Panel',
alias: ['widget.sqltabletree'],
id: 'SQLTableTree',
listeners: {
afterrender: function(){
this.initTreeDragZone();
},
itemdblclick: function(view, record, el, index, event){
var sqlTablePanel;
// add a sqltable to the sqlTablePanel component
sqlTablePanel = Ext.getCmp('SQLTablePanel');
sqlTablePanel.add({
xtype: 'sqltable',
constrain: true,
title: record.get('text')
}).show();
}
},
initTreeDragZone: function(){
// init tree view as a ViewDragZone
this.view.dragZone = new Ext.tree.ViewDragZone({
view: this.view,
ddGroup: 'sqlDDGroup',
dragText: '{0} ausgew盲hlte Tabelle{1}',
repairHighlightColor: 'c3daf9',
repairHighlight: Ext.enableFx
});
},
initComponent: function(){
this.store = Ext.create('Ext.data.TreeStore', {
root: {
text: 'Tables',
expanded: true
},
proxy: {
type: 'ajax',
url: 'data/database.cfc?method=getTables'
}
});
this.callParent(arguments);
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLTableGrid', {
extend: 'Ext.grid.Panel',
alias: ['widget.sqltablegrid'],
border: false,
hideHeaders: true,
viewConfig: {
listeners: {
bodyscroll: function(){
var scrollOffset, sqlTable;
// the bodyscroll event of the view was fired
// get scroll information
scrollOffset = this.el.getScroll();
// get the parent sqltable
sqlTable = this.up('sqltable');
// change shadowSprites scrollTop property
sqlTable.shadowSprite.scrollTop = scrollOffset.top;
// redraw all connections to reflect scroll action
for (var i = ux.vqbuilder.connections.length; i--;) {
sqlTable.connection(ux.vqbuilder.connections[i]);
}
},
render: function(view){
this.dd = {};
// init the view as a DragZone
this.dd.dragZone = new Ext.view.DragZone({
view: view,
ddGroup: 'SQLTableGridDDGroup',
dragText: '{0} selected table column{1}',
onInitDrag: function(x, y){
var me = this, data = me.dragData, view = data.view, selectionModel = view.getSelectionModel(), record = view.getRecord(data.item), e = data.event;
data.records = [record];
me.ddel.update(me.getDragText());
me.proxy.update(me.ddel.dom);
me.onStartDrag(x, y);
return true;
}
});
// init the view as a DropZone
this.dd.dropZone = new Ext.grid.ViewDropZone({
view: view,
ddGroup: 'SQLTableGridDDGroup',
handleNodeDrop: function(data, record, position){
// Was soll nach dem Drop passieren?
},
onNodeOver: function(node, dragZone, e, data){
var me = this, view = me.view, pos = me.getPosition(e, node), overRecord = view.getRecord(node), draggingRecords = data.records;
if (!Ext.Array.contains(data.records, me.view.getRecord(node))) {
if (!Ext.Array.contains(draggingRecords, overRecord) && data.records[0].get('field') != '*') {
me.valid = true;
// valid drop target
// todo show drop invitation
}
else {
// invalid drop target
me.valid = false;
}
}
return me.valid ? me.dropAllowed : me.dropNotAllowed;
},
onContainerOver: function(dd, e, data){
var me = this;
// invalid drop target
me.valid = false;
return me.dropNotAllowed;
}
});
},
drop: function(node, data, dropRec, dropPosition){
var sqlTable1, sqlTable2, showJoinCM, connection, aBBPos, join, joinCondition = '', dropTable, targetTable;
showJoinCM = function(event, el){
var cm;
// stop the browsers event bubbling
event.stopEvent();
// create context menu
cm = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Edit Join',
icon: 'resources/images/document_edit16x16.gif',
handler: Ext.Function.bind(function(){
}, this)
}, {
text: 'Remove Join',
icon: 'resources/images/remove.gif',
handler: Ext.Function.bind(function(){
// remove any connection lines from surface and from array ux.vqbuilder.connections
ux.vqbuilder.connections = Ext.Array.filter(ux.vqbuilder.connections, function(connection){
var bRemove = true;
if (this.uuid == connection.uuid) {
this.line.remove();
this.bgLine.remove();
this.miniLine1.remove();
this.miniLine2.remove();
bRemove = false;
}
return bRemove;
}, this);
ux.vqbuilder.sqlSelect.removeJoinById(this.uuid);
}, this)
}, {
text: 'Close Menu',
icon: 'resources/images/cross.gif',
handler: Ext.emptyFn
}]
});
// show the contextmenu next to current mouse position
cm.showAt(event.getXY());
};
if (node.boundView) {
sqlTable1 = data.view.up('window');
sqlTable1.shadowSprite.bConnections = true;
sqlTable2 = Ext.getCmp(node.boundView).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(invisble) 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);
// node.viewIndex is the index of the target node
join.set('rightTableField', sqlTable2.down('grid').store.getAt(node.viewIndex).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);
}
}
}
},
initComponent: function(){
this.columns = [{
xtype: 'gridcolumn',
width: 16,
dataIndex: 'key',
renderer: function(val, meta, model){
if (val == 'PRI') {
meta.style = 'background-image:url(resources/images/key.gif) !important;background-position:2px 3px;background-repeat:no-repeat;';
}
return '';
}
}, {
xtype: 'gridcolumn',
flex: 1,
dataIndex: 'field',
renderer: function(val, meta, model){
if (model.get('key') == 'PRI') {
return '<span style="font-weight: bold;">' + val + '</span><span style="color:#aaa;">' + model.get('type') + '</span>';
}
return val + '<span style="color:#999;">' + model.get('type') + '</span>';
}
}];
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
mode: 'SIMPLE',
checkOnly: true,
listeners: {
select: function(selModel, data){
// add new rows to the SQLFieldsGrid after a selection change
ux.vqbuilder.sqlSelect.addFieldRecord(data, true);
},
deselect: function(selModel, data){
var store, model;
// remove row from SQLFieldsGrid after deselection
ux.vqbuilder.sqlSelect.removeFieldById(data.get('id'));
}
}
});
this.callParent(arguments);
}
});
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLTable', {
extend: 'Ext.window.Window',
minWidth: 120,
alias: ['widget.sqltable'],
cascadeOnFirstShow: 20,
height: 180,
width: 140,
shadowSprite: {},
layout: {
type: 'fit'
},
closable: true,
listeners: {
show: function(){
this.initSQLTable();
},
beforeclose: function(){
this.closeSQLTable();
}
},
closeSQLTable: function(){
// remove fields / columns from sqlFieldsStore
ux.vqbuilder.sqlSelect.removeFieldsByTableId(this.tableId);
// remove table from sqlTables store inside ux.vqbuilder.sqlSelect
ux.vqbuilder.sqlSelect.removeTableById(this.tableId);
// unregister mousedown event
this.getHeader().el.un('mousedown', this.regStartDrag, this);
// unregister mousemove event
Ext.EventManager.un(document, 'mousemove', this.moveWindow, this);
// remove sprite from surface
Ext.getCmp('SQLTablePanel').down('draw').surface.remove(this.shadowSprite, false);
// remove any connection lines from surface and from array ux.vqbuilder.connections
ux.vqbuilder.connections = Ext.Array.filter(ux.vqbuilder.connections, function(connection){
var bRemove = true;
for (var j = 0, l = this.connectionUUIDs.length; j < l; j++) {
if (connection.uuid == this.connectionUUIDs[j]) {
connection.line.remove();
connection.bgLine.remove();
connection.miniLine1.remove();
connection.miniLine2.remove();
bRemove = false;
}
}
return bRemove;
}, this);
},
initSQLTable: function(){
var sqlTablePanel, xyParentPos, xyChildPos, childSize, sprite;
// get the main sqlTablePanel
sqlTablePanel = Ext.getCmp('SQLTablePanel');
// get the main sqlTablePanel position
xyParentPos = sqlTablePanel.el.getXY();
// get position of the previously added sqltable
xyChildPos = this.el.getXY();
// get the size of the previously added sqltable
childSize = this.el.getSize();
// create a sprite of type rectangle and set its position and size
// to position and size of the the sqltable
sprite = Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLTableSprite', {
type: 'rect',
stroke: '#fff',
height: childSize.height - 4,
width: childSize.width - 4,
x: xyChildPos[0] - xyParentPos[0] + 2,
y: xyChildPos[1] - xyParentPos[1] + 2,
scrollTop: 0
});
// add the sprite to the surface of the sqlTablePanel
this.shadowSprite = sqlTablePanel.down('draw').surface.add(sprite).show(true);
// handle resizeing of sqltabel
this.resizer.on('resize', function(resizer, width, height, event){
this.shadowSprite.setAttributes({
width: width - 6,
height: height - 6
}, true);
// also move the associated connections
for (var i = ux.vqbuilder.connections.length; i--;) {
this.connection(ux.vqbuilder.connections[i]);
}
}, this);
// register a function for the mousedown event on the previously added sqltable and bind to this scope
this.getHeader().el.on('mousedown', this.regStartDrag, this);
this.getHeader().el.on('contextmenu', this.showSQLTableCM, this);
this.getHeader().el.on('dblclick', this.showTableAliasEditForm, this);
this.getHeader().origValue = '';
// register method this.moveWindow for the mousemove event on the document and bind to this scope
Ext.EventManager.on(document, 'mousemove', this.moveWindow, this);
// register a function for the mouseup event on the document and add the this scope
Ext.EventManager.on(document, 'mouseup', function(){
// save the mousedown state
this.bMouseDown = false;
}, this);
},
showSQLTableCM: function(event, el){
var cm;
// stop the browsers event bubbling
event.stopEvent();
// create context menu
cm = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Add/Edit Alias',
icon: 'resources/images/document_edit16x16.gif',
handler: Ext.Function.bind(function(){
this.showTableAliasEditForm();
}, this)
}, {
text: 'Remove Table',
icon: 'resources/images/delete.gif',
handler: Ext.Function.bind(function(){
// remove the sqltable
this.close();
}, this)
}, {
text: 'Close Menu',
icon: 'resources/images/cross.gif',
handler: Ext.emptyFn
}]
});
// show the contextmenu next to current mouse position
cm.showAt(event.getXY());
},
showTableAliasEditForm: function(event, el){
var table, header, title, titleId;
table = ux.vqbuilder.sqlSelect.getTableById(this.tableId);
header = this.getHeader();
titleId = '#' + header.getId() + '_hd';
title = this.down(titleId);
header.remove(title);
header.insert(0, [{
xtype: 'textfield',
flex: 0.95,
parentCmp: header,
parentTableModel: table,
initComponent: function(){
this.setValue(this.parentTableModel.get('tableAlias'));
this.on('render', function(field, event){
// set focus to the textfield Benutzerkennung
field.focus(true, 200);
}, this);
this.on('specialkey', function(field, event){
if (event.getKey() == event.ENTER) {
if (field.getValue() != this.parentCmp.origValue) {
this.parentTableModel.set('tableAlias', field.getValue());
this.parentCmp.origValue = field.getValue();
}
this.removeTextField();
this.addTitle();
}
}, this);
this.on('blur', function(field, event){
if (field.getValue() != this.parentCmp.origValue) {
this.parentTableModel.set('tableAlias', field.getValue());
this.parentCmp.origValue = field.getValue();
}
this.removeTextField();
this.addTitle();
}, this);
this.callParent(arguments);
},
removeTextField: function(){
var next;
next = this.next();
this.parentCmp.remove(next);
this.parentCmp.remove(this);
},
addTitle: function(){
var titleText;
if (this.parentTableModel.get('tableAlias') != '') {
titleText = this.parentTableModel.get('tableAlias') + ' ( ' + this.parentTableModel.get('tableName') + ' )';
}
else {
titleText = this.parentTableModel.get('tableName');
}
this.parentCmp.insert(0, {
xtype: 'component',
ariaRole: 'heading',
focusable: false,
noWrap: true,
flex: 1,
id: this.parentCmp.id + '_hd',
style: 'text-align:' + this.parentCmp.titleAlign,
cls: this.parentCmp.baseCls + '-text-container',
renderTpl: this.parentCmp.getTpl('headingTpl'),
renderData: {
title: titleText,
cls: this.parentCmp.baseCls,
ui: this.parentCmp.ui
},
childEls: ['textEl']
});
}
}, {
xtype: 'component',
flex: 0.05
}]);
},
regStartDrag: function(){
// save the mousedown state
this.bMouseDown = true;
// start the drag of the sprite
this.shadowSprite.startDrag(this.getId());
},
moveWindow: function(event, domEl, opt){
var relPosMovement;
// check mousedown
if (this.bMouseDown) {
// get relative x and y values (offset)
relPosMovement = this.getOffset('point');
// move the sprite to the position of the window
this.shadowSprite.onDrag(relPosMovement);
// check if the sprite has any connections
if (this.shadowSprite.bConnections) {
// also move the associated connections
for (var i = ux.vqbuilder.connections.length; i--;) {
this.connection(ux.vqbuilder.connections[i]);
}
}
}
},
getLeftRightCoordinates: function(obj1, obj2, aBBPos){
var bb1, bb2, p = [], dx, leftBoxConnectionPoint, rightBoxConnectionPoint, dis, columHeight = 21, headerHeight = 46, LeftRightCoordinates = {};
// BoundingBox Koordinaten f眉r beide Sprites abrufen
bb1 = obj1.getBBox();
// y Wert f眉r connection Points auf der linken und rechten Seite von bb1
bb1.pY = bb1.y + headerHeight + ((aBBPos[0] - 1) * columHeight) + (columHeight / 2) - obj1.scrollTop;
bb2 = obj2.getBBox();
// y Wert f眉r connection Points auf der linken und rechten Seite von bb2
bb2.pY = bb2.y + headerHeight + ((aBBPos[1] - 1) * columHeight) + (columHeight / 2) - obj2.scrollTop;
// code f眉r linke boundingBox
if (bb1.pY > (bb1.y + 4) && bb1.pY < (bb1.y + bb1.height - 4)) {
p.push({
x: bb1.x - 1, // Punkt auf linker Seite auf H枚he der verkn眉pften Spalte
y: bb1.pY
});
p.push({
x: bb1.x + bb1.width + 1, // Punkt auf rechter Seite auf H枚he der verkn眉pften Spalte
y: bb1.pY
});
}
else {
if (bb1.pY < (bb1.y + 4)) {
p.push({
x: bb1.x - 1, // Punkt auf linker Seite max. obere Position
y: bb1.y + 4
});
p.push({
x: bb1.x + bb1.width + 1, // Punkt auf rechter Seite max. obere Position
y: bb1.y + 4
});
}
else {
p.push({
x: bb1.x - 1, // Punkt auf linker Seite max. untere Position
y: bb1.y + bb1.height - 4
});
p.push({
x: bb1.x + bb1.width + 1, // Punkt auf rechter Seite max. untere Position
y: bb1.y + bb1.height - 4
});
};
};
// code f眉r rechte boundingBox
if (bb2.pY > (bb2.y + 4) && bb2.pY < (bb2.y + bb2.height - 4)) {
p.push({
x: bb2.x - 1, // Punkt auf linker Seite auf H枚he der verkn眉pften Spalte
y: bb2.pY
});
p.push({
x: bb2.x + bb2.width + 1, // Punkt auf rechter Seite auf H枚he der verkn眉pften Spalte
y: bb2.pY
});
}
else {
if (bb2.pY < (bb2.y + 4)) {
p.push({
x: bb2.x - 1, // Punkt auf linker Seite max. obere Position
y: bb2.y + 4
});
p.push({
x: bb2.x + bb2.width + 1, // Punkt auf rechter Seite max. obere Position
y: bb2.y + 4
});
}
else {
p.push({
x: bb2.x - 1, // Punkt auf linker Seite max. untere Position
y: bb2.y + bb2.height - 4
});
p.push({
x: bb2.x + bb2.width + 1, // Punkt auf rechter Seite max. untere Position
y: bb2.y + bb2.height - 4
});
}
};
// Schleife 眉ber die Punkte der ersten BoundingBox
for (var i = 0; i < 2; i++) {
// Schleife 眉ber die Punkte der zweiten BoundingBox
for (var j = 2; j < 4; j++) {
// Berechnung der Offsets zwischen den jeweils vier Punkten beider BoundingBoxes
dx = Math.abs(p[i].x - p[j].x), dy = Math.abs(p[i].y - p[j].y);
// bb1 links mit bb2 rechts
if (((i == 0 && j == 3) && dx < Math.abs(p[1].x - p[2].x)) || ((i == 1 && j == 2) && dx < Math.abs(p[0].x - p[3].x))) {
leftBoxConnectionPoint = p[i];
rightBoxConnectionPoint = p[j];
}
}
};
return {
leftBoxConnectionPoint: leftBoxConnectionPoint,
rightBoxConnectionPoint: rightBoxConnectionPoint
};
},
connection: function(obj1, obj2, line, aBBPos){
var LeftRightCoordinates, line1, line2, miniLine1, miniLine2, path, surface, color = typeof line == "string" ? line : "#000";
if (obj1.line && obj1.from && obj1.to && obj1.aBBPos) {
line = obj1;
obj1 = line.from;
obj2 = line.to;
aBBPos = line.aBBPos;
}
// set reference to the wright surface
surface = obj1.surface;
// get coordinates for the left and right box
LeftRightCoordinates = this.getLeftRightCoordinates(obj1, obj2, aBBPos);
// check if the LeftBox is still on the left side or not
if (LeftRightCoordinates.leftBoxConnectionPoint.x - LeftRightCoordinates.rightBoxConnectionPoint.x < 0) {
line1 = 12;
line2 = 12;
}
else {
line1 = -12;
line2 = -12;
}
// define the path between the left and the right box
path = ["M", LeftRightCoordinates.leftBoxConnectionPoint.x, LeftRightCoordinates.leftBoxConnectionPoint.y, "H", LeftRightCoordinates.leftBoxConnectionPoint.x + line1, "L", LeftRightCoordinates.rightBoxConnectionPoint.x - line2, LeftRightCoordinates.rightBoxConnectionPoint.y, "H", LeftRightCoordinates.rightBoxConnectionPoint.x].join(",");
miniLine1 = ["M", LeftRightCoordinates.leftBoxConnectionPoint.x, LeftRightCoordinates.leftBoxConnectionPoint.y, "H", LeftRightCoordinates.leftBoxConnectionPoint.x + line1].join(",");
miniLine2 = ["M", LeftRightCoordinates.rightBoxConnectionPoint.x - line2, LeftRightCoordinates.rightBoxConnectionPoint.y, "H", LeftRightCoordinates.rightBoxConnectionPoint.x].join(",");
//check if it is a new connection or not
if (line && line.line) {
// old connection, only change path
line.bgLine &&
line.bgLine.setAttributes({
path: path
}, true);
line.line.setAttributes({
path: path
}, true);
line.miniLine1.setAttributes({
path: miniLine1
}, true);
line.miniLine2.setAttributes({
path: miniLine2
}, true);
}
else {
// new connction, return new connection object
return {
line: Ext.create('Ext.draw.Sprite', {
type: 'path',
path: path,
stroke: color,
fill: 'none',
'stroke-width': 1,
surface: surface
}).show(true),
miniLine1: Ext.create('Ext.draw.Sprite', {
type: 'path',
path: miniLine1,
stroke: color,
fill: 'none',
'stroke-width': 2,
surface: surface
}).show(true),
miniLine2: Ext.create('Ext.draw.Sprite', {
type: 'path',
path: miniLine2,
stroke: color,
fill: 'none',
'stroke-width': 2,
surface: surface
}).show(true),
bgLine: Ext.create('Ext.draw.Sprite', {
type: 'path',
path: path,
opacity: 0,
stroke: '#fff',
fill: 'none',
'stroke-width': 10,
surface: surface
}).show(true),
from: obj1,
to: obj2,
aBBPos: aBBPos,
uuid: this.createUUID()
};
}
},
initComponent: function(){
var store, tableModel;
this.connectionUUIDs = [];
this.bMouseDown = false;
// asign a uuid to the window, this builds relationship with sqlTable
this.tableId = this.createUUID();
store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'id',
type: 'string'
}, {
name: 'tableName',
type: 'string'
}, {
name: 'tableId',
type: 'string',
defaultValue: this.tableId
}, {
name: 'field',
type: 'string'
}, {
name: 'extCmpId',
type: 'string',
defaultValue: this.id
}, {
name: 'type',
type: 'string'
}, {
name: 'null',
type: 'string'
}, {
name: 'key',
type: 'string'
}, {
name: 'default',
type: 'string'
}, {
name: 'extra',
type: 'string'
}],
proxy: {
type: 'ajax',
url: 'data/database.cfc?method=getTableInfo',
extraParams: {
tablename: this.title
},
reader: {
type: 'json'
}
}
});
// add sql table to ux.vqbuilder.sqlSelect tables store
// also asign same id as stores uuid
tableModel = Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLTableModel', {
id: this.tableId,
tableName: this.title,
tableAlias: ''
});
ux.vqbuilder.sqlSelect.addTable(tableModel);
this.items = [{
xtype: 'sqltablegrid',
store: store
}];
this.callParent(arguments);
},
getOffset: function(constrain){
var xy = this.dd.getXY(constrain), s = this.dd.startXY;
// return the the difference between the current and the drag&drop start position
return [xy[0] - s[0], xy[1] - s[1]];
},
createUUID: function(){
// http://www.ietf.org/rfc/rfc4122.txt
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
},
beforeShow: function(){
var aWin, prev, o;
// cascading window positions
if (this.cascadeOnFirstShow) {
o = (typeof this.cascadeOnFirstShow == 'number') ? this.cascadeOnFirstShow : 20;
// get all instances from xtype sqltable
aWin = Ext.ComponentQuery.query('sqltable');
// start position if there is only one table
if (aWin.length == 1) {
this.x = o;
this.y = o;
}
else {
// loop through all instances from xtype sqltable
for (var i = 0, l = aWin.length; i < l; i++) {
if (aWin[i] == this) {
if (prev) {
this.x = prev.x + o;
this.y = prev.y + o;
}
}
if (aWin[i].isVisible()) {
prev = aWin[i];
}
}
}
this.setPosition(this.x, this.y);
}
}
});
Ext.define('Ext.ux.window.VisualSQLQueryBuilder', {
extend: 'Ext.window.Window',
alias: ['widget.qbwindow'],
height: 620,
width: 1000,
layout: {
type: 'border'
},
title: 'Visual SQL Query Builder',
items: [{
xtype: 'sqloutputpanel',
border: false,
region: 'center',
autoScroll: true,
html: '<pre class="brush: sql">SQL Output Window</pre>',
margin: 5,
height: 150,
split: true
}, {
xtype: 'panel',
border: false,
height: 400,
margin: 5,
layout: {
type: 'border'
},
region: 'north',
split: true,
items: [{
xtype: 'sqltablepanel',
border: false,
region: 'center',
height: 280,
split: true,
layout: 'fit'
}, {
xtype: 'sqlfieldsgrid',
border: false,
region: 'south',
height: 120,
split: true
}, {
xtype: 'sqltabletree',
border: false,
region: 'west',
width: 200,
height: 400,
split: true
}]
}],
initComponent: function(){
// create user extension namespace ux.vqbuilder
Ext.namespace('ux.vqbuilder');
// disable gutter (linenumbers) and toolbar for SyntaxHighlighter
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
ux.vqbuilder.connections = [];
ux.vqbuilder.sqlSelect = Ext.create('Ext.ux.window.visualsqlquerybuilder.SQLSelect');
// add toolbar to the dockedItems
this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'tbfill'
}, {
text: "Save",
icon: "resources/images/icon-save.gif"
}, {
text: "Run",
icon: "resources/images/run.png"
}]
}];
this.callParent(arguments);
}
});
Extjs4实现的Ext.ux.window.VisualSQLQueryBuilder.rar
SQL在线查询设计器，强大的SQL在线查询工具
下载地址：http://download.csdn.net/download/luck332/4897329
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
