Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updates to make printer work with objects that are not Ext.Component …

…subclasses
  • Loading branch information...
commit 6981b005bcb7129c46df91b68afbe39ef86b1e14 1 parent 0b81c73
Ed Spencer authored
Showing with 119 additions and 116 deletions.
  1. +109 −107 Printer-all.js
  2. +1 −2  build
  3. +9 −7 renderers/Base.js
View
216 Printer-all.js
@@ -90,19 +90,21 @@ Ext.override(Ext.Component, {
/**
* @class Ext.ux.Printer.BaseRenderer
+ * @extends Object
* @author Ed Spencer
* Abstract base renderer class. Don't use this directly, use a subclass instead
*/
-Ext.ux.Printer.BaseRenderer = function() {};
-
-Ext.ux.Printer.BaseRenderer.prototype = {
+Ext.ux.Printer.BaseRenderer = Ext.extend(Object, {
/**
* Prints the component
* @param {Ext.Component} component The component to print
*/
print: function(component) {
- //open up a new printing window, write to it, print it and close
- var win = window.open('', String.format("print-{0}-{1}", component.getXType(), component.id));
+ var name = component && component.getXType
+ ? String.format("print-{0}-{1}", component.getXType(), component.id)
+ : "print";
+
+ var win = window.open('', name);
win.document.write(this.generateHTML(component));
win.document.close();
@@ -146,7 +148,7 @@ Ext.ux.Printer.BaseRenderer.prototype = {
* @return {Array} An empty array (override this to prepare your own data)
*/
prepareData: function(component) {
- return [];
+ return component;
},
/**
@@ -164,109 +166,8 @@ Ext.ux.Printer.BaseRenderer.prototype = {
* The path at which the print stylesheet can be found (defaults to 'stylesheets/print.css')
*/
stylesheetPath: 'stylesheets/print.css'
-};
-
-/**
- * @class Ext.ux.Printer.GridPanelRenderer
- * @extends Ext.ux.Printer.BaseRenderer
- * @author Ed Spencer
- * Helper class to easily print the contents of a grid. Will open a new window with a table where the first row
- * contains the headings from your column model, and with a row for each item in your grid's store. When formatted
- * with appropriate CSS it should look very similar to a default grid. If renderers are specified in your column
- * model, they will be used in creating the table. Override headerTpl and bodyTpl to change how the markup is generated
- */
-Ext.ux.Printer.GridPanelRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
-
- /**
- * Generates the body HTML for the grid
- * @param {Ext.grid.GridPanel} grid The grid to print
- */
- generateBody: function(grid) {
- var columns = this.getColumns(grid);
-
- //use the headerTpl and bodyTpl XTemplates to create the main XTemplate below
- var headings = this.headerTpl.apply(columns);
- var body = this.bodyTpl.apply(columns);
-
- return String.format('<table>{0}<tpl for=".">{1}</tpl></table>', headings, body);
- },
-
- /**
- * Prepares data from the grid for use in the XTemplate
- * @param {Ext.grid.GridPanel} grid The grid panel
- * @return {Array} Data suitable for use in the XTemplate
- */
- prepareData: function(grid) {
- //We generate an XTemplate here by using 2 intermediary XTemplates - one to create the header,
- //the other to create the body (see the escaped {} below)
- var columns = this.getColumns(grid);
-
- //build a useable array of store data for the XTemplate
- var data = [];
- grid.store.data.each(function(item) {
- var convertedData = {};
-
- //apply renderers from column model
- Ext.iterate(item.data, function(key, value) {
- Ext.each(columns, function(column) {
- if (column.dataIndex == key) {
- convertedData[key] = column.renderer ? column.renderer(value, null, item) : value;
- return false;
- }
- }, this);
- });
-
- data.push(convertedData);
- });
-
- return data;
- },
-
- /**
- * Returns the array of columns from a grid
- * @param {Ext.grid.GridPanel} grid The grid to get columns from
- * @return {Array} The array of grid columns
- */
- getColumns: function(grid) {
- var columns = [];
-
- Ext.each(grid.getColumnModel().config, function(col) {
- if (col.hidden != true) columns.push(col);
- }, this);
-
- return columns;
- },
-
- /**
- * @property headerTpl
- * @type Ext.XTemplate
- * The XTemplate used to create the headings row. By default this just uses <th> elements, override to provide your own
- */
- headerTpl: new Ext.XTemplate(
- '<tr>',
- '<tpl for=".">',
- '<th>{header}</th>',
- '</tpl>',
- '</tr>'
- ),
-
- /**
- * @property bodyTpl
- * @type Ext.XTemplate
- * The XTemplate used to create each row. This is used inside the 'print' function to build another XTemplate, to which the data
- * are then applied (see the escaped dataIndex attribute here - this ends up as "{dataIndex}")
- */
- bodyTpl: new Ext.XTemplate(
- '<tr>',
- '<tpl for=".">',
- '<td>\{{dataIndex}\}</td>',
- '</tpl>',
- '</tr>'
- )
});
-Ext.ux.Printer.registerRenderer('grid', Ext.ux.Printer.GridPanelRenderer);
-
/**
* @class Ext.ux.Printer.ColumnTreeRenderer
* @extends Ext.ux.Printer.BaseRenderer
@@ -371,3 +272,104 @@ Ext.ux.Printer.ColumnTreeRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
Ext.ux.Printer.registerRenderer('columntree', Ext.ux.Printer.ColumnTreeRenderer);
+/**
+ * @class Ext.ux.Printer.GridPanelRenderer
+ * @extends Ext.ux.Printer.BaseRenderer
+ * @author Ed Spencer
+ * Helper class to easily print the contents of a grid. Will open a new window with a table where the first row
+ * contains the headings from your column model, and with a row for each item in your grid's store. When formatted
+ * with appropriate CSS it should look very similar to a default grid. If renderers are specified in your column
+ * model, they will be used in creating the table. Override headerTpl and bodyTpl to change how the markup is generated
+ */
+Ext.ux.Printer.GridPanelRenderer = Ext.extend(Ext.ux.Printer.BaseRenderer, {
+
+ /**
+ * Generates the body HTML for the grid
+ * @param {Ext.grid.GridPanel} grid The grid to print
+ */
+ generateBody: function(grid) {
+ var columns = this.getColumns(grid);
+
+ //use the headerTpl and bodyTpl XTemplates to create the main XTemplate below
+ var headings = this.headerTpl.apply(columns);
+ var body = this.bodyTpl.apply(columns);
+
+ return String.format('<table>{0}<tpl for=".">{1}</tpl></table>', headings, body);
+ },
+
+ /**
+ * Prepares data from the grid for use in the XTemplate
+ * @param {Ext.grid.GridPanel} grid The grid panel
+ * @return {Array} Data suitable for use in the XTemplate
+ */
+ prepareData: function(grid) {
+ //We generate an XTemplate here by using 2 intermediary XTemplates - one to create the header,
+ //the other to create the body (see the escaped {} below)
+ var columns = this.getColumns(grid);
+
+ //build a useable array of store data for the XTemplate
+ var data = [];
+ grid.store.data.each(function(item) {
+ var convertedData = {};
+
+ //apply renderers from column model
+ Ext.iterate(item.data, function(key, value) {
+ Ext.each(columns, function(column) {
+ if (column.dataIndex == key) {
+ convertedData[key] = column.renderer ? column.renderer(value, null, item) : value;
+ return false;
+ }
+ }, this);
+ });
+
+ data.push(convertedData);
+ });
+
+ return data;
+ },
+
+ /**
+ * Returns the array of columns from a grid
+ * @param {Ext.grid.GridPanel} grid The grid to get columns from
+ * @return {Array} The array of grid columns
+ */
+ getColumns: function(grid) {
+ var columns = [];
+
+ Ext.each(grid.getColumnModel().config, function(col) {
+ if (col.hidden != true) columns.push(col);
+ }, this);
+
+ return columns;
+ },
+
+ /**
+ * @property headerTpl
+ * @type Ext.XTemplate
+ * The XTemplate used to create the headings row. By default this just uses <th> elements, override to provide your own
+ */
+ headerTpl: new Ext.XTemplate(
+ '<tr>',
+ '<tpl for=".">',
+ '<th>{header}</th>',
+ '</tpl>',
+ '</tr>'
+ ),
+
+ /**
+ * @property bodyTpl
+ * @type Ext.XTemplate
+ * The XTemplate used to create each row. This is used inside the 'print' function to build another XTemplate, to which the data
+ * are then applied (see the escaped dataIndex attribute here - this ends up as "{dataIndex}")
+ */
+ bodyTpl: new Ext.XTemplate(
+ '<tr>',
+ '<tpl for=".">',
+ '<td>\{{dataIndex}\}</td>',
+ '</tpl>',
+ '</tr>'
+ )
+});
+
+Ext.ux.Printer.registerRenderer('grid', Ext.ux.Printer.GridPanelRenderer);
+
View
3  build
@@ -9,5 +9,4 @@
Printer.js
renderers/Base.js
-renderers/GridPanel.js
-renderers/ColumnTree.js
+renderers/*.js
View
16 renderers/Base.js
@@ -1,18 +1,20 @@
/**
* @class Ext.ux.Printer.BaseRenderer
+ * @extends Object
* @author Ed Spencer
* Abstract base renderer class. Don't use this directly, use a subclass instead
*/
-Ext.ux.Printer.BaseRenderer = function() {};
-
-Ext.ux.Printer.BaseRenderer.prototype = {
+Ext.ux.Printer.BaseRenderer = Ext.extend(Object, {
/**
* Prints the component
* @param {Ext.Component} component The component to print
*/
print: function(component) {
- //open up a new printing window, write to it, print it and close
- var win = window.open('', String.format("print-{0}-{1}", component.getXType(), component.id));
+ var name = component && component.getXType
+ ? String.format("print-{0}-{1}", component.getXType(), component.id)
+ : "print";
+
+ var win = window.open('', name);
win.document.write(this.generateHTML(component));
win.document.close();
@@ -56,7 +58,7 @@ Ext.ux.Printer.BaseRenderer.prototype = {
* @return {Array} An empty array (override this to prepare your own data)
*/
prepareData: function(component) {
- return [];
+ return component;
},
/**
@@ -74,4 +76,4 @@ Ext.ux.Printer.BaseRenderer.prototype = {
* The path at which the print stylesheet can be found (defaults to 'stylesheets/print.css')
*/
stylesheetPath: 'stylesheets/print.css'
-};
+});
Please sign in to comment.
Something went wrong with that request. Please try again.