extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/grid/feature/GroupingSummary.js

@@ -0,0 +1,243 @@
+/**
+ * This feature adds an aggregate summary row at the bottom of each group that is provided
+ * by the {@link Ext.grid.feature.Grouping} feature. There are two aspects to the summary:
+ *
+ * ## Calculation
+ *
+ * The summary value needs to be calculated for each column in the grid. This is controlled
+ * by the summaryType option specified on the column. There are several built in summary types,
+ * which can be specified as a string on the column configuration. These call underlying methods
+ * on the store:
+ *
+ *  - {@link Ext.data.Store#count count}
+ *  - {@link Ext.data.Store#sum sum}
+ *  - {@link Ext.data.Store#min min}
+ *  - {@link Ext.data.Store#max max}
+ *  - {@link Ext.data.Store#average average}
+ *
+ * Alternatively, the summaryType can be a function definition. If this is the case,
+ * the function is called with an array of records to calculate the summary value.
+ *
+ * ## Rendering
+ *
+ * Similar to a column, the summary also supports a summaryRenderer function. This
+ * summaryRenderer is called before displaying a value. The function is optional, if
+ * not specified the default calculated value is shown. The summaryRenderer is called with:
+ *
+ *  - value {Object} - The calculated value.
+ *  - summaryData {Object} - Contains all raw summary values for the row.
+ *  - field {String} - The name of the field we are calculating
+ *
+ * ## Example Usage
+ *
+ *     @example
+ *     Ext.define('TestResult', {
+ *         extend: 'Ext.data.Model',
+ *         fields: ['student', 'subject', {
+ *             name: 'mark',
+ *             type: 'int'
+ *         }]
+ *     });
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         width: 200,
+ *         height: 240,
+ *         renderTo: document.body,
+ *         features: [{
+ *             groupHeaderTpl: 'Subject: {name}',
+ *             ftype: 'groupingsummary'
+ *         }],
+ *         store: {
+ *             model: 'TestResult',
+ *             groupField: 'subject',
+ *             data: [{
+ *                 student: 'Student 1',
+ *                 subject: 'Math',
+ *                 mark: 84
+ *             },{
+ *                 student: 'Student 1',
+ *                 subject: 'Science',
+ *                 mark: 72
+ *             },{
+ *                 student: 'Student 2',
+ *                 subject: 'Math',
+ *                 mark: 96
+ *             },{
+ *                 student: 'Student 2',
+ *                 subject: 'Science',
+ *                 mark: 68
+ *             }]
+ *         },
+ *         columns: [{
+ *             dataIndex: 'student',
+ *             text: 'Name',
+ *             summaryType: 'count',
+ *             summaryRenderer: function(value){
+ *                 return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
+ *             }
+ *         }, {
+ *             dataIndex: 'mark',
+ *             text: 'Mark',
+ *             summaryType: 'average'
+ *         }]
+ *     });
+ */
+Ext.define('Ext.grid.feature.GroupingSummary', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.grid.feature.Grouping',
+
+    alias: 'feature.groupingsummary',
+
+    mixins: {
+        summary: 'Ext.grid.feature.AbstractSummary'
+    },
+
+    /* End Definitions */
+
+    init: function() {
+        this.mixins.summary.init.call(this);
+    },
+
+   /**
+    * Modifies the row template to include the summary row.
+    * @private
+    * @return {String} The modified template
+    */
+   getFeatureTpl: function() {
+        var tpl = this.callParent(arguments);
+
+        if (this.showSummaryRow) {
+            // lop off the end </tpl> so we can attach it
+            tpl = tpl.replace('</tpl>', '');
+            tpl += '{[this.printSummaryRow(xindex)]}</tpl>';
+        }
+        return tpl;
+    },
+
+    /**
+     * Gets any fragments needed for the template.
+     * @private
+     * @return {Object} The fragments
+     */
+    getFragmentTpl: function() {
+        var me = this,
+            fragments = me.callParent();
+
+        Ext.apply(fragments, me.getSummaryFragments());
+        if (me.showSummaryRow) {
+            // this gets called before render, so we'll setup the data here.
+            me.summaryGroups = me.view.store.getGroups();
+            me.summaryData = me.generateSummaryData();
+        }
+        return fragments;
+    },
+
+    /**
+     * Gets the data for printing a template row
+     * @private
+     * @param {Number} index The index in the template
+     * @return {Array} The template values
+     */
+    getPrintData: function(index){
+        var me = this,
+            columns = me.view.headerCt.getColumnsForTpl(),
+            i = 0,
+            length = columns.length,
+            data = [],
+            name = me.summaryGroups[index - 1].name,
+            active = me.summaryData[name],
+            column;
+
+        for (; i < length; ++i) {
+            column = columns[i];
+            column.gridSummaryValue = this.getColumnValue(column, active);
+            data.push(column);
+        }
+        return data;
+    },
+
+    /**
+     * Generates all of the summary data to be used when processing the template
+     * @private
+     * @return {Object} The summary data
+     */
+    generateSummaryData: function(){
+        var me = this,
+            data = {},
+            remoteData = {},
+            store = me.view.store,
+            groupField = this.getGroupField(),
+            reader = store.proxy.reader,
+            groups = me.summaryGroups,
+            columns = me.view.headerCt.getColumnsForTpl(),
+            remote,
+            i,
+            length,
+            fieldData,
+            root,
+            key,
+            comp,
+            summaryRows,
+            s,
+            sLen,
+            convertedSummaryRow;
+
+        for (i = 0, length = groups.length; i < length; ++i) {
+            data[groups[i].name] = {};
+        }
+
+        /**
+         * @cfg {String} [remoteRoot=undefined]
+         * The name of the property which contains the Array of summary objects.
+         * It allows to use server-side calculated summaries.
+         */
+        if (me.remoteRoot && reader.rawData) {
+            // reset reader root and rebuild extractors to extract summaries data
+            root = reader.root;
+            reader.root = me.remoteRoot;
+            reader.buildExtractors(true);
+            summaryRows = reader.getRoot(reader.rawData);
+            sLen      = summaryRows.length;
+
+            // Ensure the Reader has a data conversion function to convert a raw data row into a Record data hash
+            if (!reader.convertRecordData) {
+                reader.buildExtractors();
+            }
+
+            for (s = 0; s < sLen; s++) {
+                convertedSummaryRow = {};
+
+                // Convert a raw data row into a Record's hash object using the Reader
+                reader.convertRecordData(convertedSummaryRow, summaryRows[s]);
+                remoteData[convertedSummaryRow[groupField]] = convertedSummaryRow;
+            }
+
+            // restore initial reader configuration
+            reader.root = root;
+            reader.buildExtractors(true);
+        }
+
+        for (i = 0, length = columns.length; i < length; ++i) {
+            comp = Ext.getCmp(columns[i].id);
+            fieldData = me.getSummary(store, comp.summaryType, comp.dataIndex, true);
+
+            for (key in fieldData) {
+                if (fieldData.hasOwnProperty(key)) {
+                    data[key][comp.id] = fieldData[key];
+                }
+            }
+
+            for (key in remoteData) {
+                if (remoteData.hasOwnProperty(key)) {
+                    remote = remoteData[key][comp.dataIndex];
+                    if (remote !== undefined && data[key] !== undefined) {
+                        data[key][comp.id] = remote;
+                    }
+                }
+            }
+        }
+        return data;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/grid/feature/RowBody.js

@@ -0,0 +1,116 @@
+/**
+ * The rowbody feature enhances the grid's markup to have an additional
+ * tr -> td -> div which spans the entire width of the original row.
+ *
+ * This is useful to to associate additional information with a particular
+ * record in a grid.
+ *
+ * Rowbodies are initially hidden unless you override getAdditionalData.
+ *
+ * Will expose additional events on the gridview with the prefix of 'rowbody'.
+ * For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.
+ *
+ * # Example
+ *
+ *     @example
+ *     Ext.define('Animal', {
+ *         extend: 'Ext.data.Model',
+ *         fields: ['name', 'latin', 'desc']
+ *     });
+ * 
+ *     Ext.create('Ext.grid.Panel', {
+ *         width: 400,
+ *         height: 300,
+ *         renderTo: Ext.getBody(),
+ *         store: {
+ *             model: 'Animal',
+ *             data: [
+ *                 {name: 'Tiger', latin: 'Panthera tigris',
+ *                  desc: 'The largest cat species, weighing up to 306 kg (670 lb).'},
+ *                 {name: 'Roman snail', latin: 'Helix pomatia',
+ *                  desc: 'A species of large, edible, air-breathing land snail.'},
+ *                 {name: 'Yellow-winged darter', latin: 'Sympetrum flaveolum',
+ *                  desc: 'A dragonfly found in Europe and mid and Northern China.'},
+ *                 {name: 'Superb Fairy-wren', latin: 'Malurus cyaneus',
+ *                  desc: 'Common and familiar across south-eastern Australia.'}
+ *             ]
+ *         },
+ *         columns: [{
+ *             dataIndex: 'name',
+ *             text: 'Common name',
+ *             width: 125
+ *         }, {
+ *             dataIndex: 'latin',
+ *             text: 'Scientific name',
+ *             flex: 1
+ *         }],
+ *         features: [{
+ *             ftype: 'rowbody',
+ *             getAdditionalData: function(data, rowIndex, record, orig) {
+ *                 var headerCt = this.view.headerCt,
+ *                     colspan = headerCt.getColumnCount();
+ *                 // Usually you would style the my-body-class in CSS file
+ *                 return {
+ *                     rowBody: '<div style="padding: 1em">'+record.get("desc")+'</div>',
+ *                     rowBodyCls: "my-body-class",
+ *                     rowBodyColspan: colspan
+ *                 };
+ *             }
+ *         }]
+ *     });
+ */
+Ext.define('Ext.grid.feature.RowBody', {
+    extend: 'Ext.grid.feature.Feature',
+    alias: 'feature.rowbody',
+    rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',
+    rowBodyTrCls: Ext.baseCSSPrefix + 'grid-rowbody-tr',
+    rowBodyTdCls: Ext.baseCSSPrefix + 'grid-cell-rowbody',
+    rowBodyDivCls: Ext.baseCSSPrefix + 'grid-rowbody',
+
+    eventPrefix: 'rowbody',
+    eventSelector: '.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',
+    
+    getRowBody: function(values) {
+        return [
+            '<tr class="' + this.rowBodyTrCls + ' {rowBodyCls}">',
+                '<td class="' + this.rowBodyTdCls + '" colspan="{rowBodyColspan}">',
+                    '<div class="' + this.rowBodyDivCls + '">{rowBody}</div>',
+                '</td>',
+            '</tr>'
+        ].join('');
+    },
+    
+    // injects getRowBody into the metaRowTpl.
+    getMetaRowTplFragments: function() {
+        return {
+            getRowBody: this.getRowBody,
+            rowBodyTrCls: this.rowBodyTrCls,
+            rowBodyTdCls: this.rowBodyTdCls,
+            rowBodyDivCls: this.rowBodyDivCls
+        };
+    },
+
+    mutateMetaRowTpl: function(metaRowTpl) {
+        metaRowTpl.push('{[this.getRowBody(values)]}');
+    },
+
+    /**
+     * Provides additional data to the prepareData call within the grid view.
+     * The rowbody feature adds 3 additional variables into the grid view's template.
+     * These are rowBodyCls, rowBodyColspan, and rowBody.
+     * @param {Object} data The data for this particular record.
+     * @param {Number} idx The row index for this record.
+     * @param {Ext.data.Model} record The record instance
+     * @param {Object} orig The original result from the prepareData call to massage.
+     */
+    getAdditionalData: function(data, idx, record, orig) {
+        var headerCt = this.view.headerCt,
+            colspan  = headerCt.getColumnCount();
+
+        return {
+            rowBody: "",
+            rowBodyCls: this.rowBodyCls,
+            rowBodyColspan: colspan
+        };
+    }
+});

data/app/assets/javascripts/extjs-rails/src/grid/feature/RowWrap.js

@@ -0,0 +1,120 @@
+/**
+ * @private
+ */
+Ext.define('Ext.grid.feature.RowWrap', {
+    extend: 'Ext.grid.feature.Feature',
+    alias: 'feature.rowwrap',
+
+    // turn off feature events.
+    hasFeatureEvent: false,
+
+    init: function() {
+        if (!this.disabled) {
+            this.enable();
+        }
+    },
+
+    getRowSelector: function(){
+        return 'tr:has(> ' + this.view.cellSelector + ')';
+    },
+
+    enable: function(){
+        var me = this,
+            view = me.view;
+
+        me.callParent();
+        // we need to mutate the rowSelector since the template changes the ordering
+        me.savedRowSelector = view.rowSelector;
+        view.rowSelector = me.getRowSelector();
+
+        // Extra functionality needed on header resize when row is wrapped:
+        // Every individual cell in a column needs its width syncing.
+        view.onHeaderResize = Ext.Function.createSequence(view.onHeaderResize, me.onHeaderResize, me);
+    },
+
+    disable: function(){
+        var me = this,
+            view = me.view,
+            saved = me.savedRowSelector;
+
+        me.callParent();
+        if (saved) {
+            view.rowSelector = saved;
+        }
+        delete me.savedRowSelector;
+        delete view.onHeaderResize;
+    },
+
+    mutateMetaRowTpl: function(metaRowTpl) {  
+        var prefix = Ext.baseCSSPrefix;      
+        // Remove "x-grid-row" from the first row, note this could be wrong
+        // if some other feature unshifted things in front.
+        metaRowTpl[0] = metaRowTpl[0].replace(prefix + 'grid-row', '');
+        metaRowTpl[0] = metaRowTpl[0].replace("{[this.embedRowCls()]}", "");
+        // 2
+        metaRowTpl.unshift('<table class="' + prefix + 'grid-table ' + prefix + 'grid-table-resizer" style="width: {[this.embedFullWidth()]}px;">');
+        // 1
+        metaRowTpl.unshift('<tr class="' + prefix + 'grid-row {[this.embedRowCls()]}"><td colspan="{[this.embedColSpan()]}"><div class="' + prefix + 'grid-rowwrap-div">');
+
+        // 3
+        metaRowTpl.push('</table>');
+        // 4
+        metaRowTpl.push('</div></td></tr>');
+    },
+
+    embedColSpan: function() {
+        return '{colspan}';
+    },
+
+    embedFullWidth: function() {
+        return '{fullWidth}';
+    },
+
+    getAdditionalData: function(data, idx, record, orig) {
+        var headerCt = this.view.headerCt,
+            colspan  = headerCt.getColumnCount(),
+            fullWidth = headerCt.getFullWidth(),
+            items    = headerCt.query('gridcolumn'),
+            itemsLn  = items.length,
+            i = 0,
+            o = {
+                colspan: colspan,
+                fullWidth: fullWidth
+            },
+            id,
+            tdClsKey,
+            colResizerCls;
+
+        for (; i < itemsLn; i++) {
+            id = items[i].id;
+            tdClsKey = id + '-tdCls';
+            colResizerCls = Ext.baseCSSPrefix + 'grid-col-resizer-'+id;
+            // give the inner td's the resizer class
+            // while maintaining anything a user may have injected via a custom
+            // renderer
+            o[tdClsKey] = colResizerCls + " " + (orig[tdClsKey] ? orig[tdClsKey] : '');
+            // TODO: Unhackify the initial rendering width's
+            o[id+'-tdAttr'] = " style=\"width: " + (items[i].hidden ? 0 : items[i].getDesiredWidth()) + "px;\" "/* + (i === 0 ? " rowspan=\"2\"" : "")*/;
+            if (orig[id+'-tdAttr']) {
+                o[id+'-tdAttr'] += orig[id+'-tdAttr'];
+            }
+        }
+
+        return o;
+    },
+
+    getMetaRowTplFragments: function() {
+        return {
+            embedFullWidth: this.embedFullWidth,
+            embedColSpan: this.embedColSpan
+        };
+    },
+
+    // When row is wrapped, every individual cell in a column needs its width syncing
+    onHeaderResize: function(header, w, suppressFocus) {
+        var el = this.view.el;
+        if (el) {
+            el.select('td.' + Ext.baseCSSPrefix + 'grid-col-resizer-' + header.id).setWidth(w);
+        }
+    }
+});