X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/grid/column/Column.js diff --git a/src/grid/column/Column.js b/src/grid/column/Column.js new file mode 100644 index 00000000..3d287fa3 --- /dev/null +++ b/src/grid/column/Column.js @@ -0,0 +1,715 @@ +/** + * @class Ext.grid.column.Column + * @extends Ext.grid.header.Container + * + * This class specifies the definition for a column inside a {@link Ext.grid.Panel}. It encompasses + * both the grid header configuration as well as displaying data within the grid itself. If the + * {@link #columns} configuration is specified, this column will become a column group and can + * container other columns inside. In general, this class will not be created directly, rather + * an array of column configurations will be passed to the grid: + * + * {@img Ext.grid.column.Column/Ext.grid.column.Column.png Ext.grid.column.Column grid column} + * + * ## Code + * Ext.create('Ext.data.Store', { + * storeId:'employeeStore', + * fields:['firstname', 'lastname', 'senority', 'dep', 'hired'], + * data:[ + * {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"}, + * {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"}, + * {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"}, + * {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"}, + * {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"} + * ] + * }); + * + * Ext.create('Ext.grid.Panel', { + * title: 'Column Demo', + * store: Ext.data.StoreManager.lookup('employeeStore'), + * columns: [ + * {text: 'First Name', dataIndex:'firstname'}, + * {text: 'Last Name', dataIndex:'lastname'}, + * {text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'}, + * {text: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'} + * ], + * width: 400, + * renderTo: Ext.getBody() + * }); + * + * ## Convenience Subclasses + * There are several column subclasses that provide default rendering for various data types + * + * - {@link Ext.grid.column.Action}: Renders icons that can respond to click events inline + * - {@link Ext.grid.column.Boolean}: Renders for boolean values + * - {@link Ext.grid.column.Date}: Renders for date values + * - {@link Ext.grid.column.Number}: Renders for numeric values + * - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data + * + * ## Setting Sizes + * The columns are laid out by a {@link Ext.layout.container.HBox} layout, so a column can either + * be given an explicit width value or a flex configuration. If no width is specified the grid will + * automatically the size the column to 100px. For column groups, the size is calculated by measuring + * the width of the child columns, so a width option should not be specified in that case. + * + * ## Header Options + * - {@link #text}: Sets the header text for the column + * - {@link #sortable}: Specifies whether the column can be sorted by clicking the header or using the column menu + * - {@link #hideable}: Specifies whether the column can be hidden using the column menu + * - {@link #menuDisabled}: Disables the column header menu + * - {@link #draggable}: Specifies whether the column header can be reordered by dragging + * - {@link #groupable}: Specifies whether the grid can be grouped by the column dataIndex. See also {@link Ext.grid.feature.Grouping} + * + * ## Data Options + * - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} to use as the value for the column. + * - {@link #renderer}: Allows the underlying store value to be transformed before being displayed in the grid + * + * @xtype gridcolumn + */ +Ext.define('Ext.grid.column.Column', { + extend: 'Ext.grid.header.Container', + alias: 'widget.gridcolumn', + requires: ['Ext.util.KeyNav'], + alternateClassName: 'Ext.grid.Column', + + baseCls: Ext.baseCSSPrefix + 'column-header ' + Ext.baseCSSPrefix + 'unselectable', + + // Not the standard, automatically applied overCls because we must filter out overs of child headers. + hoverCls: Ext.baseCSSPrefix + 'column-header-over', + + handleWidth: 5, + + sortState: null, + + possibleSortStates: ['ASC', 'DESC'], + + renderTpl: + '
An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the columns
config.
Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out of a group. Note that + * if all sub columns are dragged out of a group, the group is destroyed. + */ + + /** + * @cfg {String} dataIndex
Required. The name of the field in the + * grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from + * which to draw the column's value.
+ */ + dataIndex: null, + + /** + * @cfg {String} text Optional. The header text to be used as innerHTML + * (html tags are accepted) to display in the Grid. Note: to + * have a clickable header with no text displayed you can use the + * default of ' '. + */ + text: ' ', + + /** + * @cfg {Boolean} sortable Optional. true if sorting is to be allowed on this column. + * Whether local/remote sorting is used is specified in{@link Ext.data.Store#remoteSort}
.
+ */
+ sortable: true,
+
+ /**
+ * @cfg {Boolean} groupable Optional. If the grid uses a {@link Ext.grid.feature.Grouping}, this option
+ * may be used to disable the header menu item to group by the column selected. By default,
+ * the header menu group option is enabled. Set to false to disable (but still show) the
+ * group option in the header menu for the column.
+ */
+
+ /**
+ * @cfg {Boolean} hideable Optional. Specify as false to prevent the user from hiding this column
+ * (defaults to true).
+ */
+ hideable: true,
+
+ /**
+ * @cfg {Boolean} menuDisabled
+ * True to disabled the column header menu containing sort/hide options. Defaults to false.
+ */
+ menuDisabled: false,
+
+ /**
+ * @cfg {Function} renderer
+ * A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it + * is rendered. Example:
+ *{
+ renderer: function(value){
+ if (value === 1) {
+ return '1 person';
+ }
+ return value + ' people';
+ }
+}
+ *
+ * @param {Mixed} value The data value for the current cell
+ * @param {Object} metaData A collection of metadata about the current cell; can be used or modified by
+ * the renderer. Recognized properties are: tdCls, tdAttr, and style.
+ * @param {Ext.data.Model} record The record for the current row
+ * @param {Number} rowIndex The index of the current row
+ * @param {Number} colIndex The index of the current column
+ * @param {Ext.data.Store} store The data store
+ * @param {Ext.view.View} view The current view
+ * @return {String} The HTML to be rendered
+ */
+ renderer: false,
+
+ /**
+ * @cfg {String} align Sets the alignment of the header and rendered columns.
+ * Defaults to 'left'.
+ */
+ align: 'left',
+
+ /**
+ * @cfg {Boolean} draggable Indicates whether or not the header can be drag and drop re-ordered.
+ * Defaults to true.
+ */
+ draggable: true,
+
+ // Header does not use the typical ComponentDraggable class and therefore we
+ // override this with an emptyFn. It is controlled at the HeaderDragZone.
+ initDraggable: Ext.emptyFn,
+
+ /**
+ * @cfg {String} tdCls Optional. A CSS class names to apply to the table cells for this column.
+ */ + + /** + * @property {Ext.core.Element} triggerEl + */ + + /** + * @property {Ext.core.Element} textEl + */ + + /** + * @private + * Set in this class to identify, at runtime, instances which are not instances of the + * HeaderContainer base class, but are in fact, the subclass: Header. + */ + isHeader: true, + + initComponent: function() { + var me = this, + i, + len; + + if (Ext.isDefined(me.header)) { + me.text = me.header; + delete me.header; + } + + // Flexed Headers need to have a minWidth defined so that they can never be squeezed out of existence by the + // HeaderContainer's specialized Box layout, the ColumnLayout. The ColumnLayout's overridden calculateChildboxes + // method extends the available layout space to accommodate the "desiredWidth" of all the columns. + if (me.flex) { + me.minWidth = me.minWidth || Ext.grid.plugin.HeaderResizer.prototype.minColWidth; + } + // Non-flexed Headers may never be squeezed in the event of a shortfall so + // always set their minWidth to their current width. + else { + me.minWidth = me.width; + } + + if (!me.triStateSort) { + me.possibleSortStates.length = 2; + } + + // A group header; It contains items which are themselves Headers + if (Ext.isDefined(me.columns)) { + me.isGroupHeader = true; + + //false
+ */
+ getIndex: function() {
+ return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
+ },
+
+ afterRender: function() {
+ var me = this,
+ el = me.el;
+
+ me.callParent(arguments);
+
+ el.addCls(Ext.baseCSSPrefix + 'column-header-align-' + me.align).addClsOnOver(me.overCls);
+
+ me.mon(el, {
+ click: me.onElClick,
+ dblclick: me.onElDblClick,
+ scope: me
+ });
+
+ // BrowserBug: Ie8 Strict Mode, this will break the focus for this browser,
+ // must be fixed when focus management will be implemented.
+ if (!Ext.isIE8 || !Ext.isStrict) {
+ me.mon(me.getFocusEl(), {
+ focus: me.onTitleMouseOver,
+ blur: me.onTitleMouseOut,
+ scope: me
+ });
+ }
+
+ me.mon(me.titleContainer, {
+ mouseenter: me.onTitleMouseOver,
+ mouseleave: me.onTitleMouseOut,
+ scope: me
+ });
+
+ me.keyNav = Ext.create('Ext.util.KeyNav', el, {
+ enter: me.onEnterKey,
+ down: me.onDownKey,
+ scope: me
+ });
+ },
+
+ setSize: function(width, height) {
+ var me = this,
+ headerCt = me.ownerCt,
+ ownerHeaderCt = me.getOwnerHeaderCt(),
+ siblings,
+ len, i,
+ oldWidth = me.getWidth(),
+ newWidth = 0;
+
+ if (width !== oldWidth) {
+
+ // Bubble size changes upwards to group headers
+ if (headerCt.isGroupHeader) {
+
+ siblings = headerCt.items.items;
+ len = siblings.length;
+
+ // Size the owning group to the size of its sub headers
+ if (siblings[len - 1].rendered) {
+
+ for (i = 0; i < len; i++) {
+ newWidth += (siblings[i] === me) ? width : siblings[i].getWidth();
+ }
+ headerCt.minWidth = newWidth;
+ headerCt.setWidth(newWidth);
+ }
+ }
+ me.callParent(arguments);
+ }
+ },
+
+ afterComponentLayout: function(width, height) {
+ var me = this,
+ ownerHeaderCt = this.getOwnerHeaderCt();
+
+ me.callParent(arguments);
+
+ // Only changes at the base level inform the grid's HeaderContainer which will update the View
+ // Skip this if the width is null or undefined which will be the Box layout's initial pass through the child Components
+ // Skip this if it's the initial size setting in which case there is no ownerheaderCt yet - that is set afterRender
+ if (width && !me.isGroupHeader && ownerHeaderCt) {
+ ownerHeaderCt.onHeaderResize(me, width, true);
+ }
+ },
+
+ // private
+ // After the container has laid out and stretched, it calls this to correctly pad the inner to center the text vertically
+ setPadding: function() {
+ var me = this,
+ headerHeight,
+ lineHeight = parseInt(me.textEl.getStyle('line-height'), 10);
+
+ // Top title containing element must stretch to match height of sibling group headers
+ if (!me.isGroupHeader) {
+ headerHeight = me.el.getViewSize().height;
+ if (me.titleContainer.getHeight() < headerHeight) {
+ me.titleContainer.dom.style.height = headerHeight + 'px';
+ }
+ }
+ headerHeight = me.titleContainer.getViewSize().height;
+
+ // Vertically center the header text in potentially vertically stretched header
+ if (lineHeight) {
+ me.titleContainer.setStyle({
+ paddingTop: Math.max(((headerHeight - lineHeight) / 2), 0) + 'px'
+ });
+ }
+
+ // Only IE needs this
+ if (Ext.isIE && me.triggerEl) {
+ me.triggerEl.setHeight(headerHeight);
+ }
+ },
+
+ onDestroy: function() {
+ var me = this;
+ Ext.destroy(me.keyNav);
+ delete me.keyNav;
+ me.callParent(arguments);
+ },
+
+ onTitleMouseOver: function() {
+ this.titleContainer.addCls(this.hoverCls);
+ },
+
+ onTitleMouseOut: function() {
+ this.titleContainer.removeCls(this.hoverCls);
+ },
+
+ onDownKey: function(e) {
+ if (this.triggerEl) {
+ this.onElClick(e, this.triggerEl.dom || this.el.dom);
+ }
+ },
+
+ onEnterKey: function(e) {
+ this.onElClick(e, this.el.dom);
+ },
+
+ /**
+ * @private
+ * Double click
+ * @param e
+ * @param t
+ */
+ onElDblClick: function(e, t) {
+ var me = this,
+ ownerCt = me.ownerCt;
+ if (ownerCt && Ext.Array.indexOf(ownerCt.items, me) !== 0 && me.isOnLeftEdge(e) ) {
+ ownerCt.expandToFit(me.previousSibling('gridcolumn'));
+ }
+ },
+
+ onElClick: function(e, t) {
+
+ // The grid's docked HeaderContainer.
+ var me = this,
+ ownerHeaderCt = me.getOwnerHeaderCt();
+
+ if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
+ // Firefox doesn't check the current target in a within check.
+ // Therefore we check the target directly and then within (ancestors)
+ if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
+ ownerHeaderCt.onHeaderTriggerClick(me, e, t);
+ // if its not on the left hand edge, sort
+ } else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
+ me.toggleSortState();
+ ownerHeaderCt.onHeaderClick(me, e, t);
+ }
+ }
+ },
+
+ /**
+ * @private
+ * Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView
+ * @param {String} type Event type, eg 'click'
+ * @param {TableView} view TableView Component
+ * @param {HtmlElement} cell Cell HtmlElement the event took place within
+ * @param {Number} recordIndex Index of the associated Store Model (-1 if none)
+ * @param {Number} cellIndex Cell index within the row
+ * @param {EventObject} e Original event
+ */
+ processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
+ return this.fireEvent.apply(this, arguments);
+ },
+
+ toggleSortState: function() {
+ var me = this,
+ idx,
+ nextIdx;
+
+ if (me.sortable) {
+ idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState);
+
+ nextIdx = (idx + 1) % me.possibleSortStates.length;
+ me.setSortState(me.possibleSortStates[nextIdx]);
+ }
+ },
+
+ doSort: function(state) {
+ var ds = this.up('tablepanel').store;
+ ds.sort({
+ property: this.getSortParam(),
+ direction: state
+ });
+ },
+
+ /**
+ * Returns the parameter to sort upon when sorting this header. By default
+ * this returns the dataIndex and will not need to be overriden in most cases.
+ */
+ getSortParam: function() {
+ return this.dataIndex;
+ },
+
+ //setSortState: function(state, updateUI) {
+ //setSortState: function(state, doSort) {
+ setSortState: function(state, skipClear, initial) {
+ var me = this,
+ colSortClsPrefix = Ext.baseCSSPrefix + 'column-header-sort-',
+ ascCls = colSortClsPrefix + 'ASC',
+ descCls = colSortClsPrefix + 'DESC',
+ nullCls = colSortClsPrefix + 'null',
+ ownerHeaderCt = me.getOwnerHeaderCt(),
+ oldSortState = me.sortState;
+
+ if (oldSortState !== state && me.getSortParam()) {
+ me.addCls(colSortClsPrefix + state);
+ // don't trigger a sort on the first time, we just want to update the UI
+ if (state && !initial) {
+ me.doSort(state);
+ }
+ switch (state) {
+ case 'DESC':
+ me.removeCls([ascCls, nullCls]);
+ break;
+ case 'ASC':
+ me.removeCls([descCls, nullCls]);
+ break;
+ case null:
+ me.removeCls([ascCls, descCls]);
+ break;
+ }
+ if (ownerHeaderCt && !me.triStateSort && !skipClear) {
+ ownerHeaderCt.clearOtherSortStates(me);
+ }
+ me.sortState = state;
+ ownerHeaderCt.fireEvent('sortchange', ownerHeaderCt, me, state);
+ }
+ },
+
+ hide: function() {
+ var me = this,
+ items,
+ len, i,
+ lb,
+ newWidth = 0,
+ ownerHeaderCt = me.getOwnerHeaderCt();
+
+ // Hiding means setting to zero width, so cache the width
+ me.oldWidth = me.getWidth();
+
+ // Hiding a group header hides itself, and then informs the HeaderContainer about its sub headers (Suppressing header layout)
+ if (me.isGroupHeader) {
+ items = me.items.items;
+ me.callParent(arguments);
+ ownerHeaderCt.onHeaderHide(me);
+ for (i = 0, len = items.length; i < len; i++) {
+ items[i].hidden = true;
+ ownerHeaderCt.onHeaderHide(items[i], true);
+ }
+ return;
+ }
+
+ // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+ lb = me.ownerCt.componentLayout.layoutBusy;
+ me.ownerCt.componentLayout.layoutBusy = true;
+ me.callParent(arguments);
+ me.ownerCt.componentLayout.layoutBusy = lb;
+
+ // Notify owning HeaderContainer
+ ownerHeaderCt.onHeaderHide(me);
+
+ if (me.ownerCt.isGroupHeader) {
+ // If we've just hidden the last header in a group, then hide the group
+ items = me.ownerCt.query('>:not([hidden])');
+ if (!items.length) {
+ me.ownerCt.hide();
+ }
+ // Size the group down to accommodate fewer sub headers
+ else {
+ for (i = 0, len = items.length; i < len; i++) {
+ newWidth += items[i].getWidth();
+ }
+ me.ownerCt.minWidth = newWidth;
+ me.ownerCt.setWidth(newWidth);
+ }
+ }
+ },
+
+ show: function() {
+ var me = this,
+ ownerCt = me.getOwnerHeaderCt(),
+ lb,
+ items,
+ len, i,
+ newWidth = 0;
+
+ // TODO: Work with Jamie to produce a scheme where we can show/hide/resize without triggering a layout cascade
+ lb = me.ownerCt.componentLayout.layoutBusy;
+ me.ownerCt.componentLayout.layoutBusy = true;
+ me.callParent(arguments);
+ me.ownerCt.componentLayout.layoutBusy = lb;
+
+ // If a sub header, ensure that the group header is visible
+ if (me.isSubHeader) {
+ if (!me.ownerCt.isVisible()) {
+ me.ownerCt.show();
+ }
+ }
+
+ // If we've just shown a group with all its sub headers hidden, then show all its sub headers
+ if (me.isGroupHeader && !me.query(':not([hidden])').length) {
+ items = me.query('>*');
+ for (i = 0, len = items.length; i < len; i++) {
+ items[i].show();
+ }
+ }
+
+ // Resize the owning group to accommodate
+ if (me.ownerCt.isGroupHeader) {
+ items = me.ownerCt.query('>:not([hidden])');
+ for (i = 0, len = items.length; i < len; i++) {
+ newWidth += items[i].getWidth();
+ }
+ me.ownerCt.minWidth = newWidth;
+ me.ownerCt.setWidth(newWidth);
+ }
+
+ // Notify owning HeaderContainer
+ if (ownerCt) {
+ ownerCt.onHeaderShow(me);
+ }
+ },
+
+ getDesiredWidth: function() {
+ var me = this;
+ if (me.rendered && me.componentLayout && me.componentLayout.lastComponentSize) {
+ // headers always have either a width or a flex
+ // because HeaderContainer sets a defaults width
+ // therefore we can ignore the natural width
+ // we use the componentLayout's tracked width so that
+ // we can calculate the desired width when rendered
+ // but not visible because its being obscured by a layout
+ return me.componentLayout.lastComponentSize.width;
+ // Flexed but yet to be rendered this could be the case
+ // where a HeaderContainer and Headers are simply used as data
+ // structures and not rendered.
+ }
+ else if (me.flex) {
+ // this is going to be wrong, the defaultWidth
+ return me.width;
+ }
+ else {
+ return me.width;
+ }
+ },
+
+ getCellSelector: function() {
+ return '.' + Ext.baseCSSPrefix + 'grid-cell-' + this.getItemId();
+ },
+
+ getCellInnerSelector: function() {
+ return this.getCellSelector() + ' .' + Ext.baseCSSPrefix + 'grid-cell-inner';
+ },
+
+ isOnLeftEdge: function(e) {
+ return (e.getXY()[0] - this.el.getLeft() <= this.handleWidth);
+ },
+
+ isOnRightEdge: function(e) {
+ return (this.el.getRight() - e.getXY()[0] <= this.handleWidth);
+ }
+
+ /**
+ * Retrieves the editing field for editing associated with this header. Returns false if there
+ * is no field associated with the Header the method will return false. If the
+ * field has not been instantiated it will be created. Note: These methods only has an implementation
+ * if a Editing plugin has been enabled on the grid.
+ * @param record The {@link Ext.data.Model Model} instance being edited.
+ * @param {Mixed} defaultField An object representing a default field to be created
+ * @returns {Ext.form.field.Field} field
+ * @method getEditor
+ */
+ // intentionally omit getEditor and setEditor definitions bc we applyIf into columns
+ // when the editing plugin is injected
+
+
+ /**
+ * Sets the form field to be used for editing. Note: This method only has an implementation
+ * if an Editing plugin has been enabled on the grid.
+ * @param {Mixed} field An object representing a field to be created. If no xtype is specified a 'textfield' is assumed.
+ * @method setEditor
+ */
+});
\ No newline at end of file