extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/grid/column/Date.js

@@ -0,0 +1,63 @@
+/**
+ * A Column definition class which renders a passed date according to the default locale, or a configured
+ * {@link #format}.
+ *
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'sampleStore',
+ *         fields:[
+ *             { name: 'symbol', type: 'string' },
+ *             { name: 'date',   type: 'date' },
+ *             { name: 'change', type: 'number' },
+ *             { name: 'volume', type: 'number' },
+ *             { name: 'topday', type: 'date' }                        
+ *         ],
+ *         data:[
+ *             { symbol: "msft",   date: '2011/04/22', change: 2.43, volume: 61606325, topday: '04/01/2010' },
+ *             { symbol: "goog",   date: '2011/04/22', change: 0.81, volume: 3053782,  topday: '04/11/2010' },
+ *             { symbol: "apple",  date: '2011/04/22', change: 1.35, volume: 24484858, topday: '04/28/2010' },            
+ *             { symbol: "sencha", date: '2011/04/22', change: 8.85, volume: 5556351,  topday: '04/22/2010' }            
+ *         ]
+ *     });
+ *     
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Date Column Demo',
+ *         store: Ext.data.StoreManager.lookup('sampleStore'),
+ *         columns: [
+ *             { text: 'Symbol',   dataIndex: 'symbol', flex: 1 },
+ *             { text: 'Date',     dataIndex: 'date',   xtype: 'datecolumn',   format:'Y-m-d' },
+ *             { text: 'Change',   dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
+ *             { text: 'Volume',   dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' },
+ *             { text: 'Top Day',  dataIndex: 'topday', xtype: 'datecolumn',   format:'l' }            
+ *         ],
+ *         height: 200,
+ *         width: 450,
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.grid.column.Date', {
+    extend: 'Ext.grid.column.Column',
+    alias: ['widget.datecolumn'],
+    requires: ['Ext.Date'],
+    alternateClassName: 'Ext.grid.DateColumn',
+
+    /**
+     * @cfg {String} format
+     * A formatting string as used by {@link Ext.Date#format} to format a Date for this Column.
+     *
+     * Defaults to the default date from {@link Ext.Date#defaultFormat} which itself my be overridden
+     * in a locale file.
+     */
+
+    initComponent: function(){
+        if (!this.format) {
+            this.format = Ext.Date.defaultFormat;
+        }
+        
+        this.callParent(arguments);
+    },
+    
+    defaultRenderer: function(value){
+        return Ext.util.Format.date(value, this.format);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/grid/column/Number.js

@@ -0,0 +1,52 @@
+/**
+ * A Column definition class which renders a numeric data field according to a {@link #format} string.
+ *
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *        storeId:'sampleStore',
+ *        fields:[
+ *            { name: 'symbol', type: 'string' },
+ *            { name: 'price',  type: 'number' },
+ *            { name: 'change', type: 'number' },
+ *            { name: 'volume', type: 'number' }
+ *        ],
+ *        data:[
+ *            { symbol: "msft",   price: 25.76,  change: 2.43, volume: 61606325 },
+ *            { symbol: "goog",   price: 525.73, change: 0.81, volume: 3053782  },
+ *            { symbol: "apple",  price: 342.41, change: 1.35, volume: 24484858 },
+ *            { symbol: "sencha", price: 142.08, change: 8.85, volume: 5556351  }
+ *        ]
+ *     });
+ *     
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Number Column Demo',
+ *         store: Ext.data.StoreManager.lookup('sampleStore'),
+ *         columns: [
+ *             { text: 'Symbol',         dataIndex: 'symbol', flex: 1 },
+ *             { text: 'Current Price',  dataIndex: 'price',  renderer: Ext.util.Format.usMoney },
+ *             { text: 'Change',         dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
+ *             { text: 'Volume',         dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' }
+ *         ],
+ *         height: 200,
+ *         width: 400,
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.grid.column.Number', {
+    extend: 'Ext.grid.column.Column',
+    alias: ['widget.numbercolumn'],
+    requires: ['Ext.util.Format'],
+    alternateClassName: 'Ext.grid.NumberColumn',
+
+    /**
+     * @cfg {String} format
+     * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column.
+     */
+    //<locale>
+    format : '0,000.00',
+    //</locale>
+    
+    defaultRenderer: function(value){
+        return Ext.util.Format.number(value, this.format);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/grid/column/Template.js

@@ -0,0 +1,58 @@
+/**
+ * A Column definition class which renders a value by processing a {@link Ext.data.Model Model}'s
+ * {@link Ext.data.Model#persistenceProperty data} using a {@link #tpl configured}
+ * {@link Ext.XTemplate XTemplate}.
+ * 
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'employeeStore',
+ *         fields:['firstname', 'lastname', 'seniority', 'department'],
+ *         groupField: 'department',
+ *         data:[
+ *             { firstname: "Michael", lastname: "Scott",   seniority: 7, department: "Management" },
+ *             { firstname: "Dwight",  lastname: "Schrute", seniority: 2, department: "Sales" },
+ *             { firstname: "Jim",     lastname: "Halpert", seniority: 3, department: "Sales" },
+ *             { firstname: "Kevin",   lastname: "Malone",  seniority: 4, department: "Accounting" },
+ *             { firstname: "Angela",  lastname: "Martin",  seniority: 5, department: "Accounting" }
+ *         ]
+ *     });
+ *     
+ *     Ext.create('Ext.grid.Panel', {
+ *         title: 'Column Template Demo',
+ *         store: Ext.data.StoreManager.lookup('employeeStore'),
+ *         columns: [
+ *             { text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
+ *             { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
+ *         ],
+ *         height: 200,
+ *         width: 300,
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.grid.column.Template', {
+    extend: 'Ext.grid.column.Column',
+    alias: ['widget.templatecolumn'],
+    requires: ['Ext.XTemplate'],
+    alternateClassName: 'Ext.grid.TemplateColumn',
+
+    /**
+     * @cfg {String/Ext.XTemplate} tpl
+     * An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use to process a
+     * {@link Ext.data.Model Model}'s {@link Ext.data.Model#persistenceProperty data} to produce a
+     * column's rendered value.
+     */
+
+    initComponent: function(){
+        var me = this;
+        me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : new Ext.XTemplate(me.tpl);
+        // Set this here since the template may access any record values,
+        // so we must always run the update for this column
+        me.hasCustomRenderer = true;
+        me.callParent(arguments);
+    },
+    
+    defaultRenderer: function(value, meta, record) {
+        var data = Ext.apply({}, record.data, record.getAssociatedData());
+        return this.tpl.apply(data);
+    }
+});

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

