Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)'); + }else{ + point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); + if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){ + this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners); + } + } + } } - return false; + } + }); -Ext.override(Ext.tree.TreeNodeUI, { - // private - focus: function(){ - this.node.getOwnerTree().bodyFocus.focus(); - } -}); +Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid'); -Ext.override(Ext.tree.TreePanel, { - // private - afterRender : function(){ - Ext.tree.TreePanel.superclass.afterRender.call(this); - this.root.render(); - if(!this.rootVisible){ - this.root.renderChildren(); - } - this.bodyFocus = new Ext.a11y.FocusItem(this.body.down('.x-tree-root-ct')); - this.bodyFocus.fi.setFrameEl(this.body); - } +/** + * @class Ext.ux.grid.GridFilters + * @extends Ext.util.Observable + *
GridFilter is a plugin (ptype='gridfilters') for grids that
+ * allow for a slightly more robust representation of filtering than what is
+ * provided by the default store.
Filtering is adjusted by the user using the grid's column header menu + * (this menu can be disabled through configuration). Through this menu users + * can configure, enable, and disable filters for each column.
+ *Features:
+ *-
+ *
- Filtering implementations :
+ * + * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can + * be backed by a Ext.data.Store), and Boolean. Additional custom filter types + * and menus are easily created by extending Ext.ux.grid.filter.Filter. + *
+ *
- Graphical indicators :
+ * + * Columns that are filtered have {@link #filterCls a configurable css class} + * applied to the column headers. + *
+ *
- Paging :
+ * + * If specified as a plugin to the grid's configured PagingToolbar, the current page + * will be reset to page 1 whenever you update the filters. + *
+ *
- Automatic Reconfiguration :
+ * + * Filters automatically reconfigure when the grid 'reconfigure' event fires. + *
+ *
- Stateful :
+ * Filter information will be persisted across page loads by specifying a
+ *
stateIdin the Grid configuration. + *+ * The filter collection binds to the + *{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}+ * and{@link Ext.grid.GridPanel#beforestatesave beforestatesave}+ * events in order to be stateful. + *
+ * - Grid Changes :
+ *
-
+ *
- A
filtersproperty is added to the grid pointing to + * this plugin.
+ * - A
filterupdateevent is added to the grid and is + * fired upon onStateChange completion.
+ *
+ * - A
- Server side code examples :
+ *
-
+ *
- PHP - (Thanks VinylFox) + *
- Ruby on Rails - (Thanks Zyclops) + *
- Ruby on Rails - (Thanks Rotomaul) + *
- Python - (Thanks Matt) + *
- Grails - (Thanks Mike) + *
+ *
Example usage:
+ *
+var store = new Ext.data.GroupingStore({
+ ...
});
-
-Ext.override(Ext.grid.GridPanel, {
- initFocus: function(){
- Ext.grid.GridPanel.superclass.initFocus.call(this);
- this.bodyFocus = new Ext.a11y.FocusItem(this.view.focusEl);
- this.bodyFocus.fi.setFrameEl(this.body);
- }
+
+var filters = new Ext.ux.grid.GridFilters({
+ autoReload: false, //don't reload automatically
+ local: true, //only filter locally
+ // filters may be configured through the plugin,
+ // or in the column definition within the column model configuration
+ filters: [{
+ type: 'numeric',
+ dataIndex: 'id'
+ }, {
+ type: 'string',
+ dataIndex: 'name'
+ }, {
+ type: 'numeric',
+ dataIndex: 'price'
+ }, {
+ type: 'date',
+ dataIndex: 'dateAdded'
+ }, {
+ type: 'list',
+ dataIndex: 'size',
+ options: ['extra small', 'small', 'medium', 'large', 'extra large'],
+ phpMode: true
+ }, {
+ type: 'boolean',
+ dataIndex: 'visible'
+ }]
});
-
-Ext.override(Ext.Button, {
- isFocusable: true,
- noFocus: false,
-
- initFocus: function(){
- Ext.Button.superclass.initFocus.call(this);
- this.fi = this.fi || new Ext.a11y.Focusable(this.btnEl, null, null, this.el);
- this.fi.setComponent(this);
-
- this.mon(this.fi, {
- focus: this.onFocus,
- blur: this.onBlur,
- scope: this
- });
-
- if (this.menu) {
- this.mon(this.fi, 'down', this.showMenu, this);
- this.on('menuhide', this.focus, this);
- }
-
- if (this.hidden) {
- this.isFocusable = false;
- }
-
- this.on('show', function(){
- this.isFocusable = true;
- }, this);
- this.on('hide', function(){
- this.isFocusable = false;
- }, this);
- },
-
- focus: function(){
- this.fi.focus();
+var cm = new Ext.grid.ColumnModel([{
+ ...
+}]);
+
+var grid = new Ext.grid.GridPanel({
+ ds: store,
+ cm: cm,
+ view: new Ext.grid.GroupingView(),
+ plugins: [filters],
+ height: 400,
+ width: 700,
+ bbar: new Ext.PagingToolbar({
+ store: store,
+ pageSize: 15,
+ plugins: [filters] //reset page to page 1 if filters change
+ })
+ });
+
+store.load({params: {start: 0, limit: 15}});
+
+// a filters property is added to the grid
+grid.filters
+ * {@link updateBuffer}.
+ */
+ autoReload : true,
+ /**
+ * @cfg {Boolean} encode
+ * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
+ * encode the filter query parameter sent with a remote request.
+ * Defaults to false.
+ */
+ /**
+ * @cfg {Array} filters
+ * An Array of filters config objects. Refer to each filter type class for
+ * configuration details specific to each filter type. Filters for Strings,
+ * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters
+ * available.
+ */
+ /**
+ * @cfg {String} filterCls
+ * The css class to be applied to column headers with active filters.
+ * Defaults to 'ux-filterd-column'.
+ */
+ filterCls : 'ux-filtered-column',
+ /**
+ * @cfg {Boolean} local
+ * true to use Ext.data.Store filter functions (local filtering)
+ * instead of the default (false) server side filtering.
+ */
+ local : false,
+ /**
+ * @cfg {String} menuFilterText
+ * defaults to 'Filters'.
+ */
+ menuFilterText : 'Filters',
+ /**
+ * @cfg {String} paramPrefix
+ * The url parameter prefix for the filters.
+ * Defaults to 'filter'.
+ */
+ paramPrefix : 'filter',
+ /**
+ * @cfg {Boolean} showMenu
+ * Defaults to true, including a filter submenu in the default header menu.
+ */
+ showMenu : true,
+ /**
+ * @cfg {String} stateId
+ * Name of the value to be used to store state information.
+ */
+ stateId : undefined,
+ /**
+ * @cfg {Integer} updateBuffer
+ * Number of milliseconds to defer store updates since the last filter change.
+ */
+ updateBuffer : 500,
+
+ /** @private */
+ constructor : function (config) {
+ config = config || {};
+ this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
+ this.filters = new Ext.util.MixedCollection();
+ this.filters.getKey = function (o) {
+ return o ? o.dataIndex : null;
+ };
+ this.addFilters(config.filters);
+ delete config.filters;
+ Ext.apply(this, config);
},
-
- blur: function(){
- this.fi.blur();
+
+ /** @private */
+ init : function (grid) {
+ if (grid instanceof Ext.grid.GridPanel) {
+ this.grid = grid;
+
+ this.bindStore(this.grid.getStore(), true);
+ // assumes no filters were passed in the constructor, so try and use ones from the colModel
+ if(this.filters.getCount() == 0){
+ this.addFilters(this.grid.getColumnModel());
+ }
+
+ this.grid.filters = this;
+
+ this.grid.addEvents({'filterupdate': true});
+
+ grid.on({
+ scope: this,
+ beforestaterestore: this.applyState,
+ beforestatesave: this.saveState,
+ beforedestroy: this.destroy,
+ reconfigure: this.onReconfigure
+ });
+
+ if (grid.rendered){
+ this.onRender();
+ } else {
+ grid.on({
+ scope: this,
+ single: true,
+ render: this.onRender
+ });
+ }
+
+ } else if (grid instanceof Ext.PagingToolbar) {
+ this.toolbar = grid;
+ }
},
-
- onFocus: function(){
- if (!this.disabled) {
- this.el.addClass("x-btn-focus");
+
+ /**
+ * @private
+ * Handler for the grid's beforestaterestore event (fires before the state of the
+ * grid is restored).
+ * @param {Object} grid The grid object
+ * @param {Object} state The hash of state values returned from the StateProvider.
+ */
+ applyState : function (grid, state) {
+ var key, filter;
+ this.applyingState = true;
+ this.clearFilters();
+ if (state.filters) {
+ for (key in state.filters) {
+ filter = this.filters.get(key);
+ if (filter) {
+ filter.setValue(state.filters[key]);
+ filter.setActive(true);
+ }
+ }
}
+ this.deferredUpdate.cancel();
+ if (this.local) {
+ this.reload();
+ }
+ delete this.applyingState;
},
- onBlur: function(){
- this.el.removeClass("x-btn-focus");
- }
-});
-
-Ext.override(Ext.Toolbar, {
- initFocus: function(){
- Ext.Toolbar.superclass.initFocus.call(this);
- this.mon(this.fi, {
- left: this.onLeft,
- right: this.onRight,
- scope: this
- });
-
- this.on('focus', this.onButtonFocus, this, {
- stopEvent: true
+ /**
+ * Saves the state of all active filters
+ * @param {Object} grid
+ * @param {Object} state
+ * @return {Boolean}
+ */
+ saveState : function (grid, state) {
+ var filters = {};
+ this.filters.each(function (filter) {
+ if (filter.active) {
+ filters[filter.dataIndex] = filter.getValue();
+ }
});
+ return (state.filters = filters);
},
- addItem: function(item){
- Ext.Toolbar.superclass.add.apply(this, arguments);
- if (item.rendered && item.fi !== undefined) {
- item.fi.setRelayTo(this.el);
- this.relayEvents(item.fi, ['focus']);
+ /**
+ * @private
+ * Handler called when the grid is rendered
+ */
+ onRender : function () {
+ this.grid.getView().on('refresh', this.onRefresh, this);
+ this.createMenu();
+ },
+
+ /**
+ * @private
+ * Handler called by the grid 'beforedestroy' event
+ */
+ destroy : function () {
+ this.removeAll();
+ this.purgeListeners();
+
+ if(this.filterMenu){
+ Ext.menu.MenuMgr.unregister(this.filterMenu);
+ this.filterMenu.destroy();
+ this.filterMenu = this.menu.menu = null;
}
- else {
- item.on('render', function(){
- if (item.fi !== undefined) {
- item.fi.setRelayTo(this.el);
- this.relayEvents(item.fi, ['focus']);
- }
- }, this, {
- single: true
- });
+ },
+
+ /**
+ * Remove all filters, permanently destroying them.
+ */
+ removeAll : function () {
+ if(this.filters){
+ Ext.destroy.apply(Ext, this.filters.items);
+ // remove all items from the collection
+ this.filters.clear();
}
- return item;
},
-
- onFocus: function(){
- var items = this.getFocusItems();
- if (items && items.getCount() > 0) {
- if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
- this.lastFocus.focus();
+
+
+ /**
+ * Changes the data store bound to this view and refreshes it.
+ * @param {Store} store The store to bind to this view
+ */
+ bindStore : function(store, initial){
+ if(!initial && this.store){
+ if (this.local) {
+ store.un('load', this.onLoad, this);
+ } else {
+ store.un('beforeload', this.onBeforeLoad, this);
}
- else {
- items.first().focus();
+ }
+ if(store){
+ if (this.local) {
+ store.on('load', this.onLoad, this);
+ } else {
+ store.on('beforeload', this.onBeforeLoad, this);
}
}
+ this.store = store;
},
-
- onButtonFocus: function(e, t, tf){
- this.lastFocus = tf.component || null;
- },
-
- onLeft: function(e, t, tf){
- e.stopEvent();
- this.getPreviousFocus(tf.component).focus();
- },
-
- onRight: function(e, t, tf){
- e.stopEvent();
- this.getNextFocus(tf.component).focus();
- },
-
- getEnterItem: Ext.emptyFn,
- onTab: Ext.emptyFn,
- onEsc: Ext.emptyFn
-});
-Ext.override(Ext.menu.BaseItem, {
- initFocus: function(){
- this.fi = new Ext.a11y.Focusable(this, this.parentMenu && this.parentMenu.el || null, true);
- }
-});
+ /**
+ * @private
+ * Handler called when the grid reconfigure event fires
+ */
+ onReconfigure : function () {
+ this.bindStore(this.grid.getStore());
+ this.store.clearFilter();
+ this.removeAll();
+ this.addFilters(this.grid.getColumnModel());
+ this.updateColumnHeadings();
+ },
-Ext.override(Ext.menu.Menu, {
- initFocus: function(){
- this.fi = new Ext.a11y.Focusable(this);
- this.focusEl = this.fi;
- }
-});
+ createMenu : function () {
+ var view = this.grid.getView(),
+ hmenu = view.hmenu;
-Ext.a11y.WindowMgr = new Ext.WindowGroup();
+ if (this.showMenu && hmenu) {
+
+ this.sep = hmenu.addSeparator();
+ this.filterMenu = new Ext.menu.Menu({
+ id: this.grid.id + '-filters-menu'
+ });
+ this.menu = hmenu.add({
+ checked: false,
+ itemId: 'filters',
+ text: this.menuFilterText,
+ menu: this.filterMenu
+ });
-Ext.apply(Ext.WindowMgr, {
- bringToFront: function(win){
- Ext.a11y.WindowMgr.bringToFront.call(this, win);
- if (win.modal) {
- win.enter();
- }
- else {
- win.focus();
+ this.menu.on({
+ scope: this,
+ checkchange: this.onCheckChange,
+ beforecheckchange: this.onBeforeCheck
+ });
+ hmenu.on('beforeshow', this.onMenu, this);
}
- }
-});
+ this.updateColumnHeadings();
+ },
-Ext.override(Ext.Window, {
- initFocus: function(){
- Ext.Window.superclass.initFocus.call(this);
- this.on('beforehide', function(){
- Ext.a11y.RelayFrame.unframe();
- Ext.a11y.FocusFrame.unframe();
- });
- }
-});
+ /**
+ * @private
+ * Get the filter menu from the filters MixedCollection based on the clicked header
+ */
+ getMenuFilter : function () {
+ var view = this.grid.getView();
+ if (!view || view.hdCtxIndex === undefined) {
+ return null;
+ }
+ return this.filters.get(
+ view.cm.config[view.hdCtxIndex].dataIndex
+ );
+ },
-Ext.override(Ext.form.Field, {
- isFocusable: true,
- noFocus: false,
-
- initFocus: function(){
- this.fi = this.fi || new Ext.a11y.Focusable(this, null, true);
-
- Ext.form.Field.superclass.initFocus.call(this);
-
- if (this.hidden) {
- this.isFocusable = false;
+ /**
+ * @private
+ * Handler called by the grid's hmenu beforeshow event
+ */
+ onMenu : function (filterMenu) {
+ var filter = this.getMenuFilter();
+
+ if (filter) {
+/*
+TODO: lazy rendering
+ if (!filter.menu) {
+ filter.menu = filter.createMenu();
+ }
+*/
+ this.menu.menu = filter.menu;
+ this.menu.setChecked(filter.active, false);
+ // disable the menu if filter.disabled explicitly set to true
+ this.menu.setDisabled(filter.disabled === true);
}
- this.on('show', function(){
- this.isFocusable = true;
- }, this);
- this.on('hide', function(){
- this.isFocusable = false;
- }, this);
- }
-});
-
-Ext.override(Ext.FormPanel, {
- initFocus: function(){
- Ext.FormPanel.superclass.initFocus.call(this);
- this.on('focus', this.onFieldFocus, this, {
- stopEvent: true
- });
+ this.menu.setVisible(filter !== undefined);
+ this.sep.setVisible(filter !== undefined);
},
- // private
- createForm: function(){
- delete this.initialConfig.listeners;
- var form = new Ext.form.BasicForm(null, this.initialConfig);
- form.afterMethod('add', this.formItemAdd, this);
- return form;
- },
-
- formItemAdd: function(item){
- item.on('render', function(field){
- field.fi.setRelayTo(this.el);
- this.relayEvents(field.fi, ['focus']);
- }, this, {
- single: true
- });
+ /** @private */
+ onCheckChange : function (item, value) {
+ this.getMenuFilter().setActive(value);
},
- onFocus: function(){
- var items = this.getFocusItems();
- if (items && items.getCount() > 0) {
- if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
- this.lastFocus.focus();
- }
- else {
- items.first().focus();
- }
+ /** @private */
+ onBeforeCheck : function (check, value) {
+ return !value || this.getMenuFilter().isActivatable();
+ },
+
+ /**
+ * @private
+ * Handler for all events on filters.
+ * @param {String} event Event name
+ * @param {Object} filter Standard signature of the event before the event is fired
+ */
+ onStateChange : function (event, filter) {
+ if (event === 'serialize') {
+ return;
+ }
+
+ if (filter == this.getMenuFilter()) {
+ this.menu.setChecked(filter.active, false);
+ }
+
+ if ((this.autoReload || this.local) && !this.applyingState) {
+ this.deferredUpdate.delay(this.updateBuffer);
}
+ this.updateColumnHeadings();
+
+ if (!this.applyingState) {
+ this.grid.saveState();
+ }
+ this.grid.fireEvent('filterupdate', this, filter);
},
- onFieldFocus: function(e, t, tf){
- this.lastFocus = tf.component || null;
+ /**
+ * @private
+ * Handler for store's beforeload event when configured for remote filtering
+ * @param {Object} store
+ * @param {Object} options
+ */
+ onBeforeLoad : function (store, options) {
+ options.params = options.params || {};
+ this.cleanParams(options.params);
+ var params = this.buildQuery(this.getFilterData());
+ Ext.apply(options.params, params);
},
- onTab: function(e, t, tf){
- if (tf.relayTo.component === this) {
- var item = e.shiftKey ? this.getPreviousFocus(tf.component) : this.getNextFocus(tf.component);
-
- if (item) {
- ev.stopEvent();
- item.focus();
- return;
- }
- }
- Ext.FormPanel.superclass.onTab.apply(this, arguments);
+ /**
+ * @private
+ * Handler for store's load event when configured for local filtering
+ * @param {Object} store
+ * @param {Object} options
+ */
+ onLoad : function (store, options) {
+ store.filterBy(this.getRecordFilter());
},
-
- getNextFocus: function(current){
- var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();
-
- return (i < length - 1) ? items.get(i + 1) : false;
+
+ /**
+ * @private
+ * Handler called when the grid's view is refreshed
+ */
+ onRefresh : function () {
+ this.updateColumnHeadings();
},
-
- getPreviousFocus: function(current){
- var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();
-
- return (i > 0) ? items.get(i - 1) : false;
- }
-});
-Ext.override(Ext.Viewport, {
- initFocus: function(){
- Ext.Viewport.superclass.initFocus.apply(this);
- this.mon(Ext.get(document), 'focus', this.focus, this);
- this.mon(Ext.get(document), 'blur', this.blur, this);
- this.fi.setNoFrame(true);
+ /**
+ * Update the styles for the header row based on the active filters
+ */
+ updateColumnHeadings : function () {
+ var view = this.grid.getView(),
+ hds, i, len, filter;
+ if (view.mainHd) {
+ hds = view.mainHd.select('td').removeClass(this.filterCls);
+ for (i = 0, len = view.cm.config.length; i < len; i++) {
+ filter = this.getFilter(view.cm.config[i].dataIndex);
+ if (filter && filter.active) {
+ hds.item(i).addClass(this.filterCls);
+ }
+ }
+ }
},
- onTab: function(e, t, tf, f){
- e.stopEvent();
-
- if (tf === f) {
- items = this.getFocusItems();
- if (items && items.getCount() > 0) {
- items.first().focus();
+ /** @private */
+ reload : function () {
+ if (this.local) {
+ this.grid.store.clearFilter(true);
+ this.grid.store.filterBy(this.getRecordFilter());
+ } else {
+ var start,
+ store = this.grid.store;
+ this.deferredUpdate.cancel();
+ if (this.toolbar) {
+ start = store.paramNames.start;
+ if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
+ store.lastOptions.params[start] = 0;
+ }
}
+ store.reload();
}
- else {
- var rf = tf.relayTo || tf;
- var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);
- item.focus();
- }
- }
-});
+ },
-})();/**
- * @class Ext.ux.GMapPanel
- * @extends Ext.Panel
- * @author Shea Frederick
- */
-Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
- initComponent : function(){
+ /**
+ * Method factory that generates a record validator for the filters active at the time
+ * of invokation.
+ * @private
+ */
+ getRecordFilter : function () {
+ var f = [], len, i;
+ this.filters.each(function (filter) {
+ if (filter.active) {
+ f.push(filter);
+ }
+ });
- var defConfig = {
- plain: true,
- zoomLevel: 3,
- yaw: 180,
- pitch: 0,
- zoom: 0,
- gmapType: 'map',
- border: false
+ len = f.length;
+ return function (record) {
+ for (i = 0; i < len; i++) {
+ if (!f[i].validateRecord(record)) {
+ return false;
+ }
+ }
+ return true;
};
-
- Ext.applyIf(this,defConfig);
-
- Ext.ux.GMapPanel.superclass.initComponent.call(this);
-
},
- afterRender : function(){
-
- var wh = this.ownerCt.getSize();
- Ext.applyIf(this, wh);
-
- Ext.ux.GMapPanel.superclass.afterRender.call(this);
-
- if (this.gmapType === 'map'){
- this.gmap = new GMap2(this.body.dom);
- }
-
- if (this.gmapType === 'panorama'){
- this.gmap = new GStreetviewPanorama(this.body.dom);
- }
-
- if (typeof this.addControl == 'object' && this.gmapType === 'map') {
- this.gmap.addControl(this.addControl);
- }
+
+ /**
+ * Adds a filter to the collection and observes it for state change.
+ * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
+ * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
+ */
+ addFilter : function (config) {
+ var Cls = this.getFilterClass(config.type),
+ filter = config.menu ? config : (new Cls(config));
+ this.filters.add(filter);
- if (typeof this.setCenter === 'object') {
- if (typeof this.setCenter.geoCodeAddr === 'string'){
- this.geoCodeLookup(this.setCenter.geoCodeAddr);
- }else{
- if (this.gmapType === 'map'){
- var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
- this.gmap.setCenter(point, this.zoomLevel);
+ Ext.util.Observable.capture(filter, this.onStateChange, this);
+ return filter;
+ },
+
+ /**
+ * Adds filters to the collection.
+ * @param {Array/Ext.grid.ColumnModel} filters Either an Array of
+ * filter configuration objects or an Ext.grid.ColumnModel. The columns
+ * of a passed Ext.grid.ColumnModel will be examined for a filter
+ * property and, if present, will be used as the filter configuration object.
+ */
+ addFilters : function (filters) {
+ if (filters) {
+ var i, len, filter, cm = false, dI;
+ if (filters instanceof Ext.grid.ColumnModel) {
+ filters = filters.config;
+ cm = true;
+ }
+ for (i = 0, len = filters.length; i < len; i++) {
+ filter = false;
+ if (cm) {
+ dI = filters[i].dataIndex;
+ filter = filters[i].filter || filters[i].filterable;
+ if (filter){
+ filter = (filter === true) ? {} : filter;
+ Ext.apply(filter, {dataIndex:dI});
+ // filter type is specified in order of preference:
+ // filter type specified in config
+ // type specified in store's field's type config
+ filter.type = filter.type || this.store.fields.get(dI).type;
+ }
+ } else {
+ filter = filters[i];
}
- if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
- this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
+ // if filter config found add filter for the column
+ if (filter) {
+ this.addFilter(filter);
}
}
- if (this.gmapType === 'panorama'){
- this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
- }
}
+ },
+
+ /**
+ * Returns a filter for the given dataIndex, if one exists.
+ * @param {String} dataIndex The dataIndex of the desired filter object.
+ * @return {Ext.ux.grid.filter.Filter}
+ */
+ getFilter : function (dataIndex) {
+ return this.filters.get(dataIndex);
+ },
- GEvent.bind(this.gmap, 'load', this, function(){
- this.onMapReady();
+ /**
+ * Turns all filters off. This does not clear the configuration information
+ * (see {@link #removeAll}).
+ */
+ clearFilters : function () {
+ this.filters.each(function (filter) {
+ filter.setActive(false);
});
-
- },
- onMapReady : function(){
- this.addMarkers(this.markers);
- this.addMapControls();
- this.addOptions();
},
- onResize : function(w, h){
- if (typeof this.getMap() == 'object') {
- this.gmap.checkResize();
- }
-
- Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
-
- },
- setSize : function(width, height, animate){
-
- if (typeof this.getMap() == 'object') {
- this.gmap.checkResize();
- }
-
- Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
-
- },
- getMap : function(){
-
- return this.gmap;
-
- },
- getCenter : function(){
-
- return this.getMap().getCenter();
-
- },
- getCenterLatLng : function(){
-
- var ll = this.getCenter();
- return {lat: ll.lat(), lng: ll.lng()};
-
- },
- addMarkers : function(markers) {
-
- if (Ext.isArray(markers)){
- for (var i = 0; i < markers.length; i++) {
- var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
- this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
- }
- }
-
- },
- addMarker : function(point, marker, clear, center, listeners){
-
- Ext.applyIf(marker,G_DEFAULT_ICON);
-
- if (clear === true){
- this.getMap().clearOverlays();
- }
- if (center === true) {
- this.getMap().setCenter(point, this.zoomLevel);
- }
-
- var mark = new GMarker(point,marker);
- if (typeof listeners === 'object'){
- for (evt in listeners) {
- GEvent.bind(mark, evt, this, listeners[evt]);
+ /**
+ * Returns an Array of the currently active filters.
+ * @return {Array} filters Array of the currently active filters.
+ */
+ getFilterData : function () {
+ var filters = [], i, len;
+
+ this.filters.each(function (f) {
+ if (f.active) {
+ var d = [].concat(f.serialize());
+ for (i = 0, len = d.length; i < len; i++) {
+ filters.push({
+ field: f.dataIndex,
+ data: d[i]
+ });
+ }
}
- }
- this.getMap().addOverlay(mark);
-
+ });
+ return filters;
},
- addMapControls : function(){
-
- if (this.gmapType === 'map') {
- if (Ext.isArray(this.mapControls)) {
- for(i=0;i-
+ *
+ *
- false : Default
+ * + * Flatten into query string of the form (assuming
{@link #paramPrefix}='filters': + *
+ *+filters[0][field]="someDataIndex"& +filters[0][data][comparison]="someValue1"& +filters[0][data][type]="someValue2"& +filters[0][data][value]="someValue3"& + *
+ * - true :
+ * + * JSON encode the filter data + *
+ *+filters[0][field]="someDataIndex"& +filters[0][data][comparison]="someValue1"& +filters[0][data][type]="someValue2"& +filters[0][data][value]="someValue3"& + *
+ *
Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)'); - }else{ - point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); - if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){ - this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners); - } + + /** + * Removes filter related query parameters from the provided object. + * @param {Object} p Query parameters that may contain filter related fields. + */ + cleanParams : function (p) { + // if encoding just delete the property + if (this.encode) { + delete p[this.paramPrefix]; + // otherwise scrub the object of filter data + } else { + var regex, key; + regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]'); + for (key in p) { + if (regex.test(key)) { + delete p[key]; } } } - + }, + + /** + * Function for locating filter classes, overwrite this with your favorite + * loader to provide dynamic filter loading. + * @param {String} type The type of filter to load ('Filter' is automatically + * appended to the passed type; eg, 'string' becomes 'StringFilter'). + * @return {Class} The Ext.ux.grid.filter.Class + */ + getFilterClass : function (type) { + // map the supported Ext.data.Field type values into a supported filter + switch(type) { + case 'auto': + type = 'string'; + break; + case 'int': + case 'float': + type = 'numeric'; + break; + } + return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter']; } - }); -Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.ns('Ext.ux.grid'); +// register ptype +Ext.preg('gridfilters', Ext.ux.grid.GridFilters); +Ext.namespace('Ext.ux.grid.filter'); -/** - * @class Ext.ux.grid.GroupSummary +/** + * @class Ext.ux.grid.filter.Filter * @extends Ext.util.Observable - * A GridPanel plugin that enables dynamic column calculations and a dynamically - * updated grouped summary row. + * Abstract base class for filter implementations. */ -Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, { +Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, { /** - * @cfg {Function} summaryRenderer Renderer example:
-summaryRenderer: function(v, params, data){
- return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
-},
- * ',
- '',
- '
'
- );
- this.rowTpl.disableFormats = true;
- }
- this.rowTpl.compile();
+
+ this.addEvents(
+ /**
+ * @event activate
+ * Fires when an inactive filter becomes active
+ * @param {Ext.ux.grid.filter.Filter} this
+ */
+ 'activate',
+ /**
+ * @event deactivate
+ * Fires when an active filter becomes inactive
+ * @param {Ext.ux.grid.filter.Filter} this
+ */
+ 'deactivate',
+ /**
+ * @event serialize
+ * Fires after the serialization process. Use this to attach additional parameters to serialization
+ * data before it is encoded and sent to the server.
+ * @param {Array/Object} data A map or collection of maps representing the current filter configuration.
+ * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
+ */
+ 'serialize',
+ /**
+ * @event update
+ * Fires when a filter configuration has changed
+ * @param {Ext.ux.grid.filter.Filter} this The filter object.
+ */
+ 'update'
+ );
+ Ext.ux.grid.filter.Filter.superclass.constructor.call(this);
- if(!this.cellTpl){
- this.cellTpl = new Ext.Template(
- '{value}
',
- "Example Usage:
+ *
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ // required configs
+ type: 'boolean',
+ dataIndex: 'visible'
+
+ // optional configs
+ defaultValue: null, // leave unselected (false selected by default)
+ yesText: 'Yes', // default
+ noText: 'No' // default
+ }]
+});
+ *
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ // required configs
+ type: 'date',
+ dataIndex: 'dateAdded',
+
+ // optional configs
+ dateFormat: 'm/d/Y', // default
+ beforeText: 'Before', // default
+ afterText: 'After', // default
+ onText: 'On', // default
+ pickerOpts: {
+ // any DateMenu configs
+ },
+
+ active: true // default is false
+ }]
+});
+ * + * menuItems : ['before', 'after', '-', 'on'], + *+ */ + menuItems : ['before', 'after', '-', 'on'], + + /** + * @cfg {Object} menuItemCfgs + * Default configuration options for each menu item + */ + menuItemCfgs : { + selectOnFocus: true, + width: 125 }, - refreshSummaryById : function(gid){ - var g = document.getElementById(gid); - if(!g){ - return false; - } - var rs = []; - this.grid.store.each(function(r){ - if(r._groupId == gid){ - rs[rs.length] = r; + /** + * @cfg {String} onText + * Defaults to 'On'. + */ + onText : 'On', + + /** + * @cfg {Object} pickerOpts + * Configuration options for the date picker associated with each field. + */ + pickerOpts : {}, + + /** + * @private + * Template method that is to initialize the filter and install required menu items. + */ + init : function (config) { + var menuCfg, i, len, item, cfg, Cls; + + menuCfg = Ext.apply(this.pickerOpts, { + minDate: this.minDate, + maxDate: this.maxDate, + format: this.dateFormat, + listeners: { + scope: this, + select: this.onMenuSelect } }); - var cs = this.view.getColumnData(); - var data = this.calculate(rs, cs); - var markup = this.renderSummary({data: data}, cs); - var existing = this.getSummaryNode(gid); - if(existing){ - g.removeChild(existing); + this.fields = {}; + for (i = 0, len = this.menuItems.length; i < len; i++) { + item = this.menuItems[i]; + if (item !== '-') { + cfg = { + itemId: 'range-' + item, + text: this[item + 'Text'], + menu: new Ext.menu.DateMenu( + Ext.apply(menuCfg, { + itemId: item + }) + ), + listeners: { + scope: this, + checkchange: this.onCheckChange + } + }; + Cls = Ext.menu.CheckItem; + item = this.fields[item] = new Cls(cfg); + } + //this.add(item); + this.menu.add(item); } - Ext.DomHelper.append(g, markup); - return true; }, - doUpdate : function(ds, record){ - this.refreshSummaryById(record._groupId); + onCheckChange : function () { + this.setActive(this.isActivatable()); + this.fireEvent('update', this); }, - doRemove : function(ds, record, index, isUpdate){ - if(!isUpdate){ - this.refreshSummaryById(record._groupId); + /** + * @private + * Handler method called when there is a keyup event on an input + * item of this menu. + */ + onInputKeyUp : function (field, e) { + var k = e.getKey(); + if (k == e.RETURN && field.isValid()) { + e.stopEvent(); + this.menu.hide(true); + return; } }, /** - * Show a message in the summary row. - *
-grid.on('afteredit', function(){
- var groupValue = 'Ext Forms: Field Anchoring';
- summary.showSummaryMsg(groupValue, 'Updating Summary...');
-});
- * ' + msg + '
';
+ onMenuSelect : function (menuItem, value, picker) {
+ var fields = this.fields,
+ field = this.fields[menuItem.itemId];
+
+ field.setChecked(true);
+
+ if (field == fields.on) {
+ fields.before.setChecked(false, true);
+ fields.after.setChecked(false, true);
+ } else {
+ fields.on.setChecked(false, true);
+ if (field == fields.after && fields.before.menu.picker.value < value) {
+ fields.before.setChecked(false, true);
+ } else if (field == fields.before && fields.after.menu.picker.value > value) {
+ fields.after.setChecked(false, true);
+ }
}
- }
-});
-
-//backwards compat
-Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
-
+ this.fireEvent('update', this);
+ },
-/**
- * Calculation types for summary row:-
- *
- sum : - *
- count : - *
- max : - *
- min : - *
- average : - *
Custom calculations may be implemented. An example of
- * custom summaryType=totalCost:
-// define a custom summary function
-Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
- return v + (record.data.estimate * record.data.rate);
-};
- * List filters are able to be preloaded/backed by an Ext.data.Store to load + * their options the first time they are shown. ListFilter utilizes the + * {@link Ext.ux.menu.ListMenu} component.
+ *Although not shown here, this class accepts all configuration options + * for {@link Ext.ux.menu.ListMenu}.
+ * + *Example Usage:
+ *
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ type: 'list',
+ dataIndex: 'size',
+ phpMode: true,
+ // options will be used as data to implicitly creates an ArrayStore
+ options: ['extra small', 'small', 'medium', 'large', 'extra large']
+ }]
+});
+ * data to be used to implicitly create a data store
+ * to back this list when the data source is local. If the
+ * data for the list is remote, use the {@link #store}
+ * config instead.
Each item within the provided array may be in one of the + * following formats:
+ *-
+ *
- Array :
+ *
+ *+options: [ + [11, 'extra small'], + [18, 'small'], + [22, 'medium'], + [35, 'large'], + [44, 'extra large'] +] + *
+ * - Object :
+ *
+ *+labelField: 'name', // override default of 'text' +options: [ + {id: 11, name:'extra small'}, + {id: 18, name:'small'}, + {id: 22, name:'medium'}, + {id: 35, name:'large'}, + {id: 44, name:'extra large'} +] + *
+ * - String :
+ *
+ *+ * options: ['extra small', 'small', 'medium', 'large', 'extra large'] + *
+ */
+ /**
+ * @cfg {Boolean} phpMode
+ *
Adjust the format of this filter. Defaults to false.
+ *When GridFilters @cfg encode = false (default):
+// phpMode == false (default):
+filter[0][data][type] list
+filter[0][data][value] value1
+filter[0][data][value] value2
+filter[0][field] prod
+
+// phpMode == true:
+filter[0][data][type] list
+filter[0][data][value] value1, value2
+filter[0][field] prod
+ * @cfg encode = true:
+ *
+// phpMode == false (default):
+filter : [{"type":"list","value":["small","medium"],"field":"size"}]
+
+// phpMode == true:
+filter : [{"type":"list","value":"small,medium","field":"size"}]
+ * {@link #options} config instead.
+ */
+
+ /**
+ * @private
+ * Template method that is to initialize the filter and install required menu items.
+ * @param {Object} config
+ */
+ init : function (config) {
+ this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
+
+ // if a menu already existed, do clean up first
+ if (this.menu){
+ this.menu.destroy();
+ }
+ this.menu = new Ext.ux.menu.ListMenu(config);
+ this.menu.on('checkchange', this.onCheckChange, this);
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return the value of the filter.
+ * @return {String} The value of this filter
+ */
+ getValue : function () {
+ return this.menu.getSelected();
+ },
+ /**
+ * @private
+ * Template method that is to set the value of the filter.
+ * @param {Object} value The value to set the filter
+ */
+ setValue : function (value) {
+ this.menu.setSelected(value);
+ this.fireEvent('update', this);
+ },
+
+ /**
+ * @private
+ * Template method that is to return true if the filter
+ * has enough configuration information to be activated.
+ * @return {Boolean}
+ */
+ isActivatable : function () {
+ return this.getValue().length > 0;
+ },
+
+ /**
+ * @private
+ * Template method that is to get and return serialized filter data for
+ * transmission to the server.
+ * @return {Object/Array} An object or collection of objects containing
+ * key value pairs representing the current configuration of the filter.
+ */
+ getSerialArgs : function () {
+ var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
+ return args;
+ },
+
+ /** @private */
+ onCheckChange : function(){
+ this.dt.delay(this.updateBuffer);
+ },
+
+
+ /**
+ * Template method that is to validate the provided Ext.data.Record
+ * against the filters configuration.
+ * @param {Ext.data.Record} record The record to validate
+ * @return {Boolean} true if the record is valid within the bounds
+ * of the filter, false otherwise.
+ */
+ validateRecord : function (record) {
+ return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
+ }
+});/**
+ * @class Ext.ux.grid.filter.NumericFilter
+ * @extends Ext.ux.grid.filter.Filter
+ * Filters using an Ext.ux.menu.RangeMenu.
+ * Example Usage:
+ *
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ type: 'numeric',
+ dataIndex: 'price'
+ }]
+});
+ * + * fieldCls : Ext.form.NumberField + *+ */ + fieldCls : Ext.form.NumberField, + /** + * @cfg {Object} fieldCfg + * The default configuration options for any field item unless superseded + * by the
{@link #fields} configuration.
+ * Defaults to:
+ * fieldCfg : {}
+ *
+ * Example usage:
+ *
+fieldCfg : {
+ width: 150,
+},
+ *
+fields : {
+ gt: { // override fieldCfg options
+ width: 200,
+ fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
+ }
+},
+ *
+iconCls : {
+ gt : 'ux-rangemenu-gt',
+ lt : 'ux-rangemenu-lt',
+ eq : 'ux-rangemenu-eq'
+}
+ *
+ */
+ iconCls : {
+ gt : 'ux-rangemenu-gt',
+ lt : 'ux-rangemenu-lt',
+ eq : 'ux-rangemenu-eq'
+ },
+
+ /**
+ * @cfg {Object} menuItemCfgs
+ * Default configuration options for each menu item
+ * Defaults to:
+menuItemCfgs : {
+ emptyText: 'Enter Filter Text...',
+ selectOnFocus: true,
+ width: 125
+}
+ *
+ */
+ menuItemCfgs : {
+ emptyText: 'Enter Filter Text...',
+ selectOnFocus: true,
+ width: 125
+ },
+
+ /**
+ * @cfg {Array} menuItems
+ * The items to be shown in this menu. Items are added to the menu
+ * according to their position within this array. Defaults to:+ * menuItems : ['lt','gt','-','eq'] + *+ */ + menuItems : ['lt', 'gt', '-', 'eq'], + + /** + * @private + * Template method that is to initialize the filter and install required menu items. + */ + init : function (config) { + // if a menu already existed, do clean up first + if (this.menu){ + this.menu.destroy(); + } + this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, { + // pass along filter configs to the menu + fieldCfg : this.fieldCfg || {}, + fieldCls : this.fieldCls, + fields : this.fields || {}, + iconCls: this.iconCls, + menuItemCfgs: this.menuItemCfgs, + menuItems: this.menuItems, + updateBuffer: this.updateBuffer + })); + // relay the event fired by the menu + this.menu.on('update', this.fireUpdate, this); + }, + + /** + * @private + * Template method that is to get and return the value of the filter. + * @return {String} The value of this filter + */ + getValue : function () { + return this.menu.getValue(); + }, + + /** + * @private + * Template method that is to set the value of the filter. + * @param {Object} value The value to set the filter + */ + setValue : function (value) { + this.menu.setValue(value); + }, + + /** + * @private + * Template method that is to return true if the filter + * has enough configuration information to be activated. + * @return {Boolean} + */ + isActivatable : function () { + var values = this.getValue(); + for (key in values) { + if (values[key] !== undefined) { + return true; + } + } + return false; + }, + + /** + * @private + * Template method that is to get and return serialized filter data for + * transmission to the server. + * @return {Object/Array} An object or collection of objects containing + * key value pairs representing the current configuration of the filter. + */ + getSerialArgs : function () { + var key, + args = [], + values = this.menu.getValue(); + for (key in values) { + args.push({ + type: 'numeric', + comparison: key, + value: values[key] + }); + } + return args; + }, + + /** + * Template method that is to validate the provided Ext.data.Record + * against the filters configuration. + * @param {Ext.data.Record} record The record to validate + * @return {Boolean} true if the record is valid within the bounds + * of the filter, false otherwise. + */ + validateRecord : function (record) { + var val = record.get(this.dataIndex), + values = this.getValue(); + if (values.eq !== undefined && val != values.eq) { + return false; + } + if (values.lt !== undefined && val >= values.lt) { + return false; + } + if (values.gt !== undefined && val <= values.gt) { + return false; + } + return true; + } +});/** + * @class Ext.ux.grid.filter.StringFilter + * @extends Ext.ux.grid.filter.Filter + * Filter by a configurable Ext.form.TextField + *
Example Usage:
+ *
+var filters = new Ext.ux.grid.GridFilters({
+ ...
+ filters: [{
+ // required configs
+ type: 'string',
+ dataIndex: 'name',
+
+ // optional configs
+ value: 'foo',
+ active: true, // default is false
+ iconCls: 'ux-gridfilter-text-icon' // default
+ // any Ext.form.TextField configs accepted
+ }]
+});
+ * Example Usage:
+ *
+
+ *
+summaryRenderer: function(v, params, data){
+ return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
+},
+ * ',
+ '',
+ '
'
+ );
+ this.rowTpl.disableFormats = true;
+ }
+ this.rowTpl.compile();
+
+ if(!this.cellTpl){
+ this.cellTpl = new Ext.Template(
+ '{value}
',
+ "
+grid.on('afteredit', function(){
+ var groupValue = 'Ext Forms: Field Anchoring';
+ summary.showSummaryMsg(groupValue, 'Updating Summary...');
+});
+ * ' + msg + '
';
+ }
+ }
+});
+
+//backwards compat
+Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
+
+
+/**
+ * Calculation types for summary row:-
+ *
- sum : + *
- count : + *
- max : + *
- min : + *
- average : + *
Custom calculations may be implemented. An example of
+ * custom summaryType=totalCost:
+// define a custom summary function
+Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
+ return v + (record.data.estimate * record.data.rate);
+};
+ *
@@ -2057,9 +3866,9 @@ Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
* @param {Object} cs
*/
calculate : function(rs, cs){
- var gcol = this.view.getGroupField();
- var gvalue = rs[0].data[gcol];
- var gdata = this.getSummaryData(gvalue);
+ var gcol = this.view.getGroupField(),
+ gvalue = rs[0].data[gcol],
+ gdata = this.getSummaryData(gvalue);
return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
},
@@ -2081,7 +3890,7 @@ grid.on('afteredit', function(){
* @param {Boolean} skipRefresh (Optional) Defaults to false
*/
updateSummaryData : function(groupValue, data, skipRefresh){
- var json = this.grid.store.reader.jsonData;
+ var json = this.grid.getStore().reader.jsonData;
if(!json.summaryData){
json.summaryData = {};
}
@@ -2097,7 +3906,7 @@ grid.on('afteredit', function(){
* @return {Object} summaryData
*/
getSummaryData : function(groupValue){
- var json = this.grid.store.reader.jsonData;
+ var json = this.grid.getStore().reader.jsonData;
if(json && json.summaryData){
return json.summaryData[groupValue];
}
@@ -2167,20 +3976,19 @@ Ext.ux.GroupTab = Ext.extend(Ext.Container, {
*/
setActiveTab : function(item){
item = this.getComponent(item);
- if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
- return;
+ if(!item){
+ return false;
}
if(!this.rendered){
this.activeTab = item;
- return;
+ return true;
}
- if(this.activeTab != item){
+ if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
if(this.activeTab && this.activeTab != this.mainItem){
var oldEl = this.getTabEl(this.activeTab);
if(oldEl){
Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
}
- this.activeTab.fireEvent('deactivate', this.activeTab);
}
var el = this.getTabEl(item);
Ext.fly(el).addClass('x-grouptabs-strip-active');
@@ -2195,9 +4003,10 @@ Ext.ux.GroupTab = Ext.extend(Ext.Container, {
this.scrollToTab(item, this.animScroll);
}
- item.fireEvent('activate', item);
this.fireEvent('tabchange', this, item);
+ return true;
}
+ return false;
},
getTabEl: function(item){
@@ -2415,7 +4224,6 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
onRender: function(ct, position){
Ext.TabPanel.superclass.onRender.call(this, ct, position);
-
if(this.plain){
var pos = this.tabPosition == 'top' ? 'header' : 'footer';
this[pos].addClass('x-tab-panel-'+pos+'-plain');
@@ -2433,7 +4241,7 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
this.bwrap.addClass('x-grouptabs-bwrap');
this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
- if (!this.itemTpl) {
+ if (!this.groupTpl) {
var tt = new Ext.Template(
'',
'',
@@ -2443,9 +4251,8 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
);
tt.disableFormats = true;
tt.compile();
- Ext.ux.GroupTabPanel.prototype.itemTpl = tt;
+ Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
}
-
this.items.each(this.initGroup, this);
},
@@ -2471,8 +4278,8 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
// private
findTargets: function(e){
- var item = null;
- var itemEl = e.getTarget('li', this.strip);
+ var item = null,
+ itemEl = e.getTarget('li', this.strip);
if (itemEl) {
item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
if (item.disabled) {
@@ -2516,6 +4323,7 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
groupEl = this.getGroupEl(groupEl);
}
Ext.fly(groupEl).addClass('x-grouptabs-expanded');
+ this.syncTabJoint();
},
toggleGroup: function(groupEl){
@@ -2525,7 +4333,15 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
this.syncTabJoint();
},
-
+
+ collapseGroup: function(groupEl){
+ if(groupEl.isXType) {
+ groupEl = this.getGroupEl(groupEl);
+ }
+ Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
+ this.syncTabJoint();
+ },
+
syncTabJoint: function(groupEl){
if (!this.tabJoint) {
return;
@@ -2565,19 +4381,19 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
},
initGroup: function(group, index){
- var before = this.strip.dom.childNodes[index];
- var p = this.getTemplateArgs(group);
+ var before = this.strip.dom.childNodes[index],
+ p = this.getTemplateArgs(group);
if (index === 0) {
p.cls += ' x-tab-first';
}
p.cls += ' x-grouptabs-main';
p.text = group.getMainItem().title;
- var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
-
- var tl = this.createCorner(el, 'top-' + this.tabPosition);
- var bl = this.createCorner(el, 'bottom-' + this.tabPosition);
+ var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
+ tl = this.createCorner(el, 'top-' + this.tabPosition),
+ bl = this.createCorner(el, 'bottom-' + this.tabPosition);
+ group.tabEl = el;
if (group.expanded) {
this.expandGroup(el);
}
@@ -2589,26 +4405,28 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
tl.setTop('-5px');
}
- this.mon(group, 'changemainitem', this.onGroupChangeMainItem, this);
- this.mon(group, 'beforetabchange', this.onGroupBeforeTabChange, this);
+ this.mon(group, {
+ scope: this,
+ changemainitem: this.onGroupChangeMainItem,
+ beforetabchange: this.onGroupBeforeTabChange
+ });
},
setActiveGroup : function(group) {
group = this.getComponent(group);
- if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){
- return;
+ if(!group){
+ return false;
}
if(!this.rendered){
this.activeGroup = group;
- return;
+ return true;
}
- if(this.activeGroup != group){
+ if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
if(this.activeGroup){
var oldEl = this.getGroupEl(this.activeGroup);
if(oldEl){
Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
}
- this.activeGroup.fireEvent('deactivate', this.activeTab);
}
var groupEl = this.getGroupEl(group);
@@ -2620,18 +4438,20 @@ Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
this.layout.setActiveItem(group);
this.syncTabJoint(groupEl);
- group.fireEvent('activate', group);
this.fireEvent('groupchange', this, group);
- }
+ return true;
+ }
+ return false;
},
onGroupBeforeTabChange: function(group, newTab, oldTab){
if(group !== this.activeGroup || newTab !== oldTab) {
this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
}
-
this.expandGroup(this.getGroupEl(group));
- this.setActiveGroup(group);
+ if(group !== this.activeGroup) {
+ return this.setActiveGroup(group);
+ }
},
getFrameHeight: function(){
@@ -2900,82 +4720,849 @@ Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
}
}
}
- this.toMultiselect.view.refresh();
- this.fromMultiselect.view.refresh();
- var si = this.toMultiselect.store.sortInfo;
- if(si){
- this.toMultiselect.store.sort(si.field, si.direction);
+ this.toMultiselect.view.refresh();
+ this.fromMultiselect.view.refresh();
+ var si = this.toMultiselect.store.sortInfo;
+ if(si){
+ this.toMultiselect.store.sort(si.field, si.direction);
+ }
+ this.toMultiselect.view.select(selectionsArray);
+ },
+
+ toFrom : function() {
+ var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
+ var records = [];
+ if (selectionsArray.length > 0) {
+ for (var i=0; i',
+ '',
+ '{lockedHeader}',
+ '{lockedBody}',
+ '',
+ '',
+ ' ',
+ ' ',
+ ''
+ );
+ }
+ this.templates = ts;
+ Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
+ },
+ getEditorParent : function(ed){
+ return this.el.dom;
+ },
+ initElements : function(){
+ var E = Ext.Element;
+ var el = this.grid.getGridEl().dom.firstChild;
+ var cs = el.childNodes;
+ this.el = new E(el);
+ this.lockedWrap = new E(cs[0]);
+ this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+ this.lockedInnerHd = this.lockedHd.dom.firstChild;
+ this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]);
+ this.lockedBody = new E(this.lockedScroller.dom.firstChild);
+ this.mainWrap = new E(cs[1]);
+ this.mainHd = new E(this.mainWrap.dom.firstChild);
+ if(this.grid.hideHeaders){
+ this.lockedHd.setDisplayed(false);
+ this.mainHd.setDisplayed(false);
+ }
+ this.innerHd = this.mainHd.dom.firstChild;
+ this.scroller = new E(this.mainWrap.dom.childNodes[1]);
+ if(this.forceFit){
+ this.scroller.setStyle('overflow-x', 'hidden');
+ }
+ this.mainBody = new E(this.scroller.dom.firstChild);
+ this.focusEl = new E(this.scroller.dom.childNodes[1]);
+ this.focusEl.swallowEvent('click', true);
+ this.resizeMarker = new E(cs[2]);
+ this.resizeProxy = new E(cs[3]);
+ },
+
+ getLockedRows : function(){
+ return this.hasRows() ? this.lockedBody.dom.childNodes : [];
+ },
+
+ getLockedRow : function(row){
+ return this.getLockedRows()[row];
+ },
+
+ getCell : function(row, col){
+ var llen = this.cm.getLockedCount();
+ if(col < llen){
+ return this.getLockedRow(row).getElementsByTagName('td')[col];
+ }
+ return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);
+ },
+
+ getHeaderCell : function(index){
+ var llen = this.cm.getLockedCount();
+ if(index < llen){
+ return this.lockedHd.dom.getElementsByTagName('td')[index];
+ }
+ return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);
+ },
+
+ addRowClass : function(row, cls){
+ var r = this.getLockedRow(row);
+ if(r){
+ this.fly(r).addClass(cls);
+ }
+ Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);
+ },
+
+ removeRowClass : function(row, cls){
+ var r = this.getLockedRow(row);
+ if(r){
+ this.fly(r).removeClass(cls);
+ }
+ Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
+ },
+
+ removeRow : function(row) {
+ Ext.removeNode(this.getLockedRow(row));
+ Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
+ },
+
+ removeRows : function(firstRow, lastRow){
+ var bd = this.lockedBody.dom;
+ for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
+ Ext.removeNode(bd.childNodes[firstRow]);
+ }
+ Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);
+ },
+
+ syncScroll : function(e){
+ var mb = this.scroller.dom;
+ this.lockedScroller.dom.scrollTop = mb.scrollTop;
+ Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);
+ },
+
+ updateSortIcon : function(col, dir){
+ var sc = this.sortClasses,
+ lhds = this.lockedHd.select('td').removeClass(sc),
+ hds = this.mainHd.select('td').removeClass(sc),
+ llen = this.cm.getLockedCount(),
+ cls = sc[dir == 'DESC' ? 1 : 0];
+ if(col < llen){
+ lhds.item(col).addClass(cls);
+ }else{
+ hds.item(col - llen).addClass(cls);
+ }
+ },
+
+ updateAllColumnWidths : function(){
+ var tw = this.getTotalWidth(),
+ clen = this.cm.getColumnCount(),
+ lw = this.getLockedWidth(),
+ llen = this.cm.getLockedCount(),
+ ws = [], len, i;
+ this.updateLockedWidth();
+ for(i = 0; i < clen; i++){
+ ws[i] = this.getColumnWidth(i);
+ var hd = this.getHeaderCell(i);
+ hd.style.width = ws[i];
+ }
+ var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
+ for(i = 0, len = ns.length; i < len; i++){
+ row = lns[i];
+ row.style.width = lw;
+ if(row.firstChild){
+ row.firstChild.style.width = lw;
+ trow = row.firstChild.rows[0];
+ for (j = 0; j < llen; j++) {
+ trow.childNodes[j].style.width = ws[j];
+ }
+ }
+ row = ns[i];
+ row.style.width = tw;
+ if(row.firstChild){
+ row.firstChild.style.width = tw;
+ trow = row.firstChild.rows[0];
+ for (j = llen; j < clen; j++) {
+ trow.childNodes[j - llen].style.width = ws[j];
+ }
+ }
+ }
+ this.onAllColumnWidthsUpdated(ws, tw);
+ this.syncHeaderHeight();
+ },
+
+ updateColumnWidth : function(col, width){
+ var w = this.getColumnWidth(col),
+ llen = this.cm.getLockedCount(),
+ ns, rw, c, row;
+ this.updateLockedWidth();
+ if(col < llen){
+ ns = this.getLockedRows();
+ rw = this.getLockedWidth();
+ c = col;
+ }else{
+ ns = this.getRows();
+ rw = this.getTotalWidth();
+ c = col - llen;
+ }
+ var hd = this.getHeaderCell(col);
+ hd.style.width = w;
+ for(var i = 0, len = ns.length; i < len; i++){
+ row = ns[i];
+ row.style.width = rw;
+ if(row.firstChild){
+ row.firstChild.style.width = rw;
+ row.firstChild.rows[0].childNodes[c].style.width = w;
+ }
+ }
+ this.onColumnWidthUpdated(col, w, this.getTotalWidth());
+ this.syncHeaderHeight();
+ },
+
+ updateColumnHidden : function(col, hidden){
+ var llen = this.cm.getLockedCount(),
+ ns, rw, c, row,
+ display = hidden ? 'none' : '';
+ this.updateLockedWidth();
+ if(col < llen){
+ ns = this.getLockedRows();
+ rw = this.getLockedWidth();
+ c = col;
+ }else{
+ ns = this.getRows();
+ rw = this.getTotalWidth();
+ c = col - llen;
+ }
+ var hd = this.getHeaderCell(col);
+ hd.style.display = display;
+ for(var i = 0, len = ns.length; i < len; i++){
+ row = ns[i];
+ row.style.width = rw;
+ if(row.firstChild){
+ row.firstChild.style.width = rw;
+ row.firstChild.rows[0].childNodes[c].style.display = display;
+ }
+ }
+ this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
+ delete this.lastViewWidth;
+ this.layout();
+ },
+
+ doRender : function(cs, rs, ds, startRow, colCount, stripe){
+ var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
+ tstyle = 'width:'+this.getTotalWidth()+';',
+ lstyle = 'width:'+this.getLockedWidth()+';',
+ buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
+ for(var j = 0, len = rs.length; j < len; j++){
+ r = rs[j]; cb = []; lcb = [];
+ var rowIndex = (j+startRow);
+ for(var i = 0; i < colCount; i++){
+ c = cs[i];
+ p.id = c.id;
+ p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
+ (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
+ p.attr = p.cellAttr = '';
+ p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+ p.style = c.style;
+ if(Ext.isEmpty(p.value)){
+ p.value = ' ';
+ }
+ if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
+ p.css += ' x-grid3-dirty-cell';
+ }
+ if(c.locked){
+ lcb[lcb.length] = ct.apply(p);
+ }else{
+ cb[cb.length] = ct.apply(p);
+ }
+ }
+ var alt = [];
+ if(stripe && ((rowIndex+1) % 2 === 0)){
+ alt[0] = 'x-grid3-row-alt';
+ }
+ if(r.dirty){
+ alt[1] = ' x-grid3-dirty-row';
+ }
+ rp.cols = colCount;
+ if(this.getRowClass){
+ alt[2] = this.getRowClass(r, rowIndex, rp, ds);
+ }
+ rp.alt = alt.join(' ');
+ rp.cells = cb.join('');
+ rp.tstyle = tstyle;
+ buf[buf.length] = rt.apply(rp);
+ rp.cells = lcb.join('');
+ rp.tstyle = lstyle;
+ lbuf[lbuf.length] = rt.apply(rp);
+ }
+ return [buf.join(''), lbuf.join('')];
+ },
+ processRows : function(startRow, skipStripe){
+ if(!this.ds || this.ds.getCount() < 1){
+ return;
+ }
+ var rows = this.getRows(),
+ lrows = this.getLockedRows(),
+ row, lrow;
+ skipStripe = skipStripe || !this.grid.stripeRows;
+ startRow = startRow || 0;
+ for(var i = 0, len = rows.length; i < len; ++i){
+ row = rows[i];
+ lrow = lrows[i];
+ row.rowIndex = i;
+ lrow.rowIndex = i;
+ if(!skipStripe){
+ row.className = row.className.replace(this.rowClsRe, ' ');
+ lrow.className = lrow.className.replace(this.rowClsRe, ' ');
+ if ((idx + 1) % 2 === 0){
+ row.className += ' x-grid3-row-alt';
+ lrow.className += ' x-grid3-row-alt';
+ }
+ }
+ if(this.syncHeights){
+ var el1 = Ext.get(row),
+ el2 = Ext.get(lrow),
+ h1 = el1.getHeight(),
+ h2 = el2.getHeight();
+
+ if(h1 > h2){
+ el2.setHeight(h1);
+ }else if(h2 > h1){
+ el1.setHeight(h2);
+ }
+ }
+ }
+ if(startRow === 0){
+ Ext.fly(rows[0]).addClass(this.firstRowCls);
+ Ext.fly(lrows[0]).addClass(this.firstRowCls);
+ }
+ Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
+ Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
+ },
+
+ afterRender : function(){
+ if(!this.ds || !this.cm){
+ return;
+ }
+ var bd = this.renderRows() || [' ', ' '];
+ this.mainBody.dom.innerHTML = bd[0];
+ this.lockedBody.dom.innerHTML = bd[1];
+ this.processRows(0, true);
+ if(this.deferEmptyText !== true){
+ this.applyEmptyText();
+ }
+ },
+
+ renderUI : function(){
+ var header = this.renderHeaders();
+ var body = this.templates.body.apply({rows:' '});
+ var html = this.templates.master.apply({
+ body: body,
+ header: header[0],
+ ostyle: 'width:'+this.getOffsetWidth()+';',
+ bstyle: 'width:'+this.getTotalWidth()+';',
+ lockedBody: body,
+ lockedHeader: header[1],
+ lstyle: 'width:'+this.getLockedWidth()+';'
+ });
+ var g = this.grid;
+ g.getGridEl().dom.innerHTML = html;
+ this.initElements();
+ Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
+ Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);
+ this.mainHd.on({
+ scope: this,
+ mouseover: this.handleHdOver,
+ mouseout: this.handleHdOut,
+ mousemove: this.handleHdMove
+ });
+ this.lockedHd.on({
+ scope: this,
+ mouseover: this.handleHdOver,
+ mouseout: this.handleHdOut,
+ mousemove: this.handleHdMove
+ });
+ this.scroller.on('scroll', this.syncScroll, this);
+ if(g.enableColumnResize !== false){
+ this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
+ this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
+ this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
+ }
+ if(g.enableColumnMove){
+ this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
+ this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
+ this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
+ this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
+ }
+ if(g.enableHdMenu !== false){
+ this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
+ this.hmenu.add(
+ {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
+ {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
+ );
+ if(this.grid.enableColLock !== false){
+ this.hmenu.add('-',
+ {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
+ {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
+ );
+ }
+ if(g.enableColumnHide !== false){
+ this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
+ this.colMenu.on({
+ scope: this,
+ beforeshow: this.beforeColMenuShow,
+ itemclick: this.handleHdMenuClick
+ });
+ this.hmenu.add('-', {
+ itemId:'columns',
+ hideOnClick: false,
+ text: this.columnsText,
+ menu: this.colMenu,
+ iconCls: 'x-cols-icon'
+ });
+ }
+ this.hmenu.on('itemclick', this.handleHdMenuClick, this);
+ }
+ if(g.trackMouseOver){
+ this.mainBody.on({
+ scope: this,
+ mouseover: this.onRowOver,
+ mouseout: this.onRowOut
+ });
+ this.lockedBody.on({
+ scope: this,
+ mouseover: this.onRowOver,
+ mouseout: this.onRowOut
+ });
+ }
+
+ if(g.enableDragDrop || g.enableDrag){
+ this.dragZone = new Ext.grid.GridDragZone(g, {
+ ddGroup : g.ddGroup || 'GridDD'
+ });
+ }
+ this.updateHeaderSortState();
+ },
+
+ layout : function(){
+ if(!this.mainBody){
+ return;
+ }
+ var g = this.grid;
+ var c = g.getGridEl();
+ var csize = c.getSize(true);
+ var vw = csize.width;
+ if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
+ return;
+ }
+ this.syncHeaderHeight();
+ if(g.autoHeight){
+ this.scroller.dom.style.overflow = 'visible';
+ this.lockedScroller.dom.style.overflow = 'visible';
+ if(Ext.isWebKit){
+ this.scroller.dom.style.position = 'static';
+ this.lockedScroller.dom.style.position = 'static';
+ }
+ }else{
+ this.el.setSize(csize.width, csize.height);
+ var hdHeight = this.mainHd.getHeight();
+ var vh = csize.height - (hdHeight);
+ }
+ this.updateLockedWidth();
+ if(this.forceFit){
+ if(this.lastViewWidth != vw){
+ this.fitColumns(false, false);
+ this.lastViewWidth = vw;
+ }
+ }else {
+ this.autoExpand();
+ this.syncHeaderScroll();
+ }
+ this.onLayout(vw, vh);
+ },
+
+ getOffsetWidth : function() {
+ return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';
+ },
+
+ renderHeaders : function(){
+ var cm = this.cm,
+ ts = this.templates,
+ ct = ts.hcell,
+ cb = [], lcb = [],
+ p = {},
+ len = cm.getColumnCount(),
+ last = len - 1;
+ for(var i = 0; i < len; i++){
+ p.id = cm.getColumnId(i);
+ p.value = cm.getColumnHeader(i) || '';
+ p.style = this.getColumnStyle(i, true);
+ p.tooltip = this.getColumnTooltip(i);
+ p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
+ (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');
+ if(cm.config[i].align == 'right'){
+ p.istyle = 'padding-right:16px';
+ } else {
+ delete p.istyle;
+ }
+ if(cm.isLocked(i)){
+ lcb[lcb.length] = ct.apply(p);
+ }else{
+ cb[cb.length] = ct.apply(p);
+ }
+ }
+ return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),
+ ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];
+ },
+
+ updateHeaders : function(){
+ var hd = this.renderHeaders();
+ this.innerHd.firstChild.innerHTML = hd[0];
+ this.innerHd.firstChild.style.width = this.getOffsetWidth();
+ this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
+ this.lockedInnerHd.firstChild.innerHTML = hd[1];
+ var lw = this.getLockedWidth();
+ this.lockedInnerHd.firstChild.style.width = lw;
+ this.lockedInnerHd.firstChild.firstChild.style.width = lw;
+ },
+
+ getResolvedXY : function(resolved){
+ if(!resolved){
+ return null;
}
- this.toMultiselect.view.select(selectionsArray);
+ var c = resolved.cell, r = resolved.row;
+ return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
},
-
- toFrom : function() {
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
- var records = [];
- if (selectionsArray.length > 0) {
- for (var i=0; i= last){
+ this.refresh();
+ }else{
+ if(!isUpdate){
+ this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
}
- selectionsArray = [];
- for (var i=0; i= last){
+ this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);
}
}
- this.fromMultiselect.view.refresh();
- this.toMultiselect.view.refresh();
- var si = this.fromMultiselect.store.sortInfo;
- if (si){
- this.fromMultiselect.store.sort(si.field, si.direction);
+ this.syncFocusEl(firstRow);
+ },
+
+ getColumnStyle : function(col, isHeader){
+ var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';
+ style += 'width:'+this.getColumnWidth(col)+';';
+ if(this.cm.isHidden(col)){
+ style += 'display:none;';
}
- this.fromMultiselect.view.select(selectionsArray);
+ var align = this.cm.config[col].align;
+ if(align){
+ style += 'text-align:'+align+';';
+ }
+ return style;
},
-
- valueChanged: function(store) {
- var record = null;
- var values = [];
- for (var i=0; i hd ? lhd : hd) + 'px';
+ this.innerHd.firstChild.firstChild.style.height = height;
+ this.lockedInnerHd.firstChild.firstChild.style.height = height;
+ },
+
+ updateLockedWidth: function(){
+ var lw = this.cm.getTotalLockedWidth(),
+ tw = this.cm.getTotalWidth() - lw,
+ csize = this.grid.getGridEl().getSize(true),
+ lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,
+ rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,
+ vw = (csize.width - lw - lp - rp) + 'px',
+ so = this.getScrollOffset();
+ if(!this.grid.autoHeight){
+ var vh = (csize.height - this.mainHd.getHeight()) + 'px';
+ this.lockedScroller.dom.style.height = vh;
+ this.scroller.dom.style.height = vh;
+ }
+ this.lockedWrap.dom.style.width = (lw + rp) + 'px';
+ this.scroller.dom.style.width = vw;
+ this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';
+ if(this.innerHd){
+ this.lockedInnerHd.firstChild.style.width = lw + 'px';
+ this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
+ this.innerHd.style.width = vw;
+ this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';
+ this.innerHd.firstChild.firstChild.style.width = tw + 'px';
+ }
+ if(this.mainBody){
+ this.lockedBody.dom.style.width = (lw + rp) + 'px';
+ this.mainBody.dom.style.width = (tw + rp) + 'px';
}
- this.valueChanged(this.toMultiselect.store);
}
});
-Ext.reg('itemselector', Ext.ux.form.ItemSelector);
-
-//backwards compat
-Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
+Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
+ isLocked : function(colIndex){
+ return this.config[colIndex].locked === true;
+ },
+
+ setLocked : function(colIndex, value, suppressEvent){
+ if(this.isLocked(colIndex) == value){
+ return;
+ }
+ this.config[colIndex].locked = value;
+ if(!suppressEvent){
+ this.fireEvent('columnlockchange', this, colIndex, value);
+ }
+ },
+
+ getTotalLockedWidth : function(){
+ var totalWidth = 0;
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(this.isLocked(i) && !this.isHidden(i)){
+ totalWidth += this.getColumnWidth(i);
+ }
+ }
+ return totalWidth;
+ },
+
+ getLockedCount : function(){
+ for(var i = 0, len = this.config.length; i < len; i++){
+ if(!this.isLocked(i)){
+ return i;
+ }
+ }
+ },
+
+ moveColumn : function(oldIndex, newIndex){
+ if(oldIndex < newIndex && this.isLocked(oldIndex) && !this.isLocked(newIndex)){
+ this.setLocked(oldIndex, false, true);
+ }else if(oldIndex > newIndex && !this.isLocked(oldIndex) && this.isLocked(newIndex)){
+ this.setLocked(oldIndex, true, true);
+ }
+ Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
+ }
+});
Ext.ns('Ext.ux.form');
/**
@@ -3128,9 +5715,9 @@ Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {
height: this.height,
width: this.width,
style: "padding:0;",
- tbar: this.tbar,
- bodyStyle: 'overflow: auto;'
+ tbar: this.tbar
});
+ fs.body.addClass('ux-mselect');
this.view = new Ext.ListView({
multiSelect: true,
@@ -3629,8 +6216,8 @@ Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
// use integer as params.sort to specify column, since arrays are not named
// params.sort=0; would also match a array without columns
var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
- var fn = function(r1, r2){
- return r1 < r2;
+ var fn = function(v1, v2){
+ return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
result.records.sort(function(a, b){
var v = 0;
@@ -3979,19 +6566,8 @@ Ext.ux.ProgressBarPager = Ext.extend(Object, {
Ext.apply(parent, this.parentOverrides);
this.progressBar.on('render', function(pb) {
- pb.el.applyStyles('cursor:pointer');
-
- pb.el.on('click', this.handleProgressBarClick, this);
- }, this);
-
-
- // Remove the click handler from the
- this.progressBar.on({
- scope : this,
- beforeDestroy : function() {
- this.progressBar.el.un('click', this.handleProgressBarClick, this);
- }
- });
+ pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
+ }, this, {single: true});
}
@@ -3999,15 +6575,14 @@ Ext.ux.ProgressBarPager = Ext.extend(Object, {
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
- var parent = this.parent;
- var displayItem = parent.displayItem;
-
- var box = this.progressBar.getBox();
- var xy = e.getXY();
- var position = xy[0]-box.x;
- var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
-
- var newpage = Math.ceil(position/(displayItem.width/pages));
+ var parent = this.parent,
+ displayItem = parent.displayItem,
+ box = this.progressBar.getBox(),
+ xy = e.getXY(),
+ position = xy[0]-box.x,
+ pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
+ newpage = Math.ceil(position/(displayItem.width/pages));
+
parent.changePage(newpage);
},
@@ -4017,11 +6592,10 @@ Ext.ux.ProgressBarPager = Ext.extend(Object, {
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
- var count = this.store.getCount();
- var pgData = this.getPageData();
- var pageNum = this.readPage(pgData);
-
- var msg = count == 0 ?
+ var count = this.store.getCount(),
+ pgData = this.getPageData(),
+ pageNum = this.readPage(pgData),
+ msg = count == 0 ?
this.emptyMsg :
String.format(
this.displayMsg,
@@ -4064,6 +6638,11 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
monitorValid: true,
focusDelay: 250,
errorSummary: true,
+
+ saveText: 'Save',
+ cancelText: 'Cancel',
+ commitChangesText: 'You need to commit or cancel your changes',
+ errorText: 'Errors',
defaults: {
normalWidth: true
@@ -4080,6 +6659,13 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
* @param {Number} rowIndex The rowIndex of the row just edited
*/
'beforeedit',
+ /**
+ * @event canceledit
+ * Fired when the editor is cancelled.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
+ */
+ 'canceledit',
/**
* @event validateedit
* Fired after a row is edited and passes validation.
@@ -4126,7 +6712,8 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
columnresize: this.verifyLayout,
columnmove: this.refreshFields,
reconfigure: this.refreshFields,
- destroy : this.destroy,
+ beforedestroy : this.beforedestroy,
+ destroy : this.destroy,
bodyscroll: {
buffer: 250,
fn: this.positionButtons
@@ -4136,6 +6723,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
},
+ beforedestroy: function() {
+ this.grid.getStore().un('remove', this.onStoreRemove, this);
+ this.stopEditing(false);
+ Ext.destroy(this.btns);
+ },
+
refreshFields: function(){
this.initFields();
this.verifyLayout();
@@ -4154,17 +6747,18 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
startEditing: function(rowIndex, doFocus){
if(this.editing && this.isDirty()){
- this.showTooltip('You need to commit or cancel your changes');
+ this.showTooltip(this.commitChangesText);
return;
}
- this.editing = true;
- if(typeof rowIndex == 'object'){
+ if(Ext.isObject(rowIndex)){
rowIndex = this.grid.getStore().indexOf(rowIndex);
}
if(this.fireEvent('beforeedit', this, rowIndex) !== false){
- var g = this.grid, view = g.getView();
- var row = view.getRow(rowIndex);
- var record = g.store.getAt(rowIndex);
+ this.editing = true;
+ var g = this.grid, view = g.getView(),
+ row = view.getRow(rowIndex),
+ record = g.store.getAt(rowIndex);
+
this.record = record;
this.rowIndex = rowIndex;
this.values = {};
@@ -4181,7 +6775,7 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
val = this.preEditValue(record, cm.getDataIndex(i));
f = fields[i];
f.setValue(val);
- this.values[f.id] = val || '';
+ this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
this.verifyLayout(true);
if(!this.isVisible()){
@@ -4205,16 +6799,20 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
}
if(saveChanges === false || !this.isValid()){
this.hide();
+ this.fireEvent('canceledit', this, saveChanges === false);
return;
}
- var changes = {}, r = this.record, hasChange = false;
- var cm = this.grid.colModel, fields = this.items.items;
+ var changes = {},
+ r = this.record,
+ hasChange = false,
+ cm = this.grid.colModel,
+ fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
if(!cm.isHidden(i)){
var dindex = cm.getDataIndex(i);
if(!Ext.isEmpty(dindex)){
- var oldValue = r.data[dindex];
- var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
+ var oldValue = r.data[dindex],
+ value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
if(String(oldValue) !== String(value)){
changes[dindex] = value;
hasChange = true;
@@ -4224,11 +6822,9 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
}
if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
r.beginEdit();
- for(var k in changes){
- if(changes.hasOwnProperty(k)){
- r.set(k, changes[k]);
- }
- }
+ Ext.iterate(changes, function(name, value){
+ r.set(name, value);
+ });
r.endEdit();
this.fireEvent('afteredit', this, changes, r, this.rowIndex);
}
@@ -4238,14 +6834,11 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
verifyLayout: function(force){
if(this.el && (this.isVisible() || force === true)){
var row = this.grid.getView().getRow(this.rowIndex);
- this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined);
+ this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9);
var cm = this.grid.colModel, fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
if(!cm.isHidden(i)){
var adjust = 0;
- if(i === 0){
- adjust += 0; // outer padding
- }
if(i === (len - 1)){
adjust += 3; // outer padding
} else{
@@ -4270,8 +6863,8 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
this.removeAll(false);
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var c = cm.getColumnAt(i);
- var ed = c.getEditor();
+ var c = cm.getColumnAt(i),
+ ed = c.getEditor();
if(!ed){
ed = c.displayEditor || new Ext.form.DisplayField();
}
@@ -4347,12 +6940,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
ref: 'saveBtn',
itemId: 'saveBtn',
xtype: 'button',
- text: this.saveText || 'Save',
+ text: this.saveText,
width: this.minButtonWidth,
handler: this.stopEditing.createDelegate(this, [true])
}, {
xtype: 'button',
- text: this.cancelText || 'Cancel',
+ text: this.cancelText,
width: this.minButtonWidth,
handler: this.stopEditing.createDelegate(this, [false])
}]
@@ -4383,11 +6976,13 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
positionButtons: function(){
if(this.btns){
- var h = this.el.dom.clientHeight;
- var view = this.grid.getView();
- var scroll = view.scroller.dom.scrollLeft;
- var width = view.mainBody.getWidth();
- var bw = this.btns.getWidth();
+ var g = this.grid,
+ h = this.el.dom.clientHeight,
+ view = g.getView(),
+ scroll = view.scroller.dom.scrollLeft,
+ bw = this.btns.getWidth(),
+ width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
+
this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
}
},
@@ -4405,13 +7000,14 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
doFocus: function(pt){
if(this.isVisible()){
- var index = 0;
+ var index = 0,
+ cm = this.grid.getColumnModel(),
+ c;
if(pt){
index = this.getTargetColumnIndex(pt);
}
- var cm = this.grid.getColumnModel();
for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
- var c = cm.getColumnAt(i);
+ c = cm.getColumnAt(i);
if(!c.hidden && c.getEditor()){
c.getEditor().focus();
break;
@@ -4421,10 +7017,12 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
},
getTargetColumnIndex: function(pt){
- var grid = this.grid, v = grid.view;
- var x = pt.left;
- var cms = grid.colModel.config;
- var i = 0, match = false;
+ var grid = this.grid,
+ v = grid.view,
+ x = pt.left,
+ cms = grid.colModel.config,
+ i = 0,
+ match = false;
for(var len = cms.length, c; c = cms[i]; i++){
if(!c.hidden){
if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
@@ -4485,28 +7083,37 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
maxWidth: 600,
cls: 'errorTip',
width: 300,
- title: 'Errors',
+ title: this.errorText,
autoHide: false,
anchor: 'left',
anchorToTarget: true,
mouseOffset: [40,0]
});
}
- t.initTarget(this.items.last().getEl());
- if(!t.rendered){
+ var v = this.grid.getView(),
+ top = parseInt(this.el.dom.style.top, 10),
+ scroll = v.scroller.dom.scrollTop,
+ h = this.el.getHeight();
+
+ if(top + h >= scroll){
+ t.initTarget(this.items.last().getEl());
+ if(!t.rendered){
+ t.show();
+ t.hide();
+ }
+ t.body.update(msg);
+ t.doAutoWidth(20);
t.show();
+ }else if(t.rendered){
t.hide();
}
- t.body.update(msg);
- t.doAutoWidth();
- t.show();
},
getErrorText: function(){
var data = [''];
this.items.each(function(f){
if(!f.isValid(true)){
- data.push('- ', f.activeError, '
');
+ data.push('- ', f.getActiveError(), '
');
}
});
data.push('
');
@@ -4514,46 +7121,6 @@ Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
}
});
Ext.preg('roweditor', Ext.ux.grid.RowEditor);
-
-Ext.override(Ext.form.Field, {
- markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- msg = msg || this.invalidText;
-
- var mt = this.getMessageHandler();
- if(mt){
- mt.mark(this, msg);
- }else if(this.msgTarget){
- this.el.addClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
- }
- }
- this.activeError = msg;
- this.fireEvent('invalid', this, msg);
- }
-});
-
-Ext.override(Ext.ToolTip, {
- doAutoWidth : function(){
- var bw = this.body.getTextWidth();
- if(this.title){
- bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
- }
- bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + 20;
- this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
-
- // IE7 repaint bug on initial show
- if(Ext.isIE7 && !this.repainted){
- this.el.repaint();
- this.repainted = true;
- }
- }
-});
Ext.ns('Ext.ux.grid');
/**
@@ -4687,10 +7254,19 @@ Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
// @private
onDestroy: function() {
- this.keyNav.disable();
- delete this.keyNav;
+ if(this.keyNav){
+ this.keyNav.disable();
+ delete this.keyNav;
+ }
+ /*
+ * A majority of the time, the plugin will be destroyed along with the grid,
+ * which means the mainBody won't be available. On the off chance that the plugin
+ * isn't destroyed with the grid, take care of removing the listener.
+ */
var mainBody = this.grid.getView().mainBody;
- mainBody.un('mousedown', this.onMouseDown, this);
+ if(mainBody){
+ mainBody.un('mousedown', this.onMouseDown, this);
+ }
},
// @private
onRowDblClick: function(grid, rowIdx, e) {
@@ -4862,13 +7438,13 @@ Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
}
this.renderAll(ct, this.innerCt);
- var size = target.getViewSize();
+ var size = target.getViewSize(true);
if(size.width < 1 && size.height < 1){ // display none?
return;
}
- var h = size.height - target.getPadding('tb'),
+ var h = size.height,
ph = h;
this.innerCt.setSize({height:h});
@@ -5031,6 +7607,7 @@ Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
this.store.on('load', this.calcRowsPerPage, this);
Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
if( this.mode == 'local' ) {
+ this.initList();
this.calcRowsPerPage();
}
},
@@ -5046,9 +7623,9 @@ Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
}
},
- render : function(ct) {
- Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);
- if( Ext.isSafari ) {
+ afterRender : function() {
+ Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
+ if(Ext.isWebKit) {
this.el.swallowEvent('mousedown', true);
}
this.el.unselectable();
@@ -5123,9 +7700,9 @@ Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
},
focusAndSelect : function(record) {
- var index = typeof record === 'number' ? record : this.store.indexOf(record);
- this.select(index, this.isExpanded());
- this.onSelect(this.store.getAt(record), index, this.isExpanded());
+ var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
+ this.select(index, this.isExpanded());
+ this.onSelect(this.store.getAt(index), index, this.isExpanded());
},
calcRowsPerPage : function() {
@@ -5209,6 +7786,7 @@ Ext.ux.SlidingPager = Ext.extend(Object, {
* @xtype spinnerfield
*/
Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
+ actionMode: 'wrap',
deferHeight: true,
autoSize: Ext.emptyFn,
onBlur: Ext.emptyFn,
@@ -5228,17 +7806,6 @@ Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
},
- onShow: function(){
- if (this.wrap) {
- this.wrap.dom.style.display = '';
- this.wrap.dom.style.visibility = 'visible';
- }
- },
-
- onHide: function(){
- this.wrap.dom.style.display = 'none';
- },
-
// private
getResizeEl: function(){
return this.wrap;
@@ -5363,7 +7930,7 @@ Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
doResize: function(w, h){
if (typeof w == 'number') {
- this.el.setWidth(this.field.adjustWidth('input', w - this.trigger.getWidth()));
+ this.el.setWidth(w - this.trigger.getWidth());
}
this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
},
@@ -5835,7 +8402,430 @@ Ext.ux.Spotlight.prototype = {
};
//backwards compat
-Ext.Spotlight = Ext.ux.Spotlight;/**
+Ext.Spotlight = Ext.ux.Spotlight;/**
+ * @class Ext.ux.StatusBar
+ * Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to
+ * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
+ * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
+ * status text and icon. You can also indicate that something is processing using the {@link #showBusy} method.
+ *
+new Ext.Panel({
+ title: 'StatusBar',
+ // etc.
+ bbar: new Ext.ux.StatusBar({
+ id: 'my-status',
+
+ // defaults to use when the status is cleared:
+ defaultText: 'Default status text',
+ defaultIconCls: 'default-icon',
+
+ // values to set initially:
+ text: 'Ready',
+ iconCls: 'ready-icon',
+
+ // any standard Toolbar items:
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+// Update the status bar later in code:
+var sb = Ext.getCmp('my-status');
+sb.setStatus({
+ text: 'OK',
+ iconCls: 'ok-icon',
+ clear: true // auto-clear after a set interval
+});
+
+// Set the status bar to show that something is processing:
+sb.showBusy();
+
+// processing....
+
+sb.clearStatus(); // once completeed
+
+ * @extends Ext.Toolbar
+ * @constructor
+ * Creates a new StatusBar
+ * @param {Object/Array} config A config object
+ */
+Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
+ /**
+ * @cfg {String} statusAlign
+ * The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
+ * it creates an internal div containing the status text and icon. Any additional Toolbar items added in the
+ * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
+ * rendered, in added order, to the opposite side. The status element is greedy, so it will automatically
+ * expand to take up all sapce left over by any other items. Example usage:
+ *
+// Create a left-aligned status bar containing a button,
+// separator and text item that will be right-aligned (default):
+new Ext.Panel({
+ title: 'StatusBar',
+ // etc.
+ bbar: new Ext.ux.StatusBar({
+ defaultText: 'Default status text',
+ id: 'status-id',
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+// By adding the statusAlign config, this will create the
+// exact same toolbar, except the status and toolbar item
+// layout will be reversed from the previous example:
+new Ext.Panel({
+ title: 'StatusBar',
+ // etc.
+ bbar: new Ext.ux.StatusBar({
+ defaultText: 'Default status text',
+ id: 'status-id',
+ statusAlign: 'right',
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text']
+ })
+});
+
+ */
+ /**
+ * @cfg {String} defaultText
+ * The default {@link #text} value. This will be used anytime the status bar is cleared with the
+ * useDefaults:true option (defaults to '').
+ */
+ /**
+ * @cfg {String} defaultIconCls
+ * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
+ * This will be used anytime the status bar is cleared with the useDefaults:true option (defaults to '').
+ */
+ /**
+ * @cfg {String} text
+ * A string that will be initially set as the status message. This string
+ * will be set as innerHTML (html tags are accepted) for the toolbar item.
+ * If not specified, the value set for {@link #defaultText}
+ * will be used.
+ */
+ /**
+ * @cfg {String} iconCls
+ * A CSS class that will be initially set as the status bar icon and is
+ * expected to provide a background image (defaults to '').
+ * Example usage:
+// Example CSS rule:
+.x-statusbar .x-status-custom {
+ padding-left: 25px;
+ background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
+}
+
+// Setting a default icon:
+var sb = new Ext.ux.StatusBar({
+ defaultIconCls: 'x-status-custom'
+});
+
+// Changing the icon:
+sb.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom'
+});
+
+ */
+
+ /**
+ * @cfg {String} cls
+ * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
+ */
+ cls : 'x-statusbar',
+ /**
+ * @cfg {String} busyIconCls
+ * The default {@link #iconCls} applied when calling
+ * {@link #showBusy} (defaults to 'x-status-busy').
+ * It can be overridden at any time by passing the iconCls
+ * argument into {@link #showBusy}.
+ */
+ busyIconCls : 'x-status-busy',
+ /**
+ * @cfg {String} busyText
+ * The default {@link #text} applied when calling
+ * {@link #showBusy} (defaults to 'Loading...').
+ * It can be overridden at any time by passing the text
+ * argument into {@link #showBusy}.
+ */
+ busyText : 'Loading...',
+ /**
+ * @cfg {Number} autoClear
+ * The number of milliseconds to wait after setting the status via
+ * {@link #setStatus} before automatically clearing the status
+ * text and icon (defaults to 5000). Note that this only applies
+ * when passing the clear argument to {@link #setStatus}
+ * since that is the only way to defer clearing the status. This can
+ * be overridden by specifying a different wait value in
+ * {@link #setStatus}. Calls to {@link #clearStatus}
+ * always clear the status bar immediately and ignore this value.
+ */
+ autoClear : 5000,
+
+ /**
+ * @cfg {String} emptyText
+ * The text string to use if no text has been set. Defaults to
+ * ' '). If there are no other items in the toolbar using
+ * an empty string ('') for this value would end up in the toolbar
+ * height collapsing since the empty string will not maintain the toolbar
+ * height. Use '' if the toolbar should collapse in height
+ * vertically when no text is specified and there are no other items in
+ * the toolbar.
+ */
+ emptyText : ' ',
+
+ // private
+ activeThreadId : 0,
+
+ // private
+ initComponent : function(){
+ if(this.statusAlign=='right'){
+ this.cls += ' x-status-right';
+ }
+ Ext.ux.StatusBar.superclass.initComponent.call(this);
+ },
+
+ // private
+ afterRender : function(){
+ Ext.ux.StatusBar.superclass.afterRender.call(this);
+
+ var right = this.statusAlign == 'right';
+ this.currIconCls = this.iconCls || this.defaultIconCls;
+ this.statusEl = new Ext.Toolbar.TextItem({
+ cls: 'x-status-text ' + (this.currIconCls || ''),
+ text: this.text || this.defaultText || ''
+ });
+
+ if(right){
+ this.add('->');
+ this.add(this.statusEl);
+ }else{
+ this.insert(0, this.statusEl);
+ this.insert(1, '->');
+ }
+
+// this.statusEl = td.createChild({
+// cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
+// html: this.text || this.defaultText || ''
+// });
+// this.statusEl.unselectable();
+
+// this.spacerEl = td.insertSibling({
+// tag: 'td',
+// style: 'width:100%',
+// cn: [{cls:'ytb-spacer'}]
+// }, right ? 'before' : 'after');
+ },
+
+ /**
+ * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
+ * status that was set after a specified interval.
+ * @param {Object/String} config A config object specifying what status to set, or a string assumed
+ * to be the status text (and all other options are defaulted as explained below). A config
+ * object containing any or all of the following properties can be passed:
+ * - text {String} : (optional) The status text to display. If not specified, any current
+ * status text will remain unchanged.
+ * - iconCls {String} : (optional) The CSS class used to customize the status icon (see
+ * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.
+ * - clear {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
+ * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
+ * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
+ * {@link #clearStatus}. If true is passed, the status will be cleared using {@link #autoClear},
+ * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
+ * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
+ * All other options will be defaulted as with the boolean option. To customize any other options,
+ * you can pass an object in the format:
+ * - wait {Number} : (optional) The number of milliseconds to wait before clearing
+ * (defaults to {@link #autoClear}).
+ * - anim {Number} : (optional) False to clear the status immediately once the callback
+ * executes (defaults to true which fades the status out).
+ * - useDefaults {Number} : (optional) False to completely clear the status text and iconCls
+ * (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).
+ *
+ * Example usage:
+// Simple call to update the text
+statusBar.setStatus('New status');
+
+// Set the status and icon, auto-clearing with default options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: true
+});
+
+// Auto-clear with custom options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: {
+ wait: 8000,
+ anim: false,
+ useDefaults: false
+ }
+});
+
+ * @return {Ext.ux.StatusBar} this
+ */
+ setStatus : function(o){
+ o = o || {};
+
+ if(typeof o == 'string'){
+ o = {text:o};
+ }
+ if(o.text !== undefined){
+ this.setText(o.text);
+ }
+ if(o.iconCls !== undefined){
+ this.setIcon(o.iconCls);
+ }
+
+ if(o.clear){
+ var c = o.clear,
+ wait = this.autoClear,
+ defaults = {useDefaults: true, anim: true};
+
+ if(typeof c == 'object'){
+ c = Ext.applyIf(c, defaults);
+ if(c.wait){
+ wait = c.wait;
+ }
+ }else if(typeof c == 'number'){
+ wait = c;
+ c = defaults;
+ }else if(typeof c == 'boolean'){
+ c = defaults;
+ }
+
+ c.threadId = this.activeThreadId;
+ this.clearStatus.defer(wait, this, [c]);
+ }
+ return this;
+ },
+
+ /**
+ * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
+ * @param {Object} config (optional) A config object containing any or all of the following properties. If this
+ * object is not specified the status will be cleared using the defaults below:
+ * - anim {Boolean} : (optional) True to clear the status by fading out the status element (defaults
+ * to false which clears immediately).
+ * - useDefaults {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
+ * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).
+ *
+ * @return {Ext.ux.StatusBar} this
+ */
+ clearStatus : function(o){
+ o = o || {};
+
+ if(o.threadId && o.threadId !== this.activeThreadId){
+ // this means the current call was made internally, but a newer
+ // thread has set a message since this call was deferred. Since
+ // we don't want to overwrite a newer message just ignore.
+ return this;
+ }
+
+ var text = o.useDefaults ? this.defaultText : this.emptyText,
+ iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
+
+ if(o.anim){
+ // animate the statusEl Ext.Element
+ this.statusEl.el.fadeOut({
+ remove: false,
+ useDisplay: true,
+ scope: this,
+ callback: function(){
+ this.setStatus({
+ text: text,
+ iconCls: iconCls
+ });
+
+ this.statusEl.el.show();
+ }
+ });
+ }else{
+ // hide/show the el to avoid jumpy text or icon
+ this.statusEl.hide();
+ this.setStatus({
+ text: text,
+ iconCls: iconCls
+ });
+ this.statusEl.show();
+ }
+ return this;
+ },
+
+ /**
+ * Convenience method for setting the status text directly. For more flexible options see {@link #setStatus}.
+ * @param {String} text (optional) The text to set (defaults to '')
+ * @return {Ext.ux.StatusBar} this
+ */
+ setText : function(text){
+ this.activeThreadId++;
+ this.text = text || '';
+ if(this.rendered){
+ this.statusEl.setText(this.text);
+ }
+ return this;
+ },
+
+ /**
+ * Returns the current status text.
+ * @return {String} The status text
+ */
+ getText : function(){
+ return this.text;
+ },
+
+ /**
+ * Convenience method for setting the status icon directly. For more flexible options see {@link #setStatus}.
+ * See {@link #iconCls} for complete details about customizing the icon.
+ * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
+ * @return {Ext.ux.StatusBar} this
+ */
+ setIcon : function(cls){
+ this.activeThreadId++;
+ cls = cls || '';
+
+ if(this.rendered){
+ if(this.currIconCls){
+ this.statusEl.removeClass(this.currIconCls);
+ this.currIconCls = null;
+ }
+ if(cls.length > 0){
+ this.statusEl.addClass(cls);
+ this.currIconCls = cls;
+ }
+ }else{
+ this.currIconCls = cls;
+ }
+ return this;
+ },
+
+ /**
+ * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
+ * a "busy" state, usually for loading or processing activities.
+ * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
+ * string to use as the status text (in which case all other options for setStatus will be defaulted). Use the
+ * text and/or iconCls properties on the config to override the default {@link #busyText}
+ * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
+ * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
+ * @return {Ext.ux.StatusBar} this
+ */
+ showBusy : function(o){
+ if(typeof o == 'string'){
+ o = {text:o};
+ }
+ o = Ext.applyIf(o || {}, {
+ text: this.busyText,
+ iconCls: this.busyIconCls
+ });
+ return this.setStatus(o);
+ }
+});
+Ext.reg('statusbar', Ext.ux.StatusBar);
+/**
* @class Ext.ux.TabCloseMenu
* @extends Object
* Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.
@@ -5968,18 +8958,35 @@ Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
//backwards compat
Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
-
-
+Ext.ns('Ext.ux');
+/**
+ * @class Ext.ux.TabScrollerMenu
+ * @extends Object
+ * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
+ * @constructor
+ * @param {Object} config Configuration options
+ * @ptype tabscrollermenu
+ */
Ext.ux.TabScrollerMenu = Ext.extend(Object, {
+ /**
+ * @cfg {Number} pageSize How many items to allow per submenu.
+ */
pageSize : 10,
+ /**
+ * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
+ */
maxText : 15,
+ /**
+ * @cfg {String} menuPrefixText Text to prefix the submenus.
+ */
menuPrefixText : 'Items',
constructor : function(config) {
config = config || {};
Ext.apply(this, config);
},
+ //private
init : function(tabPanel) {
- Ext.apply(tabPanel, this.tabPanelMethods);
+ Ext.apply(tabPanel, this.parentOverrides);
tabPanel.tabScrollerMenu = this;
var thisRef = this;
@@ -6027,45 +9034,66 @@ Ext.ux.TabScrollerMenu = Ext.extend(Object, {
});
},
- // public
+ /**
+ * Returns an the current page size (this.pageSize);
+ * @return {Number} this.pageSize The current page size.
+ */
getPageSize : function() {
return this.pageSize;
},
- // public
- setPageSize : function(pageSize) {
+ /**
+ * Sets the number of menu items per submenu "page size".
+ * @param {Number} pageSize The page size
+ */
+ setPageSize : function(pageSize) {
this.pageSize = pageSize;
},
- // public
- getMaxText : function() {
+ /**
+ * Returns the current maxText length;
+ * @return {Number} this.maxText The current max text length.
+ */
+ getMaxText : function() {
return this.maxText;
},
- // public
- setMaxText : function(t) {
+ /**
+ * Sets the maximum text size for each menu item.
+ * @param {Number} t The max text per each menu item.
+ */
+ setMaxText : function(t) {
this.maxText = t;
},
+ /**
+ * Returns the current menu prefix text String.;
+ * @return {String} this.menuPrefixText The current menu prefix text.
+ */
getMenuPrefixText : function() {
return this.menuPrefixText;
},
+ /**
+ * Sets the menu prefix text String.
+ * @param {String} t The menu prefix text.
+ */
setMenuPrefixText : function(t) {
this.menuPrefixText = t;
},
// private && applied to the tab panel itself.
- tabPanelMethods : {
+ parentOverrides : {
// all execute within the scope of the tab panel
// private
showTabsMenu : function(e) {
- if (! this.tabsMenu) {
- this.tabsMenu = new Ext.menu.Menu();
- this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
+ if (this.tabsMenu) {
+ this.tabsMenu.destroy();
+ this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
+ this.tabsMenu = null;
}
-
- this.tabsMenu.removeAll();
-
- this.generateTabMenuItems();
-
- var target = Ext.get(e.getTarget());
+ this.tabsMenu = new Ext.menu.Menu();
+ this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);
+
+ this.generateTabMenuItems();
+
+ var target = Ext.get(e.getTarget());
var xy = target.getXY();
-
+//
//Y param + 24 pixels
xy[1] += 24;
@@ -6109,12 +9137,10 @@ Ext.ux.TabScrollerMenu = Ext.extend(Object, {
menuItems.push(this.autoGenMenuItem(item));
}
-
this.tabsMenu.add({
text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
menu : menuItems
});
-
}
}
@@ -6124,7 +9150,7 @@ Ext.ux.TabScrollerMenu = Ext.extend(Object, {
menuItems.push(this.autoGenMenuItem(item));
}
}, this);
- }
+ }
},
// private
autoGenMenuItem : function(item) {
@@ -6147,105 +9173,1066 @@ Ext.ux.TabScrollerMenu = Ext.extend(Object, {
}
}
});
-Ext.ns('Ext.ux.tree');
+
+Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);
+Ext.ns('Ext.ux.tree');
+
+/**
+ * @class Ext.ux.tree.XmlTreeLoader
+ * @extends Ext.tree.TreeLoader
+ * A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
+ * Any text value included as a text node in the XML will be added to the parent node as an attribute
+ * called innerText. Also, the tag name of each XML node will be added to the tree node as
+ * an attribute called tagName.
+ * By default, this class expects that your source XML will provide the necessary attributes on each
+ * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
+ * provide your own custom processing of node attributes by overriding the {@link #processNode} method
+ * and modifying the attributes as needed before they are used to create the associated TreeNode.
+ * @constructor
+ * Creates a new XmlTreeloader.
+ * @param {Object} config A config object containing config properties.
+ */
+Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
+ /**
+ * @property XML_NODE_ELEMENT
+ * XML element node (value 1, read-only)
+ * @type Number
+ */
+ XML_NODE_ELEMENT : 1,
+ /**
+ * @property XML_NODE_TEXT
+ * XML text node (value 3, read-only)
+ * @type Number
+ */
+ XML_NODE_TEXT : 3,
+
+ // private override
+ processResponse : function(response, node, callback){
+ var xmlData = response.responseXML;
+ var root = xmlData.documentElement || xmlData;
+
+ try{
+ node.beginUpdate();
+ node.appendChild(this.parseXml(root));
+ node.endUpdate();
+
+ if(typeof callback == "function"){
+ callback(this, node);
+ }
+ }catch(e){
+ this.handleFailure(response);
+ }
+ },
+
+ // private
+ parseXml : function(node) {
+ var nodes = [];
+ Ext.each(node.childNodes, function(n){
+ if(n.nodeType == this.XML_NODE_ELEMENT){
+ var treeNode = this.createNode(n);
+ if(n.childNodes.length > 0){
+ var child = this.parseXml(n);
+ if(typeof child == 'string'){
+ treeNode.attributes.innerText = child;
+ }else{
+ treeNode.appendChild(child);
+ }
+ }
+ nodes.push(treeNode);
+ }
+ else if(n.nodeType == this.XML_NODE_TEXT){
+ var text = n.nodeValue.trim();
+ if(text.length > 0){
+ return nodes = text;
+ }
+ }
+ }, this);
+
+ return nodes;
+ },
+
+ // private override
+ createNode : function(node){
+ var attr = {
+ tagName: node.tagName
+ };
+
+ Ext.each(node.attributes, function(a){
+ attr[a.nodeName] = a.nodeValue;
+ });
+
+ this.processAttributes(attr);
+
+ return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
+ },
+
+ /*
+ * Template method intended to be overridden by subclasses that need to provide
+ * custom attribute processing prior to the creation of each TreeNode. This method
+ * will be passed a config object containing existing TreeNode attribute name/value
+ * pairs which can be modified as needed directly (no need to return the object).
+ */
+ processAttributes: Ext.emptyFn
+});
+
+//backwards compat
+Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
+/**
+ * @class Ext.ux.ValidationStatus
+ * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
+ * associated form contains validation errors.
+ * @extends Ext.Component
+ * @constructor
+ * Creates a new ValiationStatus plugin
+ * @param {Object} config A config object
+ */
+Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
+ /**
+ * @cfg {String} errorIconCls
+ * The {@link #iconCls} value to be applied to the status message when there is a
+ * validation error. Defaults to 'x-status-error'.
+ */
+ errorIconCls : 'x-status-error',
+ /**
+ * @cfg {String} errorListCls
+ * The css class to be used for the error list when there are validation errors.
+ * Defaults to 'x-status-error-list'.
+ */
+ errorListCls : 'x-status-error-list',
+ /**
+ * @cfg {String} validIconCls
+ * The {@link #iconCls} value to be applied to the status message when the form
+ * validates. Defaults to 'x-status-valid'.
+ */
+ validIconCls : 'x-status-valid',
+
+ /**
+ * @cfg {String} showText
+ * The {@link #text} value to be applied when there is a form validation error.
+ * Defaults to 'The form has errors (click for details...)'.
+ */
+ showText : 'The form has errors (click for details...)',
+ /**
+ * @cfg {String} showText
+ * The {@link #text} value to display when the error list is displayed.
+ * Defaults to 'Click again to hide the error list'.
+ */
+ hideText : 'Click again to hide the error list',
+ /**
+ * @cfg {String} submitText
+ * The {@link #text} value to be applied when the form is being submitted.
+ * Defaults to 'Saving...'.
+ */
+ submitText : 'Saving...',
+
+ // private
+ init : function(sb){
+ sb.on('render', function(){
+ this.statusBar = sb;
+ this.monitor = true;
+ this.errors = new Ext.util.MixedCollection();
+ this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
+
+ if(this.form){
+ this.form = Ext.getCmp(this.form).getForm();
+ this.startMonitoring();
+ this.form.on('beforeaction', function(f, action){
+ if(action.type == 'submit'){
+ // Ignore monitoring while submitting otherwise the field validation
+ // events cause the status message to reset too early
+ this.monitor = false;
+ }
+ }, this);
+ var startMonitor = function(){
+ this.monitor = true;
+ };
+ this.form.on('actioncomplete', startMonitor, this);
+ this.form.on('actionfailed', startMonitor, this);
+ }
+ }, this, {single:true});
+ sb.on({
+ scope: this,
+ afterlayout:{
+ single: true,
+ fn: function(){
+ // Grab the statusEl after the first layout.
+ sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
+ }
+ },
+ beforedestroy:{
+ single: true,
+ fn: this.onDestroy
+ }
+ });
+ },
+
+ // private
+ startMonitoring : function(){
+ this.form.items.each(function(f){
+ f.on('invalid', this.onFieldValidation, this);
+ f.on('valid', this.onFieldValidation, this);
+ }, this);
+ },
+
+ // private
+ stopMonitoring : function(){
+ this.form.items.each(function(f){
+ f.un('invalid', this.onFieldValidation, this);
+ f.un('valid', this.onFieldValidation, this);
+ }, this);
+ },
+
+ // private
+ onDestroy : function(){
+ this.stopMonitoring();
+ this.statusBar.statusEl.un('click', this.onStatusClick, this);
+ Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
+ },
+
+ // private
+ onFieldValidation : function(f, msg){
+ if(!this.monitor){
+ return false;
+ }
+ if(msg){
+ this.errors.add(f.id, {field:f, msg:msg});
+ }else{
+ this.errors.removeKey(f.id);
+ }
+ this.updateErrorList();
+ if(this.errors.getCount() > 0){
+ if(this.statusBar.getText() != this.showText){
+ this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
+ }
+ }else{
+ this.statusBar.clearStatus().setIcon(this.validIconCls);
+ }
+ },
+
+ // private
+ updateErrorList : function(){
+ if(this.errors.getCount() > 0){
+ var msg = '';
+ this.errors.each(function(err){
+ msg += ('- ' + err.msg + '
');
+ }, this);
+ this.getMsgEl().update(msg+'
');
+ }else{
+ this.getMsgEl().update('');
+ }
+ },
+
+ // private
+ getMsgEl : function(){
+ if(!this.msgEl){
+ this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
+ cls: this.errorListCls+' x-hide-offsets'
+ }, true);
+
+ this.msgEl.on('click', function(e){
+ var t = e.getTarget('li', 10, true);
+ if(t){
+ Ext.getCmp(t.id.split('x-err-')[1]).focus();
+ this.hideErrors();
+ }
+ }, this, {stopEvent:true}); // prevent anchor click navigation
+ }
+ return this.msgEl;
+ },
+
+ // private
+ showErrors : function(){
+ this.updateErrorList();
+ this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
+ this.statusBar.setText(this.hideText);
+ this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
+ },
+
+ // private
+ hideErrors : function(){
+ var el = this.getMsgEl();
+ if(el.isVisible()){
+ el.slideOut('b', {duration:0.2, easing:'easeIn'});
+ this.statusBar.setText(this.showText);
+ }
+ this.form.getEl().un('click', this.hideErrors, this);
+ },
+
+ // private
+ onStatusClick : function(){
+ if(this.getMsgEl().isVisible()){
+ this.hideErrors();
+ }else if(this.errors.getCount() > 0){
+ this.showErrors();
+ }
+ }
+});(function() {
+ Ext.override(Ext.list.Column, {
+ init : function() {
+ if(!this.type){
+ this.type = "auto";
+ }
+
+ var st = Ext.data.SortTypes;
+ // named sortTypes are supported, here we look them up
+ if(typeof this.sortType == "string"){
+ this.sortType = st[this.sortType];
+ }
+
+ // set default sortType for strings and dates
+ if(!this.sortType){
+ switch(this.type){
+ case "string":
+ this.sortType = st.asUCString;
+ break;
+ case "date":
+ this.sortType = st.asDate;
+ break;
+ default:
+ this.sortType = st.none;
+ }
+ }
+ }
+ });
+
+ Ext.tree.Column = Ext.extend(Ext.list.Column, {});
+ Ext.tree.NumberColumn = Ext.extend(Ext.list.NumberColumn, {});
+ Ext.tree.DateColumn = Ext.extend(Ext.list.DateColumn, {});
+ Ext.tree.BooleanColumn = Ext.extend(Ext.list.BooleanColumn, {});
+
+ Ext.reg('tgcolumn', Ext.tree.Column);
+ Ext.reg('tgnumbercolumn', Ext.tree.NumberColumn);
+ Ext.reg('tgdatecolumn', Ext.tree.DateColumn);
+ Ext.reg('tgbooleancolumn', Ext.tree.BooleanColumn);
+})();
+/**
+ * @class Ext.ux.tree.TreeGridNodeUI
+ * @extends Ext.tree.TreeNodeUI
+ */
+Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
+ isTreeGridNodeUI: true,
+
+ renderElements : function(n, a, targetNode, bulkRender){
+ var t = n.getOwnerTree(),
+ cols = t.columns,
+ c = cols[0],
+ i, buf, len;
+
+ this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+
+ buf = [
+ '',
+ '',
+ '',
+ '', this.indentMarkup, "",
+ '
',
+ '
',
+ '',
+ '', (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text), '',
+ ' '
+ ];
+
+ for(i = 1, len = cols.length; i < len; i++){
+ c = cols[i];
+ buf.push(
+ '',
+ '',
+ (c.tpl ? c.tpl.apply(a) : a[c.dataIndex]),
+ '',
+ ' '
+ );
+ }
+
+ buf.push(
+ ' ',
+ ' A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
- * Any text value included as a text node in the XML will be added to the parent node as an attribute
- * called innerText. Also, the tag name of each XML node will be added to the tree node as
- * an attribute called tagName.
- * By default, this class expects that your source XML will provide the necessary attributes on each
- * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
- * provide your own custom processing of node attributes by overriding the {@link #processNode} method
- * and modifying the attributes as needed before they are used to create the associated TreeNode.
- * @constructor
- * Creates a new XmlTreeloader.
- * @param {Object} config A config object containing config properties.
+ * @class Ext.ux.tree.TreeGridSorter
+ * @extends Ext.tree.TreeSorter
*/
-Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
+Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
/**
- * @property XML_NODE_ELEMENT
- * XML element node (value 1, read-only)
- * @type Number
+ * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to ['sort-asc', 'sort-desc'])
*/
- XML_NODE_ELEMENT : 1,
+ sortClasses : ['sort-asc', 'sort-desc'],
/**
- * @property XML_NODE_TEXT
- * XML text node (value 3, read-only)
- * @type Number
+ * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to 'Sort Ascending')
*/
- XML_NODE_TEXT : 3,
+ sortAscText : 'Sort Ascending',
+ /**
+ * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to 'Sort Descending')
+ */
+ sortDescText : 'Sort Descending',
- // private override
- processResponse : function(response, node, callback){
- var xmlData = response.responseXML;
- var root = xmlData.documentElement || xmlData;
+ constructor : function(tree, config) {
+ if(!Ext.isObject(config)) {
+ config = {
+ property: tree.columns[0].dataIndex || 'text',
+ folderSort: true
+ }
+ }
- try{
- node.beginUpdate();
- node.appendChild(this.parseXml(root));
- node.endUpdate();
+ Ext.ux.tree.TreeGridSorter.superclass.constructor.apply(this, arguments);
- if(typeof callback == "function"){
- callback(this, node);
+ this.tree = tree;
+ tree.on('headerclick', this.onHeaderClick, this);
+ tree.ddAppendOnly = true;
+
+ me = this;
+ this.defaultSortFn = function(n1, n2){
+
+ var dsc = me.dir && me.dir.toLowerCase() == 'desc';
+ var p = me.property || 'text';
+ var sortType = me.sortType;
+ var fs = me.folderSort;
+ var cs = me.caseSensitive === true;
+ var leafAttr = me.leafAttr || 'leaf';
+
+ if(fs){
+ if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){
+ return 1;
+ }
+ if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){
+ return -1;
+ }
}
- }catch(e){
- this.handleFailure(response);
+ var v1 = sortType ? sortType(n1.attributes[p]) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase());
+ var v2 = sortType ? sortType(n2.attributes[p]) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase());
+ if(v1 < v2){
+ return dsc ? +1 : -1;
+ }else if(v1 > v2){
+ return dsc ? -1 : +1;
+ }else{
+ return 0;
+ }
+ };
+
+ tree.on('afterrender', this.onAfterTreeRender, this, {single: true});
+ tree.on('headermenuclick', this.onHeaderMenuClick, this);
+ },
+
+ onAfterTreeRender : function() {
+ var hmenu = this.tree.hmenu;
+ hmenu.insert(0,
+ {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
+ {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
+ );
+ this.updateSortIcon(0, 'asc');
+ },
+
+ onHeaderMenuClick : function(c, id, index) {
+ if(id === 'asc' || id === 'desc') {
+ this.onHeaderClick(c, null, index);
+ return false;
+ }
+ },
+
+ onHeaderClick : function(c, el, i) {
+ if(c && !this.tree.headersDisabled){
+ var me = this;
+
+ me.property = c.dataIndex;
+ me.dir = c.dir = (c.dir === 'desc' ? 'asc' : 'desc');
+ me.sortType = c.sortType;
+ me.caseSensitive === Ext.isBoolean(c.caseSensitive) ? c.caseSensitive : this.caseSensitive;
+ me.sortFn = c.sortFn || this.defaultSortFn;
+
+ this.tree.root.cascade(function(n) {
+ if(!n.isLeaf()) {
+ me.updateSort(me.tree, n);
+ }
+ });
+
+ this.updateSortIcon(i, c.dir);
}
},
// private
- parseXml : function(node) {
- var nodes = [];
- Ext.each(node.childNodes, function(n){
- if(n.nodeType == this.XML_NODE_ELEMENT){
- var treeNode = this.createNode(n);
- if(n.childNodes.length > 0){
- var child = this.parseXml(n);
- if(typeof child == 'string'){
- treeNode.attributes.innerText = child;
- }else{
- treeNode.appendChild(child);
- }
+ updateSortIcon : function(col, dir){
+ var sc = this.sortClasses;
+ var hds = this.tree.innerHd.select('td').removeClass(sc);
+ hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]);
+ }
+});/**
+ * @class Ext.ux.tree.TreeGridLoader
+ * @extends Ext.tree.TreeLoader
+ */
+Ext.ux.tree.TreeGridLoader = Ext.extend(Ext.tree.TreeLoader, {
+ createNode : function(attr) {
+ if (!attr.uiProvider) {
+ attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
+ }
+ return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
+ }
+});/**
+ * @class Ext.ux.tree.TreeGrid
+ * @extends Ext.tree.TreePanel
+ *
+ * @xtype treegrid
+ */
+Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
+ rootVisible : false,
+ useArrows : true,
+ lines : false,
+ borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
+ cls : 'x-treegrid',
+
+ columnResize : true,
+ enableSort : true,
+ reserveScrollOffset : true,
+ enableHdMenu : true,
+
+ columnsText : 'Columns',
+
+ initComponent : function() {
+ if(!this.root) {
+ this.root = new Ext.tree.AsyncTreeNode({text: 'Root'});
+ }
+
+ // initialize the loader
+ var l = this.loader;
+ if(!l){
+ l = new Ext.ux.tree.TreeGridLoader({
+ dataUrl: this.dataUrl,
+ requestMethod: this.requestMethod,
+ store: this.store
+ });
+ }else if(Ext.isObject(l) && !l.load){
+ l = new Ext.ux.tree.TreeGridLoader(l);
+ }
+ else if(l) {
+ l.createNode = function(attr) {
+ if (!attr.uiProvider) {
+ attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
}
- nodes.push(treeNode);
+ return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
}
- else if(n.nodeType == this.XML_NODE_TEXT){
- var text = n.nodeValue.trim();
- if(text.length > 0){
- return nodes = text;
- }
+ }
+ this.loader = l;
+
+ Ext.ux.tree.TreeGrid.superclass.initComponent.call(this);
+
+ this.initColumns();
+
+ if(this.enableSort) {
+ this.treeGridSorter = new Ext.ux.tree.TreeGridSorter(this, this.enableSort);
+ }
+
+ if(this.columnResize){
+ this.colResizer = new Ext.tree.ColumnResizer(this.columnResize);
+ this.colResizer.init(this);
+ }
+
+ var c = this.columns;
+ if(!this.internalTpl){
+ this.internalTpl = new Ext.XTemplate(
+ '',
+ '',
+ '',
+ '',
+ '
',
+ ''
+ );
+ }
+
+ if(!this.colgroupTpl) {
+ this.colgroupTpl = new Ext.XTemplate(
+ ' 0 && this.columns[index]) {
+ this.setColumnVisible(index, !item.checked);
+ }
+ }
+
+ return true;
+ },
+
+ setColumnVisible : function(index, visible) {
+ this.columns[index].hidden = !visible;
+ this.updateColumnWidths();
+ },
+
+ /**
+ * Scrolls the grid to the top
*/
- processAttributes: Ext.emptyFn
+ scrollToTop : function(){
+ this.innerBody.dom.scrollTop = 0;
+ this.innerBody.dom.scrollLeft = 0;
+ },
+
+ // private
+ syncScroll : function(){
+ this.syncHeaderScroll();
+ var mb = this.innerBody.dom;
+ this.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
+ },
+
+ // private
+ syncHeaderScroll : function(){
+ var mb = this.innerBody.dom;
+ this.innerHd.dom.scrollLeft = mb.scrollLeft;
+ this.innerHd.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
+ },
+
+ registerNode : function(n) {
+ Ext.ux.tree.TreeGrid.superclass.registerNode.call(this, n);
+ if(!n.uiProvider && !n.isRoot && !n.ui.isTreeGridNodeUI) {
+ n.ui = new Ext.ux.tree.TreeGridNodeUI(n);
+ }
+ }
});
-//backwards compat
-Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
+Ext.reg('treegrid', Ext.ux.tree.TreeGrid);
\ No newline at end of file