Index: typo3/sysext/lang/locallang_wizards.xml =================================================================== --- typo3/sysext/lang/locallang_wizards.xml (revision 9393) +++ typo3/sysext/lang/locallang_wizards.xml (revision ) @@ -79,6 +79,18 @@ + + + + + + + + + + + + \ No newline at end of file Index: typo3/sysext/cms/layout/wizard_be_layout.php =================================================================== --- typo3/sysext/cms/layout/wizard_be_layout.php (revision 9758) +++ typo3/sysext/cms/layout/wizard_be_layout.php (revision ) @@ -92,7 +92,15 @@ 'save' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelSave', 1), 'title' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_windowTitle', 1), 'name' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelName', 1), - 'column' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelColumn', 1) + 'column' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelColumn', 1), + 'editCell' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_editCell', 1), + 'mergeCell' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_mergeCell', 1), + 'splitCell' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_splitCell', 1), + 'name' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_name', 1), + 'column' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_column', 1), + 'notSet' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_notSet', 1), + 'nameHelp' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_nameHelp', 1), + 'columnHelp' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_columnHelp', 1), ); $pageRenderer->addInlineLanguageLabelArray($languageLabels); @@ -182,20 +190,17 @@ } - $this->doc->JScode .= ' - - '; + '); $this->doc->styleSheetFile_post = TYPO3_MOD_PATH . 'res/grideditor.css'; @@ -232,20 +237,20 @@ - +
- + - + - + Index: typo3/sysext/cms/layout/res/grideditor.js =================================================================== --- typo3/sysext/cms/layout/res/grideditor.js (revision 9674) +++ typo3/sysext/cms/layout/res/grideditor.js (revision ) @@ -8,13 +8,7 @@ Ext.namespace('TYPO3.Backend.t3Grid'); TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, { - /* - colCount: 0, - rowCount: 0, - data: [], - nameLabel: '', - columnLabel: '', - */ + constructor: function(config) { config = Ext.apply({ @@ -35,7 +29,7 @@ addRow: function() { var newRow = []; for (var i = 0; i < this.colCount; i++) { - newRow[i] = {spanned:false,rowspan:1,colspan:1}; + newRow[i] = {spanned:false,rowspan:1,colspan:1}; } this.data.push(newRow); this.rowCount++; @@ -50,14 +44,14 @@ removeRow: function() { if (this.rowCount <= 1) return false; var newData = []; - for (var rowIndex = 0; rowIndex < this.rowCount-1; rowIndex++) { + for (var rowIndex = 0; rowIndex < this.rowCount - 1; rowIndex++) { newData.push(this.data[rowIndex]); } - // fix rowspan in former last row + // fix rowspan in former last row for (var colIndex = 0; colIndex < this.colCount; colIndex++) { - if (this.data[this.rowCount-1][colIndex].spanned == true) { + if (this.data[this.rowCount - 1][colIndex].spanned == true) { - this.findUpperCellWidthRowspanAndDecreaseByOne(colIndex,this.rowCount-1); + this.findUpperCellWidthRowspanAndDecreaseByOne(colIndex, this.rowCount - 1); } } @@ -74,15 +68,15 @@ * @param row integer * @return void */ - findUpperCellWidthRowspanAndDecreaseByOne: function(col,row) { + findUpperCellWidthRowspanAndDecreaseByOne: function(col, row) { - var upperCell = this.getCell(col, row-1); + var upperCell = this.getCell(col, row - 1); if (!upperCell) return false; if (upperCell.spanned == true) { - this.findUpperCellWidthRowspanAndDecreaseByOne(col, row-1); + this.findUpperCellWidthRowspanAndDecreaseByOne(col, row - 1); } else { if (upperCell.rowspan > 1) { - this.removeRowspan(col, row-1); + this.removeRowspan(col, row - 1); } } }, @@ -98,11 +92,11 @@ for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) { var newRow = []; - for (colIndex = 0; colIndex < this.colCount-1; colIndex++) { + for (colIndex = 0; colIndex < this.colCount - 1; colIndex++) { newRow.push(this.data[rowIndex][colIndex]); } - if (this.data[rowIndex][this.colCount-1].spanned == true) { + if (this.data[rowIndex][this.colCount - 1].spanned == true) { - this.findLeftCellWidthColspanAndDecreaseByOne(this.colCount-1, rowIndex); + this.findLeftCellWidthColspanAndDecreaseByOne(this.colCount - 1, rowIndex); } newData.push(newRow); } @@ -119,15 +113,15 @@ * @param row integer * @return void */ - findLeftCellWidthColspanAndDecreaseByOne: function(col,row) { + findLeftCellWidthColspanAndDecreaseByOne: function(col, row) { - var leftCell = this.getCell(col-1, row); + var leftCell = this.getCell(col - 1, row); if (!leftCell) return false; if (leftCell.spanned == true) { - this.findLeftCellWidthColspanAndDecreaseByOne(col-1, row); + this.findLeftCellWidthColspanAndDecreaseByOne(col - 1, row); } else { if (leftCell.colspan > 1) { - this.removeColspan(col-1, row); + this.removeColspan(col - 1, row); } } }, @@ -139,7 +133,12 @@ */ addColumn: function() { for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) { - this.data[rowIndex].push({spanned:false,rowspan:1,colspan:1,name:this.colCount+'x'+rowIndex}); + this.data[rowIndex].push({ + spanned: false, + rowspan: 1, + colspan: 1, + name: this.colCount + 'x' + rowIndex + }); } this.colCount++; }, @@ -152,11 +151,27 @@ */ drawTable: function() { var domHelper = Ext.DomHelper; - var newTable = {tag:'table',children:[],id:'base',border:'0',width:'100%',height:'100%','class':'editor',cellspacing:'0',cellpadding:'0'}; + var newTable = { + tag: 'table', + children: [], + id: 'base', + border: '0', + width: '100%', + height: '100%', + class: 'editor', + cellspacing: '0', + cellpadding: '0' + }; - var colgroups = {tag:'colgroup',children:[]}; + var colgroups = { + tag: 'colgroup', + children: [] + }; for (var col = 0; col < this.colCount; col++) { - colgroups.children.push({tag:'col',style:'width:'+parseInt(100/this.colCount)+'%'}); + colgroups.children.push({ + tag: 'col', + style: 'width:' + parseInt(100 / this.colCount, 10) + '%' + }); } newTable.children.push(colgroups); @@ -173,588 +188,35 @@ } - var cellHtml = '
'; - if (this.cellCanSpanRight(col, row)) cellHtml += ''; - if (this.cellCanShrinkLeft(col, row)) cellHtml += ''; - if (this.cellCanSpanDown(col, row)) cellHtml += ''; - if (this.cellCanShrinkUp(col, row)) cellHtml += ''; - cellHtml += '
'; - - cellHtml += '
Name: '+(cell.name ? cell.name : 'not set')+'
Column: '+((parseInt(cell.column) === false) ? 'not set' : cell.column)+'
'; - - // create cells - var child = { - tag: 'td', - height: parseInt(100/this.rowCount)*cell.rowspan+'%', - width: parseInt(100/this.colCount)*cell.colspan+'%', - html: cellHtml - }; - if (cell.colspan > 1) { - child.colspan = cell.colspan; + var cellHtml = '
'; + if (this.cellCanSpanRight(col, row)) { + cellHtml += ''; } - if (cell.rowspan > 1) { - child.rowspan = cell.rowspan; + if (this.cellCanShrinkLeft(col, row)) { + cellHtml += ''; } - rowSpec.children.push(child); + if (this.cellCanSpanDown(col, row)) { + cellHtml += ''; - } + } - - newTable.children.push(rowSpec); - + if (this.cellCanShrinkUp(col, row)) { + cellHtml += ''; - } + } - - domHelper.overwrite(Ext.Element.get(this.targetElement), newTable); - this.bindLinks(); - }, - - /** - * Sets the name of a certain grid element. - * - * @param newName string - * @param col integer - * @param row integer - * - * @return boolean - */ - setName: function(newName, col, row) { - var cell = this.getCell(col, row); - if (!cell) return false; - cell.name = newName; - return true; - }, - - /** - * Sets the column field for a certain grid element. This is NOT the column of the - * element itself. - * - * @param newColumn integer - * @param col integer - * @param row integer - * - * @return boolean - */ - setColumn: function(newColumn, col, row) { - var cell = this.getCell(col, row); - if (!cell) return false; - cell.column = newColumn; - return true; - }, - - /** - * Searches for all a tags with certain classes and binds some actions to them. - * - * @return void - */ - bindLinks: function() { - for (var row = 0; row < this.rowCount; row++) { - for (var col = 0; col < this.colCount; col++) { - // span right - var el = Ext.Element.get('r_'+col+'_'+row); - if (el) { - el.addListener('click', function(e, sender, params) { - this.addColspan(params.colIndex, params.rowIndex); - this.drawTable(); - }, this, {stopEvent:true, colIndex:col, rowIndex:row}); - } - - // reduce to left - var el = Ext.Element.get('l_'+col+'_'+row); - if (el) { - el.addListener('click', function(e, sender, params) { - this.removeColspan(params.colIndex, params.rowIndex); - this.drawTable(); - }, this, {stopEvent:true, colIndex:col, rowIndex:row}); - } - - // span down - var el = Ext.Element.get('d_'+col+'_'+row); - if (el) { - el.addListener('click', function(e, sender, params) { - this.addRowspan(params.colIndex, params.rowIndex); - this.drawTable(); - }, this, {stopEvent:true, colIndex:col, rowIndex:row}); - } - - // reduce up - var el = Ext.Element.get('u_'+col+'_'+row); - if (el) { - el.addListener('click', function(e, sender, params) { - this.removeRowspan(params.colIndex, params.rowIndex); - this.drawTable(); - }, this, {stopEvent:true, colIndex:col, rowIndex:row}); - } - - // edit - var el = Ext.Element.get('e_'+col+'_'+row); - if (el) { - el.addListener('click', function(e, sender, params) { - this.showOptions(sender, params.colIndex, params.rowIndex); - }, this, {stopEvent:true, colIndex:col, rowIndex:row}); - } - } - } - }, - - /** - * Creates an ExtJs Window with two input fields and shows it. On save, the data - * is written into the grid element. - * - * @param sender DOM-object (the link) - * @param col integer - * @param row integer - */ - showOptions: function(sender, col, row) { - var win; - sender = Ext.get('base'); - var cell = this.getCell(col, row); - if (!cell) return false; - - if(!win){ - var fieldName = new Ext.form.TextField({ - fieldLabel: TYPO3.lang.name, - name: 'name', - width: 200, - value: cell.name, - tabIndex: 1 - }); - - var fieldColumn = new Ext.form.NumberField({ - fieldLabel: TYPO3.lang.column, - name: 'column', - width: 50, - value: cell.column, - tabIndex: 2 - }); - - - win = new Ext.Window({ - layout: 'fit', - title: TYPO3.lang.title, - width: '50%', - modal: true, - closable: true, - resizable: false, - - items: [{ - xtype: 'fieldset', - autoHeight: true, - autoWidth: true, - labelWidth: 100, - border: false, - - items: [fieldName, fieldColumn] - }], - - buttons: [{ - iconCls:'save', - text: TYPO3.lang.save, - handler: function(fieldName, fieldColumn, col, row) { - t3Grid.setName(fieldName.getValue(), col, row); - t3Grid.setColumn(fieldColumn.getValue(), col, row); - win.close(); - t3Grid.drawTable(); - }.createDelegate(this, [fieldName, fieldColumn, col, row]) - }] - }); - } - win.show(this); - }, - - /** - * Returns a cell element from the grid. - * - * @param col integer - * @param row integer - * return Object - */ - getCell: function(col, row) { - if (col > this.colCount-1) return false; - if (row > this.rowCount-1) return false; - return this.data[row][col]; - }, - - /** - * Checks wether a cell can span to the right or not. A cell can span to the right - * if it is not in the last column and if there is no cell beside it that is - * already overspanned by some other cell. - * - * @param col integer - * @param row integer - * - * @return boolean - */ - cellCanSpanRight: function(col, row) { - if (col == this.colCount-1) { - return false; - } - - var cell = this.getCell(col, row); - if (cell.rowspan > 1) { - for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) { - var checkCell = this.getCell(col+cell.colspan, rowIndex); - if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { - return false; - } - } - } else { - var checkCell = this.getCell(col+cell.colspan, row); - if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { - return false; - } - } - - return true; - }, - - /** - * Checks wether a cell can span down or not. - * - * @param col integer - * @param row integer - * - * @return boolean - */ - cellCanSpanDown: function(col, row) { - if (row == this.rowCount-1) { - return false; - } - - var cell = this.getCell(col, row); - if (cell.colspan > 1) { - // we have to check all cells on the right side for the complete colspan - for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) { - var checkCell = this.getCell(colIndex, row+cell.rowspan); - if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { - return false; - } - } - } else { - var checkCell = this.getCell(col, row+cell.rowspan); - if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { - return false; - } - } - - return true; - }, - - /** - * Checks if a cell can shrink to the left. It can shrink if the colspan of the - * cell is bigger than 1. - * - * @param col integr - * @param row integer - * - * @return boolean - */ - cellCanShrinkLeft: function(col, row) { - return (this.data[row][col].colspan > 1); - }, - - /** - * Returns if a cell can shrink up. This is the case if a cell has at least - * a rowspan of 2. - * - * @param col integr - * @param row integer - * - * @return boolean - */ - cellCanShrinkUp: function(col, row) { - return (this.data[row][col].rowspan > 1); - }, - - /** - * Adds a colspan to a grid element. - * - * @param col integr - * @param row integer - */ - addColspan: function(col, row) { - var cell = this.getCell(col, row); - if (!cell || !this.cellCanSpanRight(col, row)) return false; - - for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) { - this.data[rowIndex][col+cell.colspan].spanned = true; - } - cell.colspan += 1; - }, - - /** - * Adds a rowspan to grid element. - * - * @param col integr - * @param row integer - * - * @return void - */ - addRowspan: function(col, row) { - var cell = this.getCell(col, row); - if (!cell || !this.cellCanSpanDown(col, row)) return false; - - for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) { - this.data[row+cell.rowspan][colIndex].spanned = true; - } - cell.rowspan += 1; - }, - - /** - * Removes a colspan from a grid element. - * - * @param col integr - * @param row integer - * - * @return void - */ - removeColspan: function(col, row) { - var cell = this.getCell(col, row); - if (!cell || !this.cellCanShrinkLeft(col, row)) return false; - - cell.colspan -= 1; - for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) { - this.data[rowIndex][col+cell.colspan].spanned = false; - } - }, - - /** - * Removes a rowspan from a grid element. - * - * @param col integr - * @param row integer - * - * @return void - */ - removeRowspan: function(col, row) { - var cell = this.getCell(col, row); - if (!cell || !this.cellCanShrinkUp(col, row)) return false; - - cell.rowspan -= 1; - for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) { - this.data[row+cell.rowspan][colIndex].spanned = false; - } - }, - - /** - * Exports the current grid to a TypoScript notation that can be read by the - * page module and is human readable. - * - * @return string - */ - export2LayoutRecord: function() { - var result = "be_layout {\n\tcolCount = "+this.colCount+"\n\trowCount = "+this.rowCount+ "\n\trows {\n"; - for (var row = 0; row < this.rowCount; row++) { - result += "\t\t"+(row+1)+" {\n"; - result += "\t\t\tcolumns {\n"; - colIndex = 0; - for (var col = 0; col < this.colCount; col++) { - var cell = this.getCell(col, row); - if (cell && !cell.spanned) { - colIndex++; - result += "\t\t\t\t"+(colIndex)+" {\n"; - result += "\t\t\t\t\tname = "+((!cell.name) ? col+"x"+row : cell.name)+"\n"; - if (cell.colspan > 1) result += "\t\t\t\t\tcolspan = "+cell.colspan+"\n"; - if (cell.rowspan > 1) result += "\t\t\t\t\trowspan = "+cell.rowspan+"\n"; - if (typeof(cell.column) === 'number') result += "\t\t\t\t\tcolPos = "+cell.column+"\n"; - result += "\t\t\t\t}\n"; - } - - } - result += "\t\t\t}\n"; - result += "\t\t}\n"; - } - - result += "\t}\n}\n"; - return result; - } -}); -/** - * A JavaScript object to handle, edit, draw and export a grid. The grid is basically - * a table with some colspan and rowspan. Each cell can additionally hold a name and - * column. - * - * @author Thomas Hempel - */ -Ext.namespace('TYPO3.Backend.t3Grid'); - -TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, { - /* - colCount: 0, - rowCount: 0, - data: [], - nameLabel: '', - columnLabel: '', - */ - constructor: function(config) { - - config = Ext.apply({ - colCount: config.colCount, - rowCount: config.rowCount, - data: config.data, - nameLabel: config.nameLabel, - columnLabel: config.columnLabel, - targetElement: config.targetElement - }, config); - - TYPO3.Backend.t3Grid.superclass.constructor.call(this, config); - }, - - /** - * Adds a row below the grid - */ - addRow: function() { - var newRow = []; - for (var i = 0; i < this.colCount; i++) { - newRow[i] = {spanned:false,rowspan:1,colspan:1}; - } - this.data.push(newRow); - this.rowCount++; - }, - - /** - * Removes the last row of the grid and adjusts all cells that might be effected - * by that change. (Removing colspans) - * - * @returns void - */ - removeRow: function() { - if (this.rowCount <= 1) return false; - var newData = []; - for (var rowIndex = 0; rowIndex < this.rowCount-1; rowIndex++) { - newData.push(this.data[rowIndex]); - } - - // fix rowspan in former last row - for (var colIndex = 0; colIndex < this.colCount; colIndex++) { - if (this.data[this.rowCount-1][colIndex].spanned == true) { - this.findUpperCellWidthRowspanAndDecreaseByOne(colIndex,this.rowCount-1); - } - } - - this.data = newData; - this.rowCount--; - }, - - /** - * Takes a cell and looks above it if there are any cells that have colspans that - * spanns into the given cell. This is used when a row was removed from the grid - * to make sure that no cell with wrong colspans exists in the grid. - * - * @param col integer - * @param row integer - * @return void - */ - findUpperCellWidthRowspanAndDecreaseByOne: function(col,row) { - var upperCell = this.getCell(col, row-1); - if (!upperCell) return false; - - if (upperCell.spanned == true) { - this.findUpperCellWidthRowspanAndDecreaseByOne(col, row-1); - } else { - if (upperCell.rowspan > 1) { - this.removeRowspan(col, row-1); - } - } - }, - - /** - * Removes the outermost right column from the grid. - * - * @return void - */ - removeColumn: function() { - if (this.colCount <= 1) return false; - var newData = []; - - for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) { - var newRow = []; - for (colIndex = 0; colIndex < this.colCount-1; colIndex++) { - newRow.push(this.data[rowIndex][colIndex]); - } - if (this.data[rowIndex][this.colCount-1].spanned == true) { - this.findLeftCellWidthColspanAndDecreaseByOne(this.colCount-1, rowIndex); - } - newData.push(newRow); - } - - this.data = newData; - this.colCount--; - }, - - /** - * Checks if there are any cells on the left side of a given cell with a - * rowspan that spans over the given cell. - * - * @param col integer - * @param row integer - * @return void - */ - findLeftCellWidthColspanAndDecreaseByOne: function(col,row) { - var leftCell = this.getCell(col-1, row); - if (!leftCell) return false; - - if (leftCell.spanned == true) { - this.findLeftCellWidthColspanAndDecreaseByOne(col-1, row); - } else { - if (leftCell.colspan > 1) { - this.removeColspan(col-1, row); - } - } - }, - - /** - * Adds a column at the right side of the grid. - * - * @return void - */ - addColumn: function() { - for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) { - this.data[rowIndex].push({spanned:false,rowspan:1,colspan:1,name:this.colCount+'x'+rowIndex}); - } - this.colCount++; - }, - - /** - * Draws the grid as table into a given container. - * It also adds all needed links and bindings to the cells to make it editable. - * - * @return void - */ - drawTable: function() { - var domHelper = Ext.DomHelper; - var newTable = {tag:'table',children:[],id:'base',border:'0',width:'100%',height:'100%','class':'editor',cellspacing:'0',cellpadding:'0'}; - - var colgroups = {tag:'colgroup',children:[]}; - for (var col = 0; col < this.colCount; col++) { - colgroups.children.push({tag:'col',style:'width:'+parseInt(100/this.colCount)+'%'}); - } - newTable.children.push(colgroups); - - for (var row = 0; row < this.rowCount; row++) { - var rowData = this.data[row]; - if (rowData.length == 0) continue; - - var rowSpec = {tag: 'tr', children:[]}; - - for (var col = 0; col < this.colCount; col++) { - var cell = this.data[row][col]; - if (cell.spanned == true) { - continue; - } - - - var cellHtml = '
'; - if (this.cellCanSpanRight(col, row)) cellHtml += ''; - if (this.cellCanShrinkLeft(col, row)) cellHtml += ''; - if (this.cellCanSpanDown(col, row)) cellHtml += ''; - if (this.cellCanShrinkUp(col, row)) cellHtml += ''; cellHtml += '
'; - cellHtml += '
Name: '+(cell.name ? cell.name : 'not set')+'
Column: '+((parseInt(cell.column) === false) ? 'not set' : cell.column)+'
'; + cellHtml += '
' + TYPO3.lang.name + ': ' + (cell.name ? cell.name : TYPO3.lang.notSet) + + '
' + TYPO3.lang.column + ': ' + + (cell.column === undefined ? TYPO3.lang.notSet : parseInt(cell.column, 10)) + '
'; - // create cells + // create cells var child = { tag: 'td', - height: parseInt(100/this.rowCount)*cell.rowspan+'%', - width: parseInt(100/this.colCount)*cell.colspan+'%', + height: parseInt(100 / this.rowCount, 10) * cell.rowspan + '%', + width: parseInt(100 / this.colCount, 10) * cell.colspan + '%', html: cellHtml }; if (cell.colspan > 1) { @@ -816,7 +278,7 @@ for (var row = 0; row < this.rowCount; row++) { for (var col = 0; col < this.colCount; col++) { // span right - var el = Ext.Element.get('r_'+col+'_'+row); + var el = Ext.Element.get('r_' + col + '_' + row); if (el) { el.addListener('click', function(e, sender, params) { this.addColspan(params.colIndex, params.rowIndex); @@ -825,7 +287,7 @@ } // reduce to left - var el = Ext.Element.get('l_'+col+'_'+row); + var el = Ext.Element.get('l_' + col + '_' + row); if (el) { el.addListener('click', function(e, sender, params) { this.removeColspan(params.colIndex, params.rowIndex); @@ -834,7 +296,7 @@ } // span down - var el = Ext.Element.get('d_'+col+'_'+row); + var el = Ext.Element.get('d_' + col + '_' + row); if (el) { el.addListener('click', function(e, sender, params) { this.addRowspan(params.colIndex, params.rowIndex); @@ -843,7 +305,7 @@ } // reduce up - var el = Ext.Element.get('u_'+col+'_'+row); + var el = Ext.Element.get('u_' + col + '_' + row); if (el) { el.addListener('click', function(e, sender, params) { this.removeRowspan(params.colIndex, params.rowIndex); @@ -852,7 +314,7 @@ } // edit - var el = Ext.Element.get('e_'+col+'_'+row); + var el = Ext.Element.get('e_' + col + '_' + row); if (el) { el.addListener('click', function(e, sender, params) { this.showOptions(sender, params.colIndex, params.rowIndex); @@ -876,52 +338,72 @@ var cell = this.getCell(col, row); if (!cell) return false; - if(!win){ + if (!win) { var fieldName = new Ext.form.TextField({ fieldLabel: TYPO3.lang.name, - name: 'name', + name: 'name', - width: 200, + width: 270, - value: cell.name, + value: cell.name, - tabIndex: 1 + tabIndex: 1, + listeners: { + render: function(c) { + Ext.QuickTips.register({ + target: c, + text: TYPO3.lang.nameHelp - }); + }); + } + } + }); var fieldColumn = new Ext.form.NumberField({ fieldLabel: TYPO3.lang.column, - name: 'column', - width: 50, - value: cell.column, + name: 'column', + width: 50, + value: cell.column, - tabIndex: 2 + tabIndex: 2, + listeners: { + render: function(c) { + Ext.QuickTips.register({ + target: c, + text: TYPO3.lang.columnHelp - }); + }); + } + } + }); win = new Ext.Window({ layout: 'fit', title: TYPO3.lang.title, - width: '50%', + width: 400, modal: true, closable: true, resizable: false, - items: [{ + items: [ + { - xtype: 'fieldset', - autoHeight: true, - autoWidth: true, - labelWidth: 100, - border: false, + xtype: 'fieldset', + autoHeight: true, + autoWidth: true, + labelWidth: 100, + border: false, - items: [fieldName, fieldColumn] + items: [fieldName, fieldColumn] - }], + } + ], - buttons: [{ + buttons: [ + { - iconCls:'save', - text: TYPO3.lang.save, - handler: function(fieldName, fieldColumn, col, row) { - t3Grid.setName(fieldName.getValue(), col, row); - t3Grid.setColumn(fieldColumn.getValue(), col, row); - win.close(); - t3Grid.drawTable(); - }.createDelegate(this, [fieldName, fieldColumn, col, row]) + iconCls:'save', + text: TYPO3.lang.save, + handler: function(fieldName, fieldColumn, col, row) { + t3Grid.setName(fieldName.getValue(), col, row); + t3Grid.setColumn(fieldColumn.getValue(), col, row); + win.close(); + t3Grid.drawTable(); + }.createDelegate(this, [fieldName, fieldColumn, col, row]) - }] + } + ] }); } win.show(this); @@ -935,8 +417,8 @@ * return Object */ getCell: function(col, row) { - if (col > this.colCount-1) return false; + if (col > this.colCount - 1) return false; - if (row > this.rowCount-1) return false; + if (row > this.rowCount - 1) return false; return this.data[row][col]; }, @@ -951,20 +433,20 @@ * @return boolean */ cellCanSpanRight: function(col, row) { - if (col == this.colCount-1) { + if (col == this.colCount - 1) { return false; } var cell = this.getCell(col, row); if (cell.rowspan > 1) { - for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) { + for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) { - var checkCell = this.getCell(col+cell.colspan, rowIndex); + var checkCell = this.getCell(col + cell.colspan, rowIndex); if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { return false; } } } else { - var checkCell = this.getCell(col+cell.colspan, row); + var checkCell = this.getCell(col + cell.colspan, row); if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { return false; } @@ -982,21 +464,21 @@ * @return boolean */ cellCanSpanDown: function(col, row) { - if (row == this.rowCount-1) { + if (row == this.rowCount - 1) { return false; } var cell = this.getCell(col, row); if (cell.colspan > 1) { // we have to check all cells on the right side for the complete colspan - for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) { + for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) { - var checkCell = this.getCell(colIndex, row+cell.rowspan); + var checkCell = this.getCell(colIndex, row + cell.rowspan); if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { return false; } } } else { - var checkCell = this.getCell(col, row+cell.rowspan); + var checkCell = this.getCell(col, row + cell.rowspan); if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) { return false; } @@ -1041,8 +523,8 @@ var cell = this.getCell(col, row); if (!cell || !this.cellCanSpanRight(col, row)) return false; - for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) { + for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) { - this.data[rowIndex][col+cell.colspan].spanned = true; + this.data[rowIndex][col + cell.colspan].spanned = true; } cell.colspan += 1; }, @@ -1059,8 +541,8 @@ var cell = this.getCell(col, row); if (!cell || !this.cellCanSpanDown(col, row)) return false; - for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) { + for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) { - this.data[row+cell.rowspan][colIndex].spanned = true; + this.data[row + cell.rowspan][colIndex].spanned = true; } cell.rowspan += 1; }, @@ -1078,8 +560,8 @@ if (!cell || !this.cellCanShrinkLeft(col, row)) return false; cell.colspan -= 1; - for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) { + for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) { - this.data[rowIndex][col+cell.colspan].spanned = false; + this.data[rowIndex][col + cell.colspan].spanned = false; } }, @@ -1096,8 +578,8 @@ if (!cell || !this.cellCanShrinkUp(col, row)) return false; cell.rowspan -= 1; - for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) { + for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) { - this.data[row+cell.rowspan][colIndex].spanned = false; + this.data[row + cell.rowspan][colIndex].spanned = false; } }, @@ -1108,20 +590,20 @@ * @return string */ export2LayoutRecord: function() { - var result = "be_layout {\n\tcolCount = "+this.colCount+"\n\trowCount = "+this.rowCount+ "\n\trows {\n"; + var result = "be_layout {\n\tcolCount = " + this.colCount + "\n\trowCount = " + this.rowCount + "\n\trows {\n"; for (var row = 0; row < this.rowCount; row++) { - result += "\t\t"+(row+1)+" {\n"; + result += "\t\t" + (row + 1) + " {\n"; result += "\t\t\tcolumns {\n"; colIndex = 0; for (var col = 0; col < this.colCount; col++) { var cell = this.getCell(col, row); if (cell && !cell.spanned) { colIndex++; - result += "\t\t\t\t"+(colIndex)+" {\n"; + result += "\t\t\t\t" + (colIndex) + " {\n"; - result += "\t\t\t\t\tname = "+((!cell.name) ? col+"x"+row : cell.name)+"\n"; + result += "\t\t\t\t\tname = " + ((!cell.name) ? col + "x" + row : cell.name) + "\n"; - if (cell.colspan > 1) result += "\t\t\t\t\tcolspan = "+cell.colspan+"\n"; + if (cell.colspan > 1) result += "\t\t\t\t\tcolspan = " + cell.colspan + "\n"; - if (cell.rowspan > 1) result += "\t\t\t\t\trowspan = "+cell.rowspan+"\n"; + if (cell.rowspan > 1) result += "\t\t\t\t\trowspan = " + cell.rowspan + "\n"; - if (typeof(cell.column) === 'number') result += "\t\t\t\t\tcolPos = "+cell.column+"\n"; + if (typeof(cell.column) === 'number') result += "\t\t\t\t\tcolPos = " + cell.column + "\n"; result += "\t\t\t\t}\n"; }