@@ -0,0 +1,154 @@
+/**
+ * A small abstract class that contains the shared behaviour for any summary
+ * calculations to be used in the grid.
+ */
+Ext.define('Ext.grid.feature.AbstractSummary', {
+    
+    /* Begin Definitions */
+
+    extend: 'Ext.grid.feature.Feature',
+    
+    alias: 'feature.abstractsummary',
+
+    /* End Definitions */
+
+   /**
+    * @cfg
+    * True to show the summary row.
+    */
+    showSummaryRow: true,
+
+    // @private
+    nestedIdRe: /\{\{id\}([\w\-]*)\}/g,
+
+    // Listen for store updates. Eg, from an Editor.
+    init: function() {
+        var me = this;
+
+        // Summary rows must be kept in column order, so view must be refreshed on column move
+        me.grid.optimizedColumnMove = false;
+
+        me.view.mon(me.view.store, {
+            update: me.onStoreUpdate,
+            scope: me
+        });
+    },
+
+    // Refresh the whole view on edit so that the Summary gets updated
+    onStoreUpdate: function() {
+        var v = this.view;
+        if (this.showSummaryRow) {
+            v.saveScrollState();
+            v.refresh();
+            v.restoreScrollState();
+        }
+    },
+
+    /**
+     * Toggle whether or not to show the summary row.
+     * @param {Boolean} visible True to show the summary row
+     */
+    toggleSummaryRow: function(visible){
+        this.showSummaryRow = !!visible;
+    },
+
+    /**
+     * Gets any fragments to be used in the tpl
+     * @private
+     * @return {Object} The fragments
+     */
+    getSummaryFragments: function(){
+        var fragments = {};
+        if (this.showSummaryRow) {
+            Ext.apply(fragments, {
+                printSummaryRow: Ext.bind(this.printSummaryRow, this)
+            });
+        }
+        return fragments;
+    },
+
+    /**
+     * Prints a summary row
+     * @private
+     * @param {Object} index The index in the template
+     * @return {String} The value of the summary row
+     */
+    printSummaryRow: function(index){
+        var inner = this.view.getTableChunker().metaRowTpl.join(''),
+            prefix = Ext.baseCSSPrefix;
+
+        inner = inner.replace(prefix + 'grid-row', prefix + 'grid-row-summary');
+        inner = inner.replace('{{id}}', '{gridSummaryValue}');
+        inner = inner.replace(this.nestedIdRe, '{id$1}');  
+        inner = inner.replace('{[this.embedRowCls()]}', '{rowCls}');
+        inner = inner.replace('{[this.embedRowAttr()]}', '{rowAttr}');
+        inner = new Ext.XTemplate(inner, {
+            firstOrLastCls: Ext.view.TableChunker.firstOrLastCls
+        });
+
+        return inner.applyTemplate({
+            columns: this.getPrintData(index)
+        });
+    },
+
+    /**
+     * Gets the value for the column from the attached data.
+     * @param {Ext.grid.column.Column} column The header
+     * @param {Object} data The current data
+     * @return {String} The value to be rendered
+     */
+    getColumnValue: function(column, summaryData){
+        var comp     = Ext.getCmp(column.id),
+            value    = summaryData[column.id],
+            renderer = comp.summaryRenderer;
+            
+        if (!value && value !== 0) {
+            value = '\u00a0';
+        }
+
+        if (renderer) {
+            value = renderer.call(
+                comp.scope || this,
+                value,
+                summaryData,
+                column.dataIndex
+            );
+        }
+        return value;
+    },
+
+    /**
+     * Get the summary data for a field.
+     * @private
+     * @param {Ext.data.Store} store The store to get the data from
+     * @param {String/Function} type The type of aggregation. If a function is specified it will
+     * be passed to the stores aggregate function.
+     * @param {String} field The field to aggregate on
+     * @param {Boolean} group True to aggregate in grouped mode 
+     * @return {Number/String/Object} See the return type for the store functions.
+     */
+    getSummary: function(store, type, field, group){
+        if (type) {
+            if (Ext.isFunction(type)) {
+                return store.aggregate(type, null, group);
+            }
+
+            switch (type) {
+                case 'count':
+                    return store.count(group);
+                case 'min':
+                    return store.min(field, group);
+                case 'max':
+                    return store.max(field, group);
+                case 'sum':
+                    return store.sum(field, group);
+                case 'average':
+                    return store.average(field, group);
+                default:
+                    return group ? {} : '';
+                    
+            }
+        }
+    }
+
+});

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

