[fusion-commits] r2220 - sandbox/jxlib-3.0/lib
svn_fusion at osgeo.org
svn_fusion at osgeo.org
Thu Sep 9 14:39:22 EDT 2010
Author: pagameba
Date: 2010-09-09 18:39:22 +0000 (Thu, 09 Sep 2010)
New Revision: 2220
Modified:
sandbox/jxlib-3.0/lib/jxlib.uncompressed.js
Log:
minor cleanup on some grid stuff
Modified: sandbox/jxlib-3.0/lib/jxlib.uncompressed.js
===================================================================
--- sandbox/jxlib-3.0/lib/jxlib.uncompressed.js 2010-09-09 13:51:40 UTC (rev 2219)
+++ sandbox/jxlib-3.0/lib/jxlib.uncompressed.js 2010-09-09 18:39:22 UTC (rev 2220)
@@ -25561,7 +25561,7 @@
...
*/
-// $Id: panel.js 960 2010-06-06 22:23:16Z jonlb at comcast.net $
+// $Id: panel.js 980 2010-09-09 14:02:45Z pagameba $
/**
* Class: Jx.Panel
*
@@ -25704,6 +25704,11 @@
//var b, item;
if (this.options.collapse) {
+ if (this.title) {
+ this.title.addEvent('dblclick', function() {
+ that.toggleCollapse();
+ });
+ }
this.colB = new Jx.Button({
template: this.options.controlButtonTemplate,
image: Jx.aPixel.src,
@@ -25800,10 +25805,6 @@
}
- this.title.addEvent('dblclick', function() {
- that.toggleCollapse();
- });
-
if (this.options.id) {
this.domObj.id = this.options.id;
}
@@ -31231,11 +31232,12 @@
classes: $H({
domObj: 'jxGridCellContent'
}),
+
/**
- * Property: model
- * holds a reference to the model (an instance of <Jx.Store> or subclass)
+ * Property: grid
+ * holds a reference to the grid (an instance of <Jx.Grid>)
*/
- model: null,
+ grid: null,
parameters: ['options','grid'],
@@ -31319,10 +31321,18 @@
}
},
+ /**
+ * APIMethod: getWidth
+ * return the width of the column
+ */
getWidth: function () {
return this.width;
},
+ /**
+ * APIMethod: getCellWidth
+ * return the cellWidth of the column
+ */
getCellWidth: function() {
return this.cellWidth;
},
@@ -31337,79 +31347,83 @@
calculateWidth : function (rowHeader) {
//if this gets called then we assume that we want to calculate the width
rowHeader = $defined(rowHeader) ? rowHeader : false;
- var maxWidth;
- var maxCellWidth;
+ var maxWidth,
+ maxCellWidth,
+ store = this.grid.getStore(),
+ t,
+ s,
+ oldPos,
+ text,
+ klass;
+ store.first();
+ if ((this.options.renderMode == 'fixed' ||
+ this.options.renderMode == 'expand') &&
+ store.valid()) {
+ t = new Element('span', {
+ 'class': 'jxGridCellContent',
+ html: 'a',
+ styles: {
+ width: this.options.width
+ }
+ });
+ s = this.measure(t,'jxGridCell');
+ maxWidth = s.content.width;
+ maxCellWidth = s.cell.width;
+ } else {
+ //calculate the width
+ oldPos = store.getPosition();
+ maxWidth = maxCellWidth = 0;
+ while (store.valid()) {
+ //check size by placing text into a TD and measuring it.
+ this.options.renderer.render();
+ text = document.id(this.options.renderer);
+ klass = 'jxGridCell';
+ if (this.grid.row.useHeaders()
+ && this.options.name === this.grid.row
+ .getRowHeaderColumn()) {
+ klass = 'jxGridRowHead';
+ }
+ s = this.measure(text, klass, rowHeader, store.getPosition());
+ if (s.content.width > maxWidth) {
+ maxWidth = s.content.width;
+ }
+ if (s.cell.width > maxCellWidth) {
+ maxCellWidth = s.cell.width;
+ }
+ if (store.hasNext()) {
+ store.next();
+ } else {
+ break;
+ }
+ }
- var model = this.grid.getStore();
- model.first();
- if ((this.options.renderMode == 'fixed' ||
- this.options.renderMode == 'expand') &&
- model.valid) {
- var t = new Element('span', {
- 'class': 'jxGridCellContent',
- html: 'a',
- styles: {
- width: this.options.width
- }
- });
- var s = this.measure(t,'jxGridCell');
- maxWidth = s.content.width;
- maxCellWidth = s.cell.width;
- } else {
- //calculate the width
- var oldPos = model.getPosition();
- maxWidth = maxCellWidth = 0;
- while (model.valid()) {
- //check size by placing text into a TD and measuring it.
- this.options.renderer.render();
- var text = document.id(this.options.renderer);
- var klass = 'jxGridCell';
- if (this.grid.row.useHeaders()
- && this.options.name === this.grid.row
- .getRowHeaderColumn()) {
- klass = 'jxGridRowHead';
- }
- var s = this.measure(text, klass, rowHeader, model.getPosition());
- if (s.content.width > maxWidth) {
- maxWidth = s.content.width;
- }
- if (s.cell.width > maxCellWidth) {
- maxCellWidth = s.cell.width
- }
- if (model.hasNext()) {
- model.next();
- } else {
- break;
- }
- }
+ //check the column header as well (unless this is the row header)
+ if (!(this.grid.row.useHeaders() &&
+ this.options.name === this.grid.row.getRowHeaderColumn())) {
+ klass = 'jxGridColHead';
+ if (this.isEditable()) {
+ klass += ' jxColEditable';
+ }
+ if (this.isResizable()) {
+ klass += ' jxColResizable';
+ }
+ if (this.isSortable()) {
+ klass += ' jxColSortable';
+ }
+ s = this.measure(this.domObj.clone(), klass);
+ if (s.content.width > maxWidth) {
+ maxWidth = s.content.width;
+ }
+ if (s.cell.width > maxCellWidth) {
+ maxCellWidth = s.cell.width;
+ }
+ }
+ }
- //check the column header as well (unless this is the row header)
- if (!(this.grid.row.useHeaders() &&
- this.options.name === this.grid.row.getRowHeaderColumn())) {
- klass = 'jxGridColHead';
- if (this.isEditable()) {
- klass += ' jxColEditable';
- }
- if (this.isResizable()) {
- klass += ' jxColResizable';
- }
- if (this.isSortable()) {
- klass += ' jxColSortable';
- }
- s = this.measure(this.domObj.clone(), klass);
- if (s.content.width > maxWidth) {
- maxWidth = s.content.width;
- }
- if (s.cell.width > maxCellWidth) {
- maxCellWidth = s.cell.width
- }
- }
- }
-
- this.width = maxWidth;
- this.cellWidth = maxCellWidth;
- model.moveTo(oldPos);
- return this.width;
+ this.width = maxWidth;
+ this.cellWidth = maxCellWidth;
+ store.moveTo(oldPos);
+ return this.width;
},
/**
* Method: measure
@@ -31425,7 +31439,8 @@
measure : function (text, klass, rowHeader, row) {
var d = new Element('span', {
'class' : klass
- });
+ }),
+ s;
text.inject(d);
//d.setStyle('height', this.grid.row.getHeight(row));
d.setStyles({
@@ -31434,19 +31449,16 @@
});
d.inject(document.body, 'bottom');
- var s = d.measure(function () {
+ s = d.measure(function () {
+ var el = this;
//if not rowHeader, get size of innner span
if (!rowHeader) {
- return {
- content: this.getFirst().getContentBoxSize(),
- cell: this.getFirst().getMarginBoxSize()
- }
- } else {
- return {
- content: this.getMarginBoxSize(),
- cell: this.getMarginBoxSize()
- }
+ el = el.getFirst();
}
+ return {
+ content: el.getMarginBoxSize(),
+ cell: el.getMarginBoxSize()
+ };
});
d.destroy();
return s;
@@ -31558,12 +31570,19 @@
*/
columns : [],
+ /**
+ * Property: rowTemplate
+ * a string holding a template for a single row of cells to be populated
+ * when rendering the store into a grid. The template is constructed from
+ * the individual column templates once the store has been loaded.
+ */
rowTemplate: null,
parameters: ['options','grid'],
/**
* Property: hasExpandable
- *
+ * boolean indicates whether any of the columns are expandable or not,
+ * which affects some calculations for column widths
*/
hasExpandable: null,
@@ -31574,8 +31593,9 @@
init : function () {
this.parent();
- if ($defined(this.options.grid) && this.options.grid instanceof Jx.Grid) {
- this.grid = this.options.grid;
+ if ($defined(this.options.grid) &&
+ this.options.grid instanceof Jx.Grid) {
+ this.grid = this.options.grid;
}
this.hasExpandable = false;
@@ -31593,11 +31613,23 @@
this.buildTemplates();
},
+ /**
+ * APIMethod: addColumns
+ * add new columns to the columns object after construction. Causes
+ * the template to change.
+ *
+ * Parameters:
+ * columns - {Array} an array of columns to add
+ */
addColumns: function(columns) {
this.columns.extend(columns);
this.buildTemplates();
},
+ /**
+ * Method: buildTemplates
+ * create the row template based on the current columns
+ */
buildTemplates: function() {
var rowTemplate = '',
hasExpandable = false,
@@ -31627,7 +31659,8 @@
* returns the height of the column header row
*
* Parameters:
- * recalculate - determines if we should recalculate the height. Currently does nothing.
+ * recalculate - determines if we should recalculate the height. Currently
+ * does nothing.
*/
getHeaderHeight : function (recalculate) {
if (!$defined(this.height) || recalculate) {
@@ -31684,7 +31717,8 @@
* Used to get a column when all you know is the cell index in the grid
*
* Parameters:
- * index - an integer denoting the placement of the column in the grid (zero-based)
+ * index - an integer denoting the placement of the column in the grid
+ * (zero-based)
*/
getByGridIndex : function (index) {
var headers = this.options.useHeaders ?
@@ -31693,7 +31727,7 @@
var cell = headers[index];
var hClasses = cell.get('class').split(' ').filter(function (cls) {
if(this.options.useHeaders)
- return cls.test('jxColHead-')
+ return cls.test('jxColHead-');
else
return cls.test('jxCol-');
}.bind(this));
@@ -31715,12 +31749,13 @@
if (this.useHeaders()) {
this.columns.each(function(col, idx) {
if (!col.isHidden() && col != rhc) {
- var classes = ['jxGridColHead', 'jxGridCol'+idx, 'jxGridCol'+col.options.name];
+ var classes = ['jxGridColHead', 'jxGridCol'+idx, 'jxGridCol'+col.options.name],
+ th;
if (col.isEditable()) { classes.push('jxColEditable'); }
if (col.isResizable()) { classes.push('jxColResizable'); }
if (col.isSortable()) { classes.push('jxColSortable'); }
- var th = new Element('th', {
- 'class': classes.join(' '),
+ th = new Element('th', {
+ 'class': classes.join(' ')
});
th.store('jxCellData', {
column: col,
@@ -31739,22 +31774,32 @@
}
},
+ /**
+ * Method: getRow
+ * create a single row in the grid for a single record and populate
+ * the DOM elements for it.
+ *
+ * Parameters:
+ * tr - {DOMElement} the TR element to insert the row into
+ * record - {<Jx.Record>} the record to create the row for
+ */
getRow: function(tr, record) {
var data = {},
grid = this.grid,
store = grid.store,
row = grid.row,
- rhc = grid.row.useHeaders() ? this.getByName(row.options.headerColumn) : null,
- domInserts = [];
- var i = 0;
+ rhc = grid.row.useHeaders() ?
+ this.getByName(row.options.headerColumn) : null,
+ domInserts = [],
+ i;
this.columns.each(function(column, index) {
if (!column.isHidden() && column != rhc) {
if (column.options.renderer && column.options.renderer.domInsert) {
domInserts.push({column: column, index: i});
} else {
- var renderer = column.options.renderer;
- var formatter = renderer.options.formatter;
- var text = '';
+ var renderer = column.options.renderer,
+ formatter = renderer.options.formatter,
+ text = '';
if (renderer.options.textTemplate) {
text = store.fillTemplate(null, renderer.options.textTemplate, renderer.columnsNeeded);
} else {
@@ -31770,16 +31815,25 @@
});
tr.set('html', this.rowTemplate.substitute(data));
domInserts.each(function(obj) {
- var td = tr.childNodes[obj.index];
- td.adopt(obj.column.getHTML());
+ tr.childNodes[obj.index].adopt(obj.column.getHTML());
});
},
+ /**
+ * APIMethod: calculateWidths
+ * force calculation of column widths. For columns with 'fit' this will
+ * cause the column to test every value in the store to compute the
+ * optimal width of the column. Columns marked as 'expand' will get
+ * any extra space left over between the column widths and the width
+ * of the grid container (if any).
+ */
calculateWidths: function () {
//to calculate widths we loop through each column
- var expand = null;
- var totalWidth = 0;
- var rowHeaderWidth = 0;
+ var expand = null,
+ totalWidth = 0,
+ rowHeaderWidth = 0,
+ gridSize = this.grid.contentContainer.getContentBoxSize(),
+ leftOverSpace = 0;
this.columns.each(function(col,idx){
//are we checking the rowheader?
var rowHeader = false;
@@ -31811,13 +31865,11 @@
},this);
// width of the container
- //var containerWidth = this.grid.gridObj.getContentBoxSize();
- var gridSize = this.grid.contentContainer.getContentBoxSize();
if (gridSize.width > totalWidth) {
//now figure the expand column
if ($defined(expand)) {
// var leftOverSpace = gridSize.width - totalWidth + rowHeaderWidth;
- var leftOverSpace = gridSize.width - totalWidth
+ leftOverSpace = gridSize.width - totalWidth;
//account for right borders in firefox...
if (Browser.Engine.gecko) {
leftOverSpace -= this.getColumnCount(true);
@@ -31837,17 +31889,20 @@
expand.setWidth(expand.options.width);
}
}
- } //else {
+ }
this.grid.gridObj.setContentBoxSize({'width': totalWidth});
this.grid.colObj.setContentBoxSize({'width': totalWidth});
- // }
},
+ /**
+ * Method: createRules
+ * create CSS rules for the current grid object
+ */
createRules: function(styleSheet, scope) {
var autoRowHeight = this.grid.row.options.rowHeight == 'auto';
this.columns.each(function(col, idx) {
- var selector = scope+' .jxGridCol'+idx
- var dec = '';
+ var selector = scope+' .jxGridCol'+idx,
+ dec = '';
if (autoRowHeight) {
//set the white-space to 'normal !important'
dec = 'white-space: normal !important';
@@ -31855,10 +31910,9 @@
col.cellRule = Jx.Styles.insertCssRule(selector, dec, styleSheet);
col.cellRule.style.width = col.getCellWidth() + "px";
- var selector = scope+" .jxGridCol" + idx + " .jxGridCellContent";
+ selector = scope+" .jxGridCol" + idx + " .jxGridCellContent";
col.rule = Jx.Styles.insertCssRule(selector, dec, styleSheet);
col.rule.style.width = col.getWidth() + "px";
-
}, this);
},
@@ -31897,10 +31951,10 @@
getIndexFromGrid : function (name) {
var headers = this.options.useHeaders ?
this.grid.colTableBody.getFirst().getChildren() :
- this.grid.gridTableBody.getFirst().getChildren();
- var c;
- var i = -1;
- var self = this;
+ this.grid.gridTableBody.getFirst().getChildren(),
+ c,
+ i = -1,
+ self = this;
headers.each(function (h) {
i++;
var hClasses = h.get('class').split(' ').filter(function (cls) {
@@ -32071,17 +32125,28 @@
* determines and returns the height of a row
*/
getHeight : function (row) {
+ var h = this.options.rowHeight;
//this should eventually compute a height, however, we would need
//a fixed width to do so reliably. For right now, we use a fixed height
//for all rows.
- if ((!$defined(this.options.rowHeight) || this.options.rowHeight === 'auto') && $defined(this.heights[row])) {
- return this.heights[row];
- } else if (Jx.type(this.options.rowHeight === 'number')) {
- return this.options.rowHeight;
+ if ($defined(this.heights[row])) {
+ h = this.heights[row];
+ } else if ($defined(this.options.rowHeight)) {
+ if (this.options.rowHeight == 'auto') {
+ // this.calculateHeight(row);
+ h = 20; // TODO calculate?
+ } else if (Jx.type(this.options.rowHeight) !== 'number') {
+ h = 20; // TODO calculate?
+ }
}
+ return h;
},
+ /**
+ * Method: calculateHeights
+ */
calculateHeights : function () {
- if (this.options.rowHeight === 'auto' || !$defined(this.options.rowHeight)) {
+ if (this.options.rowHeight === 'auto' ||
+ !$defined(this.options.rowHeight)) {
//grab all rows in the grid body
document.id(this.grid.gridTableBody).getChildren().each(function(row){
row = document.id(row);
@@ -32103,46 +32168,11 @@
},this);
} else {
document.id(this.grid.rowTableHead).getChildren().each(function(row,idx){
- this.heights[idx] = this.options.rowHeight
+ this.heights[idx] = this.options.rowHeight;
}, this);
}
},
- createRules: function(styleSheet, scope) {
- if (this.options.rowHeight === 'auto' || !$defined(this.options.rowHeight)) {
- this.grid.gridTableBody.getChildren().each(function(row, idx) {
- var height = this.getHeight(idx),
- selector = scope+' .jxGridRow'+idx + ', ' + scope + ' .jxGridRow'+idx+' .jxGridCellContent',
- rule = Jx.Styles.insertCssRule(selector, '', styleSheet);
- this.rules.set('jxGridRow'+idx, rule);
- rule.style.height = height + "px";
-
- if (Browser.Engine.webkit) {
- selector += " th";
- var thRule = Jx.Styles.insertCssRule(selector, '', styleSheet);
- thRule.style.height = height + "px";
-
- this.rules.set('th_jxGridRow'+idx, thRule);
- }
-
- }, this);
- } else {
- var rule = Jx.Styles.insertCssRule('.jxGridCellContent', '', styleSheet);
- rule.style.height = this.options.rowHeight + 'px';
- }
- },
-
- // TODO: appears to be unused?
- // updateRules: function() {
- // this.grid.gridTableBody.getChildren().each(function(row, idx) {
- // var h = this.heights[idx] + "px";
- // this.rules.get('jxGridRow'+idx).style.height = h;
- // if (Browser.Engine.webkit) {
- // this.rules.get('th_jxGridRow'+idx).style.height = h;
- // }
- // }, this);
- // },
-
/**
* APIMethod: useHeaders
* determines and returns whether row headers should be used
@@ -32313,34 +32343,41 @@
*
* Extends: <Jx.Widget>
*
- * A tabular control that has fixed, optional, scrolling headers on the rows and
- * columns like a spreadsheet.
+ * A tabular control that has fixed, optional, scrolling headers on the rows
+ * and columns like a spreadsheet.
*
* Jx.Grid is a tabular control with convenient controls for resizing columns,
- * sorting, and inline editing. It is created inside another element, typically
- * a div. If the div is resizable (for instance it fills the page or there is a
- * user control allowing it to be resized), you must call the resize() method
- * of the grid to let it know that its container has been resized.
+ * sorting, and inline editing. It is created inside another element,
+ * typically a div. If the div is resizable (for instance it fills the page
+ * or there is a user control allowing it to be resized), you must call the
+ * resize() method of the grid to let it know that its container has been
+ * resized.
*
- * When creating a new Jx.Grid, you can specify a number of options for the grid
- * that control its appearance and functionality. You can also specify plugins
- * to load for additional functionality. Currently Jx provides the following
- * plugins
+ * When creating a new Jx.Grid, you can specify a number of options for the
+ * grid that control its appearance and functionality. You can also specify
+ * plugins to load for additional functionality. Currently Jx provides the
+ * following plugins
*
* Prelighter - prelights rows, columns, and cells
* Selector - selects rows, columns, and cells
* Sorter - sorts rows by specific column
+ * Editor - allows editing of cells if the column permits editing
*
* Jx.Grid renders data that comes from an external source. This external
- * source, called the model, must be a Jx.Store or extended from it.
+ * source, called the store, must be a Jx.Store or extended from it.
*
* Events:
* gridCellEnter(cell, list) - called when the mouse enters a cell
* gridCellLeave(cell, list) - called when the mouse leaves a cell
* gridCellClick(cell) - called when a cell is clicked
+ * gridRowEnter(cell, list) - called when the mouse enters a row header
+ * gridRowLeave(cell, list) - called when the mouse leaves a row header
+ * gridRowClick(cell) - called when a row header is clicked
+ * gridColumnEnter(cell, list) - called when the mouse enters a column header
+ * gridColumnLeave(cell, list) - called when the mouse leaves a column header
+ * gridColumnClick(cell) - called when a column header is clicked
* gridMouseLeave() - called when the mouse leaves the grid at any point.
*
- *
* License:
* Copyright (c) 2008, DM Solutions Group Inc.
* This version Copyright (c) 2009, Jon Bomgardner.
@@ -32419,8 +32456,8 @@
parameters: ['store', 'options'],
/**
- * Property: model
- * holds a reference to the <Jx.Store> that is the model for this
+ * Property: store
+ * holds a reference to the <Jx.Store> that is the store for this
* grid
*/
store: null,
@@ -32491,7 +32528,7 @@
});
if (options.parent) {
- this.addTo(options.parent)
+ this.addTo(options.parent);
}
this.parent();
@@ -32606,7 +32643,7 @@
this.contentContainer.setStyle('overflow', 'auto');
- // very hacky!
+ // todo: very hacky! can plugins 'wantEvent' between init and render?
this.hooks.each(function(value, key) {
if (value) {
this.hooks.set(key, false);
@@ -32617,9 +32654,10 @@
/**
* APIMethod: resize
- * resize the grid to fit inside its container. This involves knowing something
- * about the model it is displaying (the height of the column header and the
- * width of the row header) so nothing happens if no model is set
+ * resize the grid to fit inside its container. This involves knowing
+ * something about the model it is displaying (the height of the column
+ * header and the width of the row header) so nothing happens if no model is
+ * set
*/
resize: function() {
var p = this.domObj.getParent(),
@@ -32668,8 +32706,8 @@
/**
* APIMethod: setStore
- * set the store for the grid to display. If a store is attached to the grid
- * it is removed and the new store is displayed.
+ * set the store for the grid to display. If a store is attached to the
+ * grid it is removed and the new store is displayed.
*
* Parameters:
* store - {Object} the store to use for this grid
@@ -32689,12 +32727,11 @@
* gets the store set for this grid.
*/
getStore: function() {
- return this.store
+ return this.store;
},
storeLoaded: function(store, response) {
- var store = this.store,
- template = '',
+ var template = '',
tr,
columns = [],
useRowHeaders = this.row.useHeaders();
@@ -32702,17 +32739,15 @@
this.gridObj.getElement('tbody').empty();
- // todo consider moving whole thing into Jx.Columns ??
+ // TODO: consider moving whole thing into Jx.Columns ??
+ // create a suitable column representation for everything
+ // in the store that doesn't already have a representation
store.options.columns.each(function(col, index) {
- // if (useRowHeaders &&
- // $defined(response.meta) &&
- // $defined(response.meta.rowHeaderColumn) &&
- // col.name == response.meta.rowHeaderColumn) {
- // this.row.options.headerColumn = col.name;
- // useRowHeaders = false; // just skip this step, we aren't really turning them off
- // }
if (!this.columns.getByName(col.name)) {
- var renderer = new Jx.Grid.Renderer.Text();
+ var renderer = new Jx.Grid.Renderer.Text(),
+ format = $defined(col.format) ? col.format : null,
+ template = "<span class='jxGridCellContent'>"+ ($defined(col.label) ? col.label : col.name).capitalize() + "</span>",
+ column;
if ($defined(col.renderer)) {
if ($type(col.renderer) == 'string') {
if (Jx.Grid.Renderer[col.renderer.capitalize()]) {
@@ -32724,7 +32759,6 @@
renderer = new Jx.Grid.Renderer[col.renderer.type.capitalize()](col.renderer);
}
}
- var format = $defined(col.format) ? col.format : null;
if (format) {
if ($type(format) == 'string' &&
$defined(Jx.Formatter[format.capitalize()])) {
@@ -32735,8 +32769,7 @@
renderer.options.formatter = new Jx.Formatter[format.type.capitalize()](format);
}
}
- var template = "<span class='jxGridCellContent'>"+ ($defined(col.label) ? col.label : col.name).capitalize() + "</span>";
- var column = new Jx.Column({
+ column = new Jx.Column({
grid: this,
template: template,
renderMode: $defined(col.renderMode) ? col.renderMode : $defined(col.width) ? 'fixed' : 'fit',
@@ -32753,13 +32786,13 @@
}, this);
this.columns.addColumns(columns);
if (this.columns.useHeaders()) {
- tr = new Element('tr'),
+ tr = new Element('tr');
this.columns.getHeaders(tr);
this.colObj.getElement('thead').empty().adopt(tr);
}
this.columns.calculateWidths();
this.columns.createRules(this.styleSheet+'Columns', '.'+this.uniqueId);
- this.fireEvent('doneCreateGrid')
+ this.fireEvent('doneCreateGrid');
this.drawStore();
},
@@ -32775,26 +32808,57 @@
} else {
this.store.first();
}
- this.drawRow(record, this.store.index, position)
+ this.drawRow(record, this.store.index, position);
}
},
- updateRow: function(index, column, oldvalue, newvalue) {
+ /**
+ * APIMethod: updateRow
+ * update a single row in the grid
+ *
+ * Parameters:
+ * index - the row to update
+ */
+ updateRow: function(index) {
var record = this.store.getRecord(index);
this.drawRow(record, index, 'replace');
},
+ /**
+ * APIMethod: removeRow
+ * remove a single row from the grid
+ *
+ * Parameters:
+ * store
+ * index
+ */
removeRow: function (store, index) {
this.gridObj.deleteRow(index);
this.rowObj.deleteRow(index);
},
+ /**
+ * APIMethod: removeRows
+ * removes multiple rows from the grid
+ *
+ * Parameters:
+ * store
+ * index
+ */
removeRows: function (store, first, last) {
for (var i = first; i <= last; i++) {
this.removeRow(store, first);
}
},
+ /**
+ * APIMethod: setColumnWidth
+ * set the width of a column in pixels
+ *
+ * Parameters:
+ * column
+ * width
+ */
setColumnWidth: function(column, width) {
if (column) {
column.width = width;
@@ -32827,7 +32891,8 @@
/**
* Method: drawRow
- * this method does the heavy lifting of drawing a single record into the grid
+ * this method does the heavy lifting of drawing a single record into the
+ * grid
*
* Parameters:
* record - {Jx.Record} the record to render
@@ -32849,7 +32914,8 @@
getData,
tr,
th,
- text = index + 1;
+ text = index + 1,
+ rh;
if (!$defined(position) || !['top','bottom','replace'].contains(position)) {
position = 'bottom';
}
@@ -32887,11 +32953,11 @@
th = row.getRowHeaderCell(text);
if (row.options.headerColumn && renderer.domInsert) {
th.adopt(rowHeaderColumn.getHTML());
- };
+ }
if (autoRowHeight) {
th.setStyle('height', tr.childNodes[0].getContentBoxSize().height);
}
- var rh = new Element('tr').adopt(th);
+ rh = new Element('tr').adopt(th);
if (position == 'replace' && index < rowBody.childNodes.length) {
rh.inject(rowBody.childNodes[index], 'after');
rowBody.childNodes[index].dispose();
@@ -32901,14 +32967,22 @@
}
},
+ /**
+ * Method: clickColumnHeader
+ * handle clicks on the column header
+ */
clickColumnHeader: function(e) {
var target = e.target;
if (target.getParent('thead')) {
target = target.tagName == 'TH' ? target : target.getParent('th');
- this.fireEvent('gridColumnClick', target)
+ this.fireEvent('gridColumnClick', target);
}
},
+ /**
+ * Method: moveColumnHeader
+ * handle the mouse moving over the column header
+ */
moveColumnHeader: function(e) {
var target = e.target;
target = target.tagName == 'TH' ? target : target.getParent('th.jxGridColHead');
@@ -32927,14 +33001,22 @@
}
},
+ /**
+ * Method: clickRowHeader
+ * handle clicks on the row header
+ */
clickRowHeader: function(e) {
var target = e.target;
if (target.getParent('tbody')) {
- target = target.tagName == 'TH' ? target : target.getParent('th'),
- this.fireEvent('gridRowClick', target)
+ target = target.tagName == 'TH' ? target : target.getParent('th');
+ this.fireEvent('gridRowClick', target);
}
},
+ /**
+ * Method: moveRowHeader
+ * handle the mouse moving over the row header
+ */
moveRowHeader: function(e) {
var target = e.target;
target = target.tagName == 'TH' ? target : target.getParent('th.jxGridRowHead');
@@ -32953,6 +33035,10 @@
}
},
+ /**
+ * Method: clickCell
+ * handle clicks on cells in the grid
+ */
clickCell: function(e) {
var target = e.target;
if (target.getParent('tbody')) {
@@ -32961,6 +33047,10 @@
}
},
+ /**
+ * Method: moveCell
+ * handle the mouse moving over cells in the grid
+ */
moveCell: function(e) {
var target = e.target,
data,
@@ -32994,39 +33084,49 @@
cell = cell.getParent('td.jxGridCell');
}
if (cell) {
- // data = cell.retrieve('jxCellData');
- if (!data) {
- body = this.gridTableBody;
- row = body.getChildren().indexOf(cell.getParent('tr'));
- this.columns.columns.some(function(col,idx){
- if (cell.hasClass('jxGridCol'+idx)) {
- index = idx;
- column = col;
- return true;
- }
- return false;
- })
- data = {
- row: row,
- column: column,
- index: index
- };
- cell.store('jxCellData', data);
- }
+ body = this.gridTableBody;
+ row = body.getChildren().indexOf(cell.getParent('tr'));
+ this.columns.columns.some(function(col,idx){
+ if (cell.hasClass('jxGridCol'+idx)) {
+ index = idx;
+ column = col;
+ return true;
+ }
+ return false;
+ });
+ data = {
+ row: row,
+ column: column,
+ index: index
+ };
+ cell.store('jxCellData', data);
}
return data;
},
+ /**
+ * Method: leaveGrid
+ * handle the mouse leaving the grid
+ */
leaveGrid: function(e) {
this.hoverCell = null;
this.fireEvent('gridMouseLeave');
},
+ /**
+ * Method: changeText
+ * rerender the grid when the language changes
+ */
changeText : function(lang) {
this.parent();
this.render();
},
-
+
+ /**
+ * Method: addEvent
+ * override default addEvent to also trigger wanting the event
+ * which will then cause the underlying events to be registered
+ */
addEvent: function(name, fn) {
this.wantEvent(name);
this.parent(name, fn);
@@ -33079,6 +33179,12 @@
*/
attached: null,
+ /**
+ * Property: domInsert
+ * boolean, indicates if the renderer needs to insert a DOM element
+ * instead of just outputing some templated HTML. Renderers that
+ * do use domInsert will be slower.
+ */
domInsert: false,
classes: $H({
@@ -33171,7 +33277,6 @@
columnsNeeded: null,
-
init: function () {
this.parent();
var options = this.options,
@@ -33183,7 +33288,7 @@
if (t === 'object') {
// allow users to leave the options object blank
if(!$defined(options.formatter.options)) {
- options.formatter.options = {}
+ options.formatter.options = {};
}
options.formatter = new Jx.Formatter[options.formatter.name](
options.formatter.options);
@@ -33538,31 +33643,44 @@
});
}
} else {
- grid.wantEvent('gridCellClick');
+ // grid.wantEvent('gridCellClick');
grid.addEvent('gridCellClick', this.onCellClick);
}
},
+ /**
+ * Method: render
+ * required for the renderer interface
+ */
render: function() {
- this.domObj = new Element('input', {
+ this.domObj = new Element('span', {
+ 'class': 'jxGridCellContent'
+ });
+ new Element('input', {
'class': 'jxGridSelector',
type: 'checkbox',
events: {
change: this.checkSelection
}
- });
+ }).inject(this.domObj);
},
+ /**
+ * Method: toElement
+ * required for the Renderer interface
+ */
toElement: function() {
return this.domObj;
},
+ /**
+ * Method: afterGridRender
+ */
afterGridRender: function () {
if (this.options.checkAsHeader) {
var chkCol = document.id(this.checkColumn).clone();
chkCol.getElement('input').addEvent('change',this.checkAll);
this.grid.rowColContainer.adopt(chkCol);
- //document.id(this.checkColumn).inject(this.grid.rowColContainer);
}
this.grid.removeEvent('doneCreateGrid',this.afterGridRender);
},
@@ -33751,6 +33869,9 @@
this.selectRowHeader(row);
},
+ /**
+ * Method: setCheckField
+ */
setCheckField: function (row, checked) {
var grid = this.grid,
options = this.options,
@@ -34028,13 +34149,13 @@
return;
}
this.grid = grid;
- this.grid.wantEvent('gridCellEnter');
- this.grid.wantEvent('gridCellLeave');
- this.grid.wantEvent('gridRowEnter');
- this.grid.wantEvent('gridRowLeave');
- this.grid.wantEvent('gridColumnEnter');
- this.grid.wantEvent('gridColumnLeave');
- this.grid.wantEvent('gridMouseLeave');
+ // this.grid.wantEvent('gridCellEnter');
+ // this.grid.wantEvent('gridCellLeave');
+ // this.grid.wantEvent('gridRowEnter');
+ // this.grid.wantEvent('gridRowLeave');
+ // this.grid.wantEvent('gridColumnEnter');
+ // this.grid.wantEvent('gridColumnLeave');
+ // this.grid.wantEvent('gridMouseLeave');
this.grid.addEvent('gridCellEnter', this.bound.lighton);
this.grid.addEvent('gridCellLeave', this.bound.lightoff);
@@ -34295,7 +34416,6 @@
direction: null,
options: {
- event: 'gridColumnClick',
sortableClass: 'jxColSortable',
ascendingClass: 'jxGridColumnSortedAsc',
descendingClass: 'jxGridColumnSortedDesc'
@@ -34314,7 +34434,7 @@
this.grid = grid;
- this.grid.wantEvent('gridColumnClick');
+ // this.grid.wantEvent('gridColumnClick');
this.grid.addEvent('gridColumnClick', this.sort);
this.grid.addEvent('doneCreateGrid', this.modifyHeaders);
},
@@ -34324,11 +34444,14 @@
*/
detach: function() {
if (this.grid) {
- this.grid.removeEvent(this.options.event, this.sort);
+ this.grid.removeEvent('gridColumnClick', this.sort);
}
this.grid = null;
},
+ /**
+ * Method: modifyHeaders
+ */
modifyHeaders: function() {
var grid = this.grid,
columnTable = grid.colObj,
@@ -34475,6 +34598,9 @@
this.grid = null;
},
+ /**
+ * APIMethod: activate
+ */
activate: function(option) {
if ($defined(this.options[option])) {
this.options[option] = true;
@@ -34484,6 +34610,9 @@
}
},
+ /**
+ * APIMethod: deactivate
+ */
deactivate: function(option) {
if ($defined(this.options[option])) {
this.options[option] = false;
@@ -34846,7 +34975,7 @@
this.grid = grid;
//this.grid.gridTableBody.addEvent('click', this.onCellClick);
- this.grid.wantEvent('gridCellClick');
+ // this.grid.wantEvent('gridCellClick');
this.grid.addEvent('gridCellClick', this.onCellClick);
/*
More information about the fusion-commits
mailing list