@@ -0,0 +1,77 @@
+/**
+ *
+ */
+Ext.define('Ext.grid.feature.Chunking', {
+    extend: 'Ext.grid.feature.Feature',
+    alias: 'feature.chunking',
+
+    chunkSize: 20,
+    rowHeight: Ext.isIE ? 27 : 26,
+    visibleChunk: 0,
+    hasFeatureEvent: false,
+    attachEvents: function() {
+        this.view.el.on('scroll', this.onBodyScroll, this, {buffer: 300});
+    },
+
+    onBodyScroll: function(e, t) {
+        var view = this.view,
+            top  = t.scrollTop,
+            nextChunk = Math.floor(top / this.rowHeight / this.chunkSize);
+        if (nextChunk !== this.visibleChunk) {
+
+            this.visibleChunk = nextChunk;
+            view.refresh();
+            view.el.dom.scrollTop = top;
+            //BrowserBug: IE6,7,8 quirks mode takes setting scrollTop 2x.
+            view.el.dom.scrollTop = top;
+        }
+    },
+
+    collectData: function(records, preppedRecords, startIndex, fullWidth, orig) {
+        var o = {
+            fullWidth: orig.fullWidth,
+            chunks: []
+        },
+        //headerCt = this.view.headerCt,
+        //colums = headerCt.getColumnsForTpl(),
+        recordCount = orig.rows.length,
+        start = 0,
+        i = 0,
+        visibleChunk = this.visibleChunk,
+        chunk,
+        rows,
+        chunkLength;
+
+        for (; start < recordCount; start+=this.chunkSize, i++) {
+            if (start+this.chunkSize > recordCount) {
+                chunkLength = recordCount - start;
+            } else {
+                chunkLength = this.chunkSize;
+            }
+            
+            if (i >= visibleChunk - 1 && i <= visibleChunk + 1) {
+                rows = orig.rows.slice(start, start+this.chunkSize);
+            } else {
+                rows = [];
+            }
+            o.chunks.push({
+                rows: rows,
+                fullWidth: fullWidth,
+                chunkHeight: chunkLength * this.rowHeight
+            });
+        }
+
+        return o;
+    },
+
+    getTableFragments: function() {
+        return {
+            openTableWrap: function() {
+                return '<tpl for="chunks"><div class="' + Ext.baseCSSPrefix + 'grid-chunk" style="height: {chunkHeight}px;">';
+            },
+            closeTableWrap: function() {
+                return '</div></tpl>';
+            }
+        };
+    }
+});

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

@@ -0,0 +1,158 @@
+/**
+ * A feature is a type of plugin that is specific to the {@link Ext.grid.Panel}. It provides several
+ * hooks that allows the developer to inject additional functionality at certain points throughout the 
+ * grid creation cycle. This class provides the base template methods that are available to the developer,
+ * it should be extended.
+ * 
+ * There are several built in features that extend this class, for example:
+ *
+ *  - {@link Ext.grid.feature.Grouping} - Shows grid rows in groups as specified by the {@link Ext.data.Store}
+ *  - {@link Ext.grid.feature.RowBody} - Adds a body section for each grid row that can contain markup.
+ *  - {@link Ext.grid.feature.Summary} - Adds a summary row at the bottom of the grid with aggregate totals for a column.
+ * 
+ * ## Using Features
+ * A feature is added to the grid by specifying it an array of features in the configuration:
+ * 
+ *     var groupingFeature = Ext.create('Ext.grid.feature.Grouping');
+ *     Ext.create('Ext.grid.Panel', {
+ *         // other options
+ *         features: [groupingFeature]
+ *     });
+ * 
+ * @abstract
+ */
+Ext.define('Ext.grid.feature.Feature', {
+    extend: 'Ext.util.Observable',
+    alias: 'feature.feature',
+
+    /*
+     * @property {Boolean} isFeature
+     * `true` in this class to identify an object as an instantiated Feature, or subclass thereof.
+     */
+    isFeature: true,
+
+    /**
+     * True when feature is disabled.
+     */
+    disabled: false,
+
+    /**
+     * @property {Boolean}
+     * Most features will expose additional events, some may not and will
+     * need to change this to false.
+     */
+    hasFeatureEvent: true,
+
+    /**
+     * @property {String}
+     * Prefix to use when firing events on the view.
+     * For example a prefix of group would expose "groupclick", "groupcontextmenu", "groupdblclick".
+     */
+    eventPrefix: null,
+
+    /**
+     * @property {String}
+     * Selector used to determine when to fire the event with the eventPrefix.
+     */
+    eventSelector: null,
+
+    /**
+     * @property {Ext.view.Table}
+     * Reference to the TableView.
+     */
+    view: null,
+
+    /**
+     * @property {Ext.grid.Panel}
+     * Reference to the grid panel
+     */
+    grid: null,
+
+    /**
+     * Most features will not modify the data returned to the view.
+     * This is limited to one feature that manipulates the data per grid view.
+     */
+    collectData: false,
+
+    init: Ext.emptyFn,
+
+    getFeatureTpl: function() {
+        return '';
+    },
+
+    /**
+     * Abstract method to be overriden when a feature should add additional
+     * arguments to its event signature. By default the event will fire:
+     *
+     * - view - The underlying Ext.view.Table
+     * - featureTarget - The matched element by the defined {@link #eventSelector}
+     *
+     * The method must also return the eventName as the first index of the array
+     * to be passed to fireEvent.
+     * @template
+     */
+    getFireEventArgs: function(eventName, view, featureTarget, e) {
+        return [eventName, view, featureTarget, e];
+    },
+
+    /**
+     * Approriate place to attach events to the view, selectionmodel, headerCt, etc
+     * @template
+     */
+    attachEvents: function() {
+
+    },
+
+    getFragmentTpl: Ext.emptyFn,
+
+    /**
+     * Allows a feature to mutate the metaRowTpl.
+     * The array received as a single argument can be manipulated to add things
+     * on the end/begining of a particular row.
+     * @param {Array} metaRowTplArray A String array to be used constructing an {@link Ext.XTemplate XTemplate}
+     * to render the rows. This Array may be changed to provide extra DOM structure.
+     * @template
+     */
+    mutateMetaRowTpl: Ext.emptyFn,
+
+    /**
+     * Allows a feature to inject member methods into the metaRowTpl. This is
+     * important for embedding functionality which will become part of the proper
+     * row tpl.
+     * @template
+     */
+    getMetaRowTplFragments: function() {
+        return {};
+    },
+
+    getTableFragments: function() {
+        return {};
+    },
+
+    /**
+     * Provide additional data to the prepareData call within the grid view.
+     * @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.
+     * @template
+     */
+    getAdditionalData: function(data, idx, record, orig) {
+        return {};
+    },
+
+    /**
+     * Enables the feature.
+     */
+    enable: function() {
+        this.disabled = false;
+    },
+
+    /**
+     * Disables the feature.
+     */
+    disable: function() {
+        this.disabled = true;
+    }
+
+});