-/**\r
- * @class Ext.ux.GMapPanel\r
- * @extends Ext.Panel\r
- * @author Shea Frederick\r
- */\r
-Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {\r
- initComponent : function(){\r
- \r
- var defConfig = {\r
- plain: true,\r
- zoomLevel: 3,\r
- yaw: 180,\r
- pitch: 0,\r
- zoom: 0,\r
- gmapType: 'map',\r
- border: false\r
- };\r
- \r
- Ext.applyIf(this,defConfig);\r
- \r
- Ext.ux.GMapPanel.superclass.initComponent.call(this); \r
-\r
- },\r
- afterRender : function(){\r
- \r
- var wh = this.ownerCt.getSize();\r
- Ext.applyIf(this, wh);\r
- \r
- Ext.ux.GMapPanel.superclass.afterRender.call(this); \r
- \r
- if (this.gmapType === 'map'){\r
- this.gmap = new GMap2(this.body.dom);\r
- }\r
- \r
- if (this.gmapType === 'panorama'){\r
- this.gmap = new GStreetviewPanorama(this.body.dom);\r
- }\r
- \r
- if (typeof this.addControl == 'object' && this.gmapType === 'map') {\r
- this.gmap.addControl(this.addControl);\r
- }\r
- \r
- if (typeof this.setCenter === 'object') {\r
- if (typeof this.setCenter.geoCodeAddr === 'string'){\r
- this.geoCodeLookup(this.setCenter.geoCodeAddr);\r
- }else{\r
- if (this.gmapType === 'map'){\r
- var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);\r
- this.gmap.setCenter(point, this.zoomLevel); \r
- }\r
- if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
- this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);\r
- }\r
- }\r
- if (this.gmapType === 'panorama'){\r
- this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});\r
- }\r
- }\r
-\r
- GEvent.bind(this.gmap, 'load', this, function(){\r
- this.onMapReady();\r
- });\r
-\r
- },\r
- onMapReady : function(){\r
- this.addMarkers(this.markers);\r
- this.addMapControls();\r
- this.addOptions(); \r
- },\r
- onResize : function(w, h){\r
-\r
- if (typeof this.getMap() == 'object') {\r
- this.gmap.checkResize();\r
- }\r
- \r
- Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);\r
-\r
- },\r
- setSize : function(width, height, animate){\r
- \r
- if (typeof this.getMap() == 'object') {\r
- this.gmap.checkResize();\r
- }\r
- \r
- Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);\r
- \r
- },\r
- getMap : function(){\r
- \r
- return this.gmap;\r
- \r
- },\r
- getCenter : function(){\r
- \r
- return this.getMap().getCenter();\r
- \r
- },\r
- getCenterLatLng : function(){\r
- \r
- var ll = this.getCenter();\r
- return {lat: ll.lat(), lng: ll.lng()};\r
- \r
- },\r
- addMarkers : function(markers) {\r
- \r
- if (Ext.isArray(markers)){\r
- for (var i = 0; i < markers.length; i++) {\r
- var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);\r
- this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);\r
- }\r
- }\r
- \r
- },\r
- addMarker : function(point, marker, clear, center, listeners){\r
- \r
- Ext.applyIf(marker,G_DEFAULT_ICON);\r
-\r
- if (clear === true){\r
- this.getMap().clearOverlays();\r
- }\r
- if (center === true) {\r
- this.getMap().setCenter(point, this.zoomLevel);\r
- }\r
-\r
- var mark = new GMarker(point,marker);\r
- if (typeof listeners === 'object'){\r
- for (evt in listeners) {\r
- GEvent.bind(mark, evt, this, listeners[evt]);\r
- }\r
- }\r
- this.getMap().addOverlay(mark);\r
-\r
- },\r
- addMapControls : function(){\r
- \r
- if (this.gmapType === 'map') {\r
- if (Ext.isArray(this.mapControls)) {\r
- for(i=0;i<this.mapControls.length;i++){\r
- this.addMapControl(this.mapControls[i]);\r
- }\r
- }else if(typeof this.mapControls === 'string'){\r
- this.addMapControl(this.mapControls);\r
- }else if(typeof this.mapControls === 'object'){\r
- this.getMap().addControl(this.mapControls);\r
- }\r
- }\r
- \r
- },\r
- addMapControl : function(mc){\r
- \r
- var mcf = window[mc];\r
- if (typeof mcf === 'function') {\r
- this.getMap().addControl(new mcf());\r
- } \r
- \r
- },\r
- addOptions : function(){\r
- \r
- if (Ext.isArray(this.mapConfOpts)) {\r
- var mc;\r
- for(i=0;i<this.mapConfOpts.length;i++){\r
- this.addOption(this.mapConfOpts[i]);\r
- }\r
- }else if(typeof this.mapConfOpts === 'string'){\r
- this.addOption(this.mapConfOpts);\r
- } \r
- \r
- },\r
- addOption : function(mc){\r
- \r
- var mcf = this.getMap()[mc];\r
- if (typeof mcf === 'function') {\r
- this.getMap()[mc]();\r
- } \r
- \r
- },\r
- geoCodeLookup : function(addr) {\r
- \r
- this.geocoder = new GClientGeocoder();\r
- this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));\r
- \r
- },\r
- addAddressToMap : function(response) {\r
- \r
- if (!response || response.Status.code != 200) {\r
- Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');\r
- }else{\r
- place = response.Placemark[0];\r
- addressinfo = place.AddressDetails;\r
- accuracy = addressinfo.Accuracy;\r
- if (accuracy === 0) {\r
- Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');\r
- }else{\r
- if (accuracy < 7) {\r
- Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');\r
- }else{\r
- point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);\r
- if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){\r
- this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);\r
- }\r
- }\r
- }\r
- }\r
- \r
- }\r
- \r
-});\r
-\r
-Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');\r
-\r
-/**\r
- * @class Ext.ux.grid.GridFilters\r
- * @extends Ext.util.Observable\r
- * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that\r
- * allow for a slightly more robust representation of filtering than what is\r
- * provided by the default store.</p>\r
- * <p>Filtering is adjusted by the user using the grid's column header menu\r
- * (this menu can be disabled through configuration). Through this menu users\r
- * can configure, enable, and disable filters for each column.</p>\r
- * <p><b><u>Features:</u></b></p>\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>Filtering implementations</b> :\r
- * <div class="sub-desc">\r
- * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can\r
- * be backed by a Ext.data.Store), and Boolean. Additional custom filter types\r
- * and menus are easily created by extending Ext.ux.grid.filter.Filter.\r
- * </div></li>\r
- * <li><b>Graphical indicators</b> :\r
- * <div class="sub-desc">\r
- * Columns that are filtered have {@link #filterCls a configurable css class}\r
- * applied to the column headers.\r
- * </div></li>\r
- * <li><b>Paging</b> :\r
- * <div class="sub-desc">\r
- * If specified as a plugin to the grid's configured PagingToolbar, the current page\r
- * will be reset to page 1 whenever you update the filters.\r
- * </div></li>\r
- * <li><b>Automatic Reconfiguration</b> :\r
- * <div class="sub-desc">\r
- * Filters automatically reconfigure when the grid 'reconfigure' event fires.\r
- * </div></li>\r
- * <li><b>Stateful</b> :\r
- * Filter information will be persisted across page loads by specifying a\r
- * <code>stateId</code> in the Grid configuration.\r
- * <div class="sub-desc">\r
- * The filter collection binds to the\r
- * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>\r
- * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>\r
- * events in order to be stateful.\r
- * </div></li>\r
- * <li><b>Grid Changes</b> :\r
- * <div class="sub-desc"><ul>\r
- * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to\r
- * this plugin.</li>\r
- * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is\r
- * fired upon onStateChange completion.</li>\r
- * </ul></div></li>\r
- * <li><b>Server side code examples</b> :\r
- * <div class="sub-desc"><ul>\r
- * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>\r
- * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>\r
- * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>\r
- * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>\r
- * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>\r
- * </ul></div></li>\r
- * </ul></div>\r
- * <p><b><u>Example usage:</u></b></p>\r
- * <pre><code>\r
-var store = new Ext.data.GroupingStore({\r
- ...\r
-});\r
-\r
-var filters = new Ext.ux.grid.GridFilters({\r
- autoReload: false, //don't reload automatically\r
- local: true, //only filter locally\r
- // filters may be configured through the plugin,\r
- // or in the column definition within the column model configuration\r
- filters: [{\r
- type: 'numeric',\r
- dataIndex: 'id'\r
- }, {\r
- type: 'string',\r
- dataIndex: 'name'\r
- }, {\r
- type: 'numeric',\r
- dataIndex: 'price'\r
- }, {\r
- type: 'date',\r
- dataIndex: 'dateAdded'\r
- }, {\r
- type: 'list',\r
- dataIndex: 'size',\r
- options: ['extra small', 'small', 'medium', 'large', 'extra large'],\r
- phpMode: true\r
- }, {\r
- type: 'boolean',\r
- dataIndex: 'visible'\r
- }]\r
-});\r
-var cm = new Ext.grid.ColumnModel([{\r
- ...\r
-}]);\r
-\r
-var grid = new Ext.grid.GridPanel({\r
- ds: store,\r
- cm: cm,\r
- view: new Ext.grid.GroupingView(),\r
- plugins: [filters],\r
- height: 400,\r
- width: 700,\r
- bbar: new Ext.PagingToolbar({\r
- store: store,\r
- pageSize: 15,\r
- plugins: [filters] //reset page to page 1 if filters change\r
- })\r
- });\r
-\r
-store.load({params: {start: 0, limit: 15}});\r
-\r
-// a filters property is added to the grid\r
-grid.filters\r
- * </code></pre>\r
- */\r
-Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {\r
- /**\r
- * @cfg {Boolean} autoReload\r
- * Defaults to true, reloading the datasource when a filter change happens.\r
- * Set this to false to prevent the datastore from being reloaded if there\r
- * are changes to the filters. See <code>{@link updateBuffer}</code>.\r
- */\r
- autoReload : true,\r
- /**\r
- * @cfg {Boolean} encode\r
- * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to\r
- * encode the filter query parameter sent with a remote request.\r
- * Defaults to false.\r
- */\r
- /**\r
- * @cfg {Array} filters\r
- * An Array of filters config objects. Refer to each filter type class for\r
- * configuration details specific to each filter type. Filters for Strings,\r
- * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters\r
- * available.\r
- */\r
- /**\r
- * @cfg {String} filterCls\r
- * The css class to be applied to column headers with active filters.\r
- * Defaults to <tt>'ux-filterd-column'</tt>.\r
- */\r
- filterCls : 'ux-filtered-column',\r
- /**\r
- * @cfg {Boolean} local\r
- * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)\r
- * instead of the default (<tt>false</tt>) server side filtering.\r
- */\r
- local : false,\r
- /**\r
- * @cfg {String} menuFilterText\r
- * defaults to <tt>'Filters'</tt>.\r
- */\r
- menuFilterText : 'Filters',\r
- /**\r
- * @cfg {String} paramPrefix\r
- * The url parameter prefix for the filters.\r
- * Defaults to <tt>'filter'</tt>.\r
- */\r
- paramPrefix : 'filter',\r
- /**\r
- * @cfg {Boolean} showMenu\r
- * Defaults to true, including a filter submenu in the default header menu.\r
- */\r
- showMenu : true,\r
- /**\r
- * @cfg {String} stateId\r
- * Name of the value to be used to store state information.\r
- */\r
- stateId : undefined,\r
- /**\r
- * @cfg {Integer} updateBuffer\r
- * Number of milliseconds to defer store updates since the last filter change.\r
- */\r
- updateBuffer : 500,\r
-\r
- /** @private */\r
- constructor : function (config) {\r
- config = config || {};\r
- this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);\r
- this.filters = new Ext.util.MixedCollection();\r
- this.filters.getKey = function (o) {\r
- return o ? o.dataIndex : null;\r
- };\r
- this.addFilters(config.filters);\r
- delete config.filters;\r
- Ext.apply(this, config);\r
- },\r
-\r
- /** @private */\r
- init : function (grid) {\r
- if (grid instanceof Ext.grid.GridPanel) {\r
- this.grid = grid;\r
-\r
- this.bindStore(this.grid.getStore(), true);\r
- // assumes no filters were passed in the constructor, so try and use ones from the colModel\r
- if(this.filters.getCount() == 0){\r
- this.addFilters(this.grid.getColumnModel());\r
- }\r
-\r
- this.grid.filters = this;\r
-\r
- this.grid.addEvents({'filterupdate': true});\r
-\r
- grid.on({\r
- scope: this,\r
- beforestaterestore: this.applyState,\r
- beforestatesave: this.saveState,\r
- beforedestroy: this.destroy,\r
- reconfigure: this.onReconfigure\r
- });\r
-\r
- if (grid.rendered){\r
- this.onRender();\r
- } else {\r
- grid.on({\r
- scope: this,\r
- single: true,\r
- render: this.onRender\r
- });\r
- }\r
-\r
- } else if (grid instanceof Ext.PagingToolbar) {\r
- this.toolbar = grid;\r
- }\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler for the grid's beforestaterestore event (fires before the state of the\r
- * grid is restored).\r
- * @param {Object} grid The grid object\r
- * @param {Object} state The hash of state values returned from the StateProvider.\r
- */\r
- applyState : function (grid, state) {\r
- var key, filter;\r
- this.applyingState = true;\r
- this.clearFilters();\r
- if (state.filters) {\r
- for (key in state.filters) {\r
- filter = this.filters.get(key);\r
- if (filter) {\r
- filter.setValue(state.filters[key]);\r
- filter.setActive(true);\r
- }\r
- }\r
- }\r
- this.deferredUpdate.cancel();\r
- if (this.local) {\r
- this.reload();\r
- }\r
- delete this.applyingState;\r
- },\r
-\r
- /**\r
- * Saves the state of all active filters\r
- * @param {Object} grid\r
- * @param {Object} state\r
- * @return {Boolean}\r
- */\r
- saveState : function (grid, state) {\r
- var filters = {};\r
- this.filters.each(function (filter) {\r
- if (filter.active) {\r
- filters[filter.dataIndex] = filter.getValue();\r
- }\r
- });\r
- return (state.filters = filters);\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler called when the grid is rendered\r
- */\r
- onRender : function () {\r
- this.grid.getView().on('refresh', this.onRefresh, this);\r
- this.createMenu();\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler called by the grid 'beforedestroy' event\r
- */\r
- destroy : function () {\r
- this.removeAll();\r
- this.purgeListeners();\r
-\r
- if(this.filterMenu){\r
- Ext.menu.MenuMgr.unregister(this.filterMenu);\r
- this.filterMenu.destroy();\r
- this.filterMenu = this.menu.menu = null;\r
- }\r
- },\r
-\r
- /**\r
- * Remove all filters, permanently destroying them.\r
- */\r
- removeAll : function () {\r
- if(this.filters){\r
- Ext.destroy.apply(Ext, this.filters.items);\r
- // remove all items from the collection\r
- this.filters.clear();\r
- }\r
- },\r
-\r
-\r
- /**\r
- * Changes the data store bound to this view and refreshes it.\r
- * @param {Store} store The store to bind to this view\r
- */\r
- bindStore : function(store, initial){\r
- if(!initial && this.store){\r
- if (this.local) {\r
- store.un('load', this.onLoad, this);\r
- } else {\r
- store.un('beforeload', this.onBeforeLoad, this);\r
- }\r
- }\r
- if(store){\r
- if (this.local) {\r
- store.on('load', this.onLoad, this);\r
- } else {\r
- store.on('beforeload', this.onBeforeLoad, this);\r
- }\r
- }\r
- this.store = store;\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler called when the grid reconfigure event fires\r
- */\r
- onReconfigure : function () {\r
- this.bindStore(this.grid.getStore());\r
- this.store.clearFilter();\r
- this.removeAll();\r
- this.addFilters(this.grid.getColumnModel());\r
- this.updateColumnHeadings();\r
- },\r
-\r
- createMenu : function () {\r
- var view = this.grid.getView(),\r
- hmenu = view.hmenu;\r
-\r
- if (this.showMenu && hmenu) {\r
-\r
- this.sep = hmenu.addSeparator();\r
- this.filterMenu = new Ext.menu.Menu({\r
- id: this.grid.id + '-filters-menu'\r
- });\r
- this.menu = hmenu.add({\r
- checked: false,\r
- itemId: 'filters',\r
- text: this.menuFilterText,\r
- menu: this.filterMenu\r
- });\r
-\r
- this.menu.on({\r
- scope: this,\r
- checkchange: this.onCheckChange,\r
- beforecheckchange: this.onBeforeCheck\r
- });\r
- hmenu.on('beforeshow', this.onMenu, this);\r
- }\r
- this.updateColumnHeadings();\r
- },\r
-\r
- /**\r
- * @private\r
- * Get the filter menu from the filters MixedCollection based on the clicked header\r
- */\r
- getMenuFilter : function () {\r
- var view = this.grid.getView();\r
- if (!view || view.hdCtxIndex === undefined) {\r
- return null;\r
- }\r
- return this.filters.get(\r
- view.cm.config[view.hdCtxIndex].dataIndex\r
- );\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler called by the grid's hmenu beforeshow event\r
- */\r
- onMenu : function (filterMenu) {\r
- var filter = this.getMenuFilter();\r
-\r
- if (filter) {\r
-/*\r
-TODO: lazy rendering\r
- if (!filter.menu) {\r
- filter.menu = filter.createMenu();\r
- }\r
-*/\r
- this.menu.menu = filter.menu;\r
- this.menu.setChecked(filter.active, false);\r
- // disable the menu if filter.disabled explicitly set to true\r
- this.menu.setDisabled(filter.disabled === true);\r
- }\r
-\r
- this.menu.setVisible(filter !== undefined);\r
- this.sep.setVisible(filter !== undefined);\r
- },\r
-\r
- /** @private */\r
- onCheckChange : function (item, value) {\r
- this.getMenuFilter().setActive(value);\r
- },\r
-\r
- /** @private */\r
- onBeforeCheck : function (check, value) {\r
- return !value || this.getMenuFilter().isActivatable();\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler for all events on filters.\r
- * @param {String} event Event name\r
- * @param {Object} filter Standard signature of the event before the event is fired\r
- */\r
- onStateChange : function (event, filter) {\r
- if (event === 'serialize') {\r
- return;\r
- }\r
-\r
- if (filter == this.getMenuFilter()) {\r
- this.menu.setChecked(filter.active, false);\r
- }\r
-\r
- if ((this.autoReload || this.local) && !this.applyingState) {\r
- this.deferredUpdate.delay(this.updateBuffer);\r
- }\r
- this.updateColumnHeadings();\r
-\r
- if (!this.applyingState) {\r
- this.grid.saveState();\r
- }\r
- this.grid.fireEvent('filterupdate', this, filter);\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler for store's beforeload event when configured for remote filtering\r
- * @param {Object} store\r
- * @param {Object} options\r
- */\r
- onBeforeLoad : function (store, options) {\r
- options.params = options.params || {};\r
- this.cleanParams(options.params);\r
- var params = this.buildQuery(this.getFilterData());\r
- Ext.apply(options.params, params);\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler for store's load event when configured for local filtering\r
- * @param {Object} store\r
- * @param {Object} options\r
- */\r
- onLoad : function (store, options) {\r
- store.filterBy(this.getRecordFilter());\r
- },\r
-\r
- /**\r
- * @private\r
- * Handler called when the grid's view is refreshed\r
- */\r
- onRefresh : function () {\r
- this.updateColumnHeadings();\r
- },\r
-\r
- /**\r
- * Update the styles for the header row based on the active filters\r
- */\r
- updateColumnHeadings : function () {\r
- var view = this.grid.getView(),\r
- i, len, filter;\r
- if (view.mainHd) {\r
- for (i = 0, len = view.cm.config.length; i < len; i++) {\r
- filter = this.getFilter(view.cm.config[i].dataIndex);\r
- Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);\r
- }\r
- }\r
- },\r
-\r
- /** @private */\r
- reload : function () {\r
- if (this.local) {\r
- this.grid.store.clearFilter(true);\r
- this.grid.store.filterBy(this.getRecordFilter());\r
- } else {\r
- var start,\r
- store = this.grid.store;\r
- this.deferredUpdate.cancel();\r
- if (this.toolbar) {\r
- start = store.paramNames.start;\r
- if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {\r
- store.lastOptions.params[start] = 0;\r
- }\r
- }\r
- store.reload();\r
- }\r
- },\r
-\r
- /**\r
- * Method factory that generates a record validator for the filters active at the time\r
- * of invokation.\r
- * @private\r
- */\r
- getRecordFilter : function () {\r
- var f = [], len, i;\r
- this.filters.each(function (filter) {\r
- if (filter.active) {\r
- f.push(filter);\r
- }\r
- });\r
-\r
- len = f.length;\r
- return function (record) {\r
- for (i = 0; i < len; i++) {\r
- if (!f[i].validateRecord(record)) {\r
- return false;\r
- }\r
- }\r
- return true;\r
- };\r
- },\r
-\r
- /**\r
- * Adds a filter to the collection and observes it for state change.\r
- * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.\r
- * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.\r
- */\r
- addFilter : function (config) {\r
- var Cls = this.getFilterClass(config.type),\r
- filter = config.menu ? config : (new Cls(config));\r
- this.filters.add(filter);\r
-\r
- Ext.util.Observable.capture(filter, this.onStateChange, this);\r
- return filter;\r
- },\r
-\r
- /**\r
- * Adds filters to the collection.\r
- * @param {Array/Ext.grid.ColumnModel} filters Either an Array of\r
- * filter configuration objects or an Ext.grid.ColumnModel. The columns\r
- * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>\r
- * property and, if present, will be used as the filter configuration object.\r
- */\r
- addFilters : function (filters) {\r
- if (filters) {\r
- var i, len, filter, cm = false, dI;\r
- if (filters instanceof Ext.grid.ColumnModel) {\r
- filters = filters.config;\r
- cm = true;\r
- }\r
- for (i = 0, len = filters.length; i < len; i++) {\r
- filter = false;\r
- if (cm) {\r
- dI = filters[i].dataIndex;\r
- filter = filters[i].filter || filters[i].filterable;\r
- if (filter){\r
- filter = (filter === true) ? {} : filter;\r
- Ext.apply(filter, {dataIndex:dI});\r
- // filter type is specified in order of preference:\r
- // filter type specified in config\r
- // type specified in store's field's type config\r
- filter.type = filter.type || this.store.fields.get(dI).type;\r
- }\r
- } else {\r
- filter = filters[i];\r
- }\r
- // if filter config found add filter for the column\r
- if (filter) {\r
- this.addFilter(filter);\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Returns a filter for the given dataIndex, if one exists.\r
- * @param {String} dataIndex The dataIndex of the desired filter object.\r
- * @return {Ext.ux.grid.filter.Filter}\r
- */\r
- getFilter : function (dataIndex) {\r
- return this.filters.get(dataIndex);\r
- },\r
-\r
- /**\r
- * Turns all filters off. This does not clear the configuration information\r
- * (see {@link #removeAll}).\r
- */\r
- clearFilters : function () {\r
- this.filters.each(function (filter) {\r
- filter.setActive(false);\r
- });\r
- },\r
-\r
- /**\r
- * Returns an Array of the currently active filters.\r
- * @return {Array} filters Array of the currently active filters.\r
- */\r
- getFilterData : function () {\r
- var filters = [], i, len;\r
-\r
- this.filters.each(function (f) {\r
- if (f.active) {\r
- var d = [].concat(f.serialize());\r
- for (i = 0, len = d.length; i < len; i++) {\r
- filters.push({\r
- field: f.dataIndex,\r
- data: d[i]\r
- });\r
- }\r
- }\r
- });\r
- return filters;\r
- },\r
-\r
- /**\r
- * Function to take the active filters data and build it into a query.\r
- * The format of the query depends on the <code>{@link #encode}</code>\r
- * configuration:\r
- * <div class="mdetail-params"><ul>\r
- *\r
- * <li><b><tt>false</tt></b> : <i>Default</i>\r
- * <div class="sub-desc">\r
- * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:\r
- * <pre><code>\r
-filters[0][field]="someDataIndex"&\r
-filters[0][data][comparison]="someValue1"&\r
-filters[0][data][type]="someValue2"&\r
-filters[0][data][value]="someValue3"&\r
- * </code></pre>\r
- * </div></li>\r
- * <li><b><tt>true</tt></b> :\r
- * <div class="sub-desc">\r
- * JSON encode the filter data\r
- * <pre><code>\r
-filters[0][field]="someDataIndex"&\r
-filters[0][data][comparison]="someValue1"&\r
-filters[0][data][type]="someValue2"&\r
-filters[0][data][value]="someValue3"&\r
- * </code></pre>\r
- * </div></li>\r
- * </ul></div>\r
- * Override this method to customize the format of the filter query for remote requests.\r
- * @param {Array} filters A collection of objects representing active filters and their configuration.\r
- * Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured\r
- * to be unique as any one filter may be a composite of more basic filters for the same dataIndex.\r
- * @return {Object} Query keys and values\r
- */\r
- buildQuery : function (filters) {\r
- var p = {}, i, f, root, dataPrefix, key, tmp,\r
- len = filters.length;\r
-\r
- if (!this.encode){\r
- for (i = 0; i < len; i++) {\r
- f = filters[i];\r
- root = [this.paramPrefix, '[', i, ']'].join('');\r
- p[root + '[field]'] = f.field;\r
-\r
- dataPrefix = root + '[data]';\r
- for (key in f.data) {\r
- p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];\r
- }\r
- }\r
- } else {\r
- tmp = [];\r
- for (i = 0; i < len; i++) {\r
- f = filters[i];\r
- tmp.push(Ext.apply(\r
- {},\r
- {field: f.field},\r
- f.data\r
- ));\r
- }\r
- // only build if there is active filter\r
- if (tmp.length > 0){\r
- p[this.paramPrefix] = Ext.util.JSON.encode(tmp);\r
- }\r
- }\r
- return p;\r
- },\r
-\r
- /**\r
- * Removes filter related query parameters from the provided object.\r
- * @param {Object} p Query parameters that may contain filter related fields.\r
- */\r
- cleanParams : function (p) {\r
- // if encoding just delete the property\r
- if (this.encode) {\r
- delete p[this.paramPrefix];\r
- // otherwise scrub the object of filter data\r
- } else {\r
- var regex, key;\r
- regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');\r
- for (key in p) {\r
- if (regex.test(key)) {\r
- delete p[key];\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Function for locating filter classes, overwrite this with your favorite\r
- * loader to provide dynamic filter loading.\r
- * @param {String} type The type of filter to load ('Filter' is automatically\r
- * appended to the passed type; eg, 'string' becomes 'StringFilter').\r
- * @return {Class} The Ext.ux.grid.filter.Class\r
- */\r
- getFilterClass : function (type) {\r
- // map the supported Ext.data.Field type values into a supported filter\r
- switch(type) {\r
- case 'auto':\r
- type = 'string';\r
- break;\r
- case 'int':\r
- case 'float':\r
- type = 'numeric';\r
- break;\r
- }\r
- return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];\r
- }\r
-});\r
-\r
-// register ptype\r
-Ext.preg('gridfilters', Ext.ux.grid.GridFilters);\r
-Ext.namespace('Ext.ux.grid.filter');\r
-\r
-/** \r
- * @class Ext.ux.grid.filter.Filter\r
- * @extends Ext.util.Observable\r
- * Abstract base class for filter implementations.\r
- */\r
-Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {\r
- /**\r
- * @cfg {Boolean} active\r
- * Indicates the initial status of the filter (defaults to false).\r
- */\r
- active : false,\r
- /**\r
- * True if this filter is active. Use setActive() to alter after configuration.\r
- * @type Boolean\r
- * @property active\r
- */\r
- /**\r
- * @cfg {String} dataIndex \r
- * The {@link Ext.data.Store} dataIndex of the field this filter represents.\r
- * The dataIndex does not actually have to exist in the store.\r
- */\r
- dataIndex : null,\r
- /**\r
- * The filter configuration menu that will be installed into the filter submenu of a column menu.\r
- * @type Ext.menu.Menu\r
- * @property\r
- */\r
- menu : null,\r
- /**\r
- * @cfg {Number} updateBuffer\r
- * Number of milliseconds to wait after user interaction to fire an update. Only supported \r
- * by filters: 'list', 'numeric', and 'string'. Defaults to 500.\r
- */\r
- updateBuffer : 500,\r
-\r
- constructor : function (config) {\r
- Ext.apply(this, config);\r
- \r
- this.addEvents(\r
- /**\r
- * @event activate\r
- * Fires when an inactive filter becomes active\r
- * @param {Ext.ux.grid.filter.Filter} this\r
- */\r
- 'activate',\r
- /**\r
- * @event deactivate\r
- * Fires when an active filter becomes inactive\r
- * @param {Ext.ux.grid.filter.Filter} this\r
- */\r
- 'deactivate',\r
- /**\r
- * @event serialize\r
- * Fires after the serialization process. Use this to attach additional parameters to serialization\r
- * data before it is encoded and sent to the server.\r
- * @param {Array/Object} data A map or collection of maps representing the current filter configuration.\r
- * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.\r
- */\r
- 'serialize',\r
- /**\r
- * @event update\r
- * Fires when a filter configuration has changed\r
- * @param {Ext.ux.grid.filter.Filter} this The filter object.\r
- */\r
- 'update'\r
- );\r
- Ext.ux.grid.filter.Filter.superclass.constructor.call(this);\r
-\r
- this.menu = new Ext.menu.Menu();\r
- this.init(config);\r
- if(config && config.value){\r
- this.setValue(config.value);\r
- this.setActive(config.active !== false, true);\r
- delete config.value;\r
- }\r
- },\r
-\r
- /**\r
- * Destroys this filter by purging any event listeners, and removing any menus.\r
- */\r
- destroy : function(){\r
- if (this.menu){\r
- this.menu.destroy();\r
- }\r
- this.purgeListeners();\r
- },\r
-\r
- /**\r
- * Template method to be implemented by all subclasses that is to\r
- * initialize the filter and install required menu items.\r
- * Defaults to Ext.emptyFn.\r
- */\r
- init : Ext.emptyFn,\r
- \r
- /**\r
- * Template method to be implemented by all subclasses that is to\r
- * get and return the value of the filter.\r
- * Defaults to Ext.emptyFn.\r
- * @return {Object} The 'serialized' form of this filter\r
- * @methodOf Ext.ux.grid.filter.Filter\r
- */\r
- getValue : Ext.emptyFn,\r
- \r
- /**\r
- * Template method to be implemented by all subclasses that is to\r
- * set the value of the filter and fire the 'update' event.\r
- * Defaults to Ext.emptyFn.\r
- * @param {Object} data The value to set the filter\r
- * @methodOf Ext.ux.grid.filter.Filter\r
- */ \r
- setValue : Ext.emptyFn,\r
- \r
- /**\r
- * Template method to be implemented by all subclasses that is to\r
- * return <tt>true</tt> if the filter has enough configuration information to be activated.\r
- * Defaults to <tt>return true</tt>.\r
- * @return {Boolean}\r
- */\r
- isActivatable : function(){\r
- return true;\r
- },\r
- \r
- /**\r
- * Template method to be implemented by all subclasses that is to\r
- * get and return serialized filter data for transmission to the server.\r
- * Defaults to Ext.emptyFn.\r
- */\r
- getSerialArgs : Ext.emptyFn,\r
-\r
- /**\r
- * Template method to be implemented by all subclasses that is to\r
- * validates the provided Ext.data.Record against the filters configuration.\r
- * Defaults to <tt>return true</tt>.\r
- * @param {Ext.data.Record} record The record to validate\r
- * @return {Boolean} true if the record is valid within the bounds\r
- * of the filter, false otherwise.\r
- */\r
- validateRecord : function(){\r
- return true;\r
- },\r
-\r
- /**\r
- * Returns the serialized filter data for transmission to the server\r
- * and fires the 'serialize' event.\r
- * @return {Object/Array} An object or collection of objects containing\r
- * key value pairs representing the current configuration of the filter.\r
- * @methodOf Ext.ux.grid.filter.Filter\r
- */\r
- serialize : function(){\r
- var args = this.getSerialArgs();\r
- this.fireEvent('serialize', args, this);\r
- return args;\r
- },\r
-\r
- /** @private */\r
- fireUpdate : function(){\r
- if (this.active) {\r
- this.fireEvent('update', this);\r
- }\r
- this.setActive(this.isActivatable());\r
- },\r
- \r
- /**\r
- * Sets the status of the filter and fires the appropriate events.\r
- * @param {Boolean} active The new filter state.\r
- * @param {Boolean} suppressEvent True to prevent events from being fired.\r
- * @methodOf Ext.ux.grid.filter.Filter\r
- */\r
- setActive : function(active, suppressEvent){\r
- if(this.active != active){\r
- this.active = active;\r
- if (suppressEvent !== true) {\r
- this.fireEvent(active ? 'activate' : 'deactivate', this);\r
- }\r
- }\r
- } \r
-});/** \r
- * @class Ext.ux.grid.filter.BooleanFilter\r
- * @extends Ext.ux.grid.filter.Filter\r
- * Boolean filters use unique radio group IDs (so you can have more than one!)\r
- * <p><b><u>Example Usage:</u></b></p>\r
- * <pre><code> \r
-var filters = new Ext.ux.grid.GridFilters({\r
- ...\r
- filters: [{\r
- // required configs\r
- type: 'boolean',\r
- dataIndex: 'visible'\r
-\r
- // optional configs\r
- defaultValue: null, // leave unselected (false selected by default)\r
- yesText: 'Yes', // default\r
- noText: 'No' // default\r
- }]\r
-});\r
- * </code></pre>\r
- */\r
-Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
- /**\r
- * @cfg {Boolean} defaultValue\r
- * Set this to null if you do not want either option to be checked by default. Defaults to false.\r
- */\r
- defaultValue : false,\r
- /**\r
- * @cfg {String} yesText\r
- * Defaults to 'Yes'.\r
- */\r
- yesText : 'Yes',\r
- /**\r
- * @cfg {String} noText\r
- * Defaults to 'No'.\r
- */\r
- noText : 'No',\r
-\r
- /** \r
- * @private\r
- * Template method that is to initialize the filter and install required menu items.\r
- */\r
- init : function (config) {\r
- var gId = Ext.id();\r
- this.options = [\r
- new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),\r
- new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];\r
- \r
- this.menu.add(this.options[0], this.options[1]);\r
- \r
- for(var i=0; i<this.options.length; i++){\r
- this.options[i].on('click', this.fireUpdate, this);\r
- this.options[i].on('checkchange', this.fireUpdate, this);\r
- }\r
- },\r
- \r
- /**\r
- * @private\r
- * Template method that is to get and return the value of the filter.\r
- * @return {String} The value of this filter\r
- */\r
- getValue : function () {\r
- return this.options[0].checked;\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to set the value of the filter.\r
- * @param {Object} value The value to set the filter\r
- */ \r
- setValue : function (value) {\r
- this.options[value ? 0 : 1].setChecked(true);\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to get and return serialized filter data for\r
- * transmission to the server.\r
- * @return {Object/Array} An object or collection of objects containing\r
- * key value pairs representing the current configuration of the filter.\r
- */\r
- getSerialArgs : function () {\r
- var args = {type: 'boolean', value: this.getValue()};\r
- return args;\r
- },\r
- \r
- /**\r
- * Template method that is to validate the provided Ext.data.Record\r
- * against the filters configuration.\r
- * @param {Ext.data.Record} record The record to validate\r
- * @return {Boolean} true if the record is valid within the bounds\r
- * of the filter, false otherwise.\r
- */\r
- validateRecord : function (record) {\r
- return record.get(this.dataIndex) == this.getValue();\r
- }\r
-});/** \r
- * @class Ext.ux.grid.filter.DateFilter\r
- * @extends Ext.ux.grid.filter.Filter\r
- * Filter by a configurable Ext.menu.DateMenu\r
- * <p><b><u>Example Usage:</u></b></p>\r
- * <pre><code> \r
-var filters = new Ext.ux.grid.GridFilters({\r
- ...\r
- filters: [{\r
- // required configs\r
- type: 'date',\r
- dataIndex: 'dateAdded',\r
- \r
- // optional configs\r
- dateFormat: 'm/d/Y', // default\r
- beforeText: 'Before', // default\r
- afterText: 'After', // default\r
- onText: 'On', // default\r
- pickerOpts: {\r
- // any DateMenu configs\r
- },\r
-\r
- active: true // default is false\r
- }]\r
-});\r
- * </code></pre>\r
- */\r
-Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
- /**\r
- * @cfg {String} afterText\r
- * Defaults to 'After'.\r
- */\r
- afterText : 'After',\r
- /**\r
- * @cfg {String} beforeText\r
- * Defaults to 'Before'.\r
- */\r
- beforeText : 'Before',\r
- /**\r
- * @cfg {Object} compareMap\r
- * Map for assigning the comparison values used in serialization.\r
- */\r
- compareMap : {\r
- before: 'lt',\r
- after: 'gt',\r
- on: 'eq'\r
- },\r
- /**\r
- * @cfg {String} dateFormat\r
- * The date format to return when using getValue.\r
- * Defaults to 'm/d/Y'.\r
- */\r
- dateFormat : 'm/d/Y',\r
-\r
- /**\r
- * @cfg {Date} maxDate\r
- * Allowable date as passed to the Ext.DatePicker\r
- * Defaults to undefined.\r
- */\r
- /**\r
- * @cfg {Date} minDate\r
- * Allowable date as passed to the Ext.DatePicker\r
- * Defaults to undefined.\r
- */\r
- /**\r
- * @cfg {Array} menuItems\r
- * The items to be shown in this menu\r
- * Defaults to:<pre>\r
- * menuItems : ['before', 'after', '-', 'on'],\r
- * </pre>\r
- */\r
- menuItems : ['before', 'after', '-', 'on'],\r
-\r
- /**\r
- * @cfg {Object} menuItemCfgs\r
- * Default configuration options for each menu item\r
- */\r
- menuItemCfgs : {\r
- selectOnFocus: true,\r
- width: 125\r
- },\r
-\r
- /**\r
- * @cfg {String} onText\r
- * Defaults to 'On'.\r
- */\r
- onText : 'On',\r
- \r
- /**\r
- * @cfg {Object} pickerOpts\r
- * Configuration options for the date picker associated with each field.\r
- */\r
- pickerOpts : {},\r
-\r
- /** \r
- * @private\r
- * Template method that is to initialize the filter and install required menu items.\r
- */\r
- init : function (config) {\r
- var menuCfg, i, len, item, cfg, Cls;\r
-\r
- menuCfg = Ext.apply(this.pickerOpts, {\r
- minDate: this.minDate, \r
- maxDate: this.maxDate, \r
- format: this.dateFormat,\r
- listeners: {\r
- scope: this,\r
- select: this.onMenuSelect\r
- }\r
- });\r
-\r
- this.fields = {};\r
- for (i = 0, len = this.menuItems.length; i < len; i++) {\r
- item = this.menuItems[i];\r
- if (item !== '-') {\r
- cfg = {\r
- itemId: 'range-' + item,\r
- text: this[item + 'Text'],\r
- menu: new Ext.menu.DateMenu(\r
- Ext.apply(menuCfg, {\r
- itemId: item\r
- })\r
- ),\r
- listeners: {\r
- scope: this,\r
- checkchange: this.onCheckChange\r
- }\r
- };\r
- Cls = Ext.menu.CheckItem;\r
- item = this.fields[item] = new Cls(cfg);\r
- }\r
- //this.add(item);\r
- this.menu.add(item);\r
- }\r
- },\r
-\r
- onCheckChange : function () {\r
- this.setActive(this.isActivatable());\r
- this.fireEvent('update', this);\r
- },\r
-\r
- /** \r
- * @private\r
- * Handler method called when there is a keyup event on an input\r
- * item of this menu.\r
- */\r
- onInputKeyUp : function (field, e) {\r
- var k = e.getKey();\r
- if (k == e.RETURN && field.isValid()) {\r
- e.stopEvent();\r
- this.menu.hide(true);\r
- return;\r
- }\r
- },\r
-\r
- /**\r
- * Handler for when the menu for a field fires the 'select' event\r
- * @param {Object} date\r
- * @param {Object} menuItem\r
- * @param {Object} value\r
- * @param {Object} picker\r
- */\r
- onMenuSelect : function (menuItem, value, picker) {\r
- var fields = this.fields,\r
- field = this.fields[menuItem.itemId];\r
- \r
- field.setChecked(true);\r
- \r
- if (field == fields.on) {\r
- fields.before.setChecked(false, true);\r
- fields.after.setChecked(false, true);\r
- } else {\r
- fields.on.setChecked(false, true);\r
- if (field == fields.after && fields.before.menu.picker.value < value) {\r
- fields.before.setChecked(false, true);\r
- } else if (field == fields.before && fields.after.menu.picker.value > value) {\r
- fields.after.setChecked(false, true);\r
- }\r
- }\r
- this.fireEvent('update', this);\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to get and return the value of the filter.\r
- * @return {String} The value of this filter\r
- */\r
- getValue : function () {\r
- var key, result = {};\r
- for (key in this.fields) {\r
- if (this.fields[key].checked) {\r
- result[key] = this.fields[key].menu.picker.getValue();\r
- }\r
- }\r
- return result;\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to set the value of the filter.\r
- * @param {Object} value The value to set the filter\r
- * @param {Boolean} preserve true to preserve the checked status\r
- * of the other fields. Defaults to false, unchecking the\r
- * other fields\r
- */ \r
- setValue : function (value, preserve) {\r
- var key;\r
- for (key in this.fields) {\r
- if(value[key]){\r
- this.fields[key].menu.picker.setValue(value[key]);\r
- this.fields[key].setChecked(true);\r
- } else if (!preserve) {\r
- this.fields[key].setChecked(false);\r
- }\r
- }\r
- this.fireEvent('update', this);\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to return <tt>true</tt> if the filter\r
- * has enough configuration information to be activated.\r
- * @return {Boolean}\r
- */\r
- isActivatable : function () {\r
- var key;\r
- for (key in this.fields) {\r
- if (this.fields[key].checked) {\r
- return true;\r
- }\r
- }\r
- return false;\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to get and return serialized filter data for\r
- * transmission to the server.\r
- * @return {Object/Array} An object or collection of objects containing\r
- * key value pairs representing the current configuration of the filter.\r
- */\r
- getSerialArgs : function () {\r
- var args = [];\r
- for (var key in this.fields) {\r
- if(this.fields[key].checked){\r
- args.push({\r
- type: 'date',\r
- comparison: this.compareMap[key],\r
- value: this.getFieldValue(key).format(this.dateFormat)\r
- });\r
- }\r
- }\r
- return args;\r
- },\r
-\r
- /**\r
- * Get and return the date menu picker value\r
- * @param {String} item The field identifier ('before', 'after', 'on')\r
- * @return {Date} Gets the current selected value of the date field\r
- */\r
- getFieldValue : function(item){\r
- return this.fields[item].menu.picker.getValue();\r
- },\r
- \r
- /**\r
- * Gets the menu picker associated with the passed field\r
- * @param {String} item The field identifier ('before', 'after', 'on')\r
- * @return {Object} The menu picker\r
- */\r
- getPicker : function(item){\r
- return this.fields[item].menu.picker;\r
- },\r
-\r
- /**\r
- * Template method that is to validate the provided Ext.data.Record\r
- * against the filters configuration.\r
- * @param {Ext.data.Record} record The record to validate\r
- * @return {Boolean} true if the record is valid within the bounds\r
- * of the filter, false otherwise.\r
- */\r
- validateRecord : function (record) {\r
- var key,\r
- pickerValue,\r
- val = record.get(this.dataIndex);\r
- \r
- if(!Ext.isDate(val)){\r
- return false;\r
- }\r
- val = val.clearTime(true).getTime();\r
- \r
- for (key in this.fields) {\r
- if (this.fields[key].checked) {\r
- pickerValue = this.getFieldValue(key).clearTime(true).getTime();\r
- if (key == 'before' && pickerValue <= val) {\r
- return false;\r
- }\r
- if (key == 'after' && pickerValue >= val) {\r
- return false;\r
- }\r
- if (key == 'on' && pickerValue != val) {\r
- return false;\r
- }\r
- }\r
- }\r
- return true;\r
- }\r
-});/** \r
- * @class Ext.ux.grid.filter.ListFilter\r
- * @extends Ext.ux.grid.filter.Filter\r
- * <p>List filters are able to be preloaded/backed by an Ext.data.Store to load\r
- * their options the first time they are shown. ListFilter utilizes the\r
- * {@link Ext.ux.menu.ListMenu} component.</p>\r
- * <p>Although not shown here, this class accepts all configuration options\r
- * for {@link Ext.ux.menu.ListMenu}.</p>\r
- * \r
- * <p><b><u>Example Usage:</u></b></p>\r
- * <pre><code> \r
-var filters = new Ext.ux.grid.GridFilters({\r
- ...\r
- filters: [{\r
- type: 'list',\r
- dataIndex: 'size',\r
- phpMode: true,\r
- // options will be used as data to implicitly creates an ArrayStore\r
- options: ['extra small', 'small', 'medium', 'large', 'extra large']\r
- }]\r
-});\r
- * </code></pre>\r
- * \r
- */\r
-Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
-\r
- /**\r
- * @cfg {Array} options\r
- * <p><code>data</code> to be used to implicitly create a data store\r
- * to back this list when the data source is <b>local</b>. If the\r
- * data for the list is remote, use the <code>{@link #store}</code>\r
- * config instead.</p>\r
- * <br><p>Each item within the provided array may be in one of the\r
- * following formats:</p>\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>Array</b> :\r
- * <pre><code>\r
-options: [\r
- [11, 'extra small'], \r
- [18, 'small'],\r
- [22, 'medium'],\r
- [35, 'large'],\r
- [44, 'extra large']\r
-]\r
- * </code></pre>\r
- * </li>\r
- * <li><b>Object</b> :\r
- * <pre><code>\r
-labelField: 'name', // override default of 'text'\r
-options: [\r
- {id: 11, name:'extra small'}, \r
- {id: 18, name:'small'}, \r
- {id: 22, name:'medium'}, \r
- {id: 35, name:'large'}, \r
- {id: 44, name:'extra large'} \r
-]\r
- * </code></pre>\r
- * </li>\r
- * <li><b>String</b> :\r
- * <pre><code>\r
- * options: ['extra small', 'small', 'medium', 'large', 'extra large']\r
- * </code></pre>\r
- * </li>\r
- */\r
- /**\r
- * @cfg {Boolean} phpMode\r
- * <p>Adjust the format of this filter. Defaults to false.</p>\r
- * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>\r
- * <pre><code>\r
-// phpMode == false (default):\r
-filter[0][data][type] list\r
-filter[0][data][value] value1\r
-filter[0][data][value] value2\r
-filter[0][field] prod \r
-\r
-// phpMode == true:\r
-filter[0][data][type] list\r
-filter[0][data][value] value1, value2\r
-filter[0][field] prod \r
- * </code></pre>\r
- * When GridFilters <code>@cfg encode = true</code>:\r
- * <pre><code>\r
-// phpMode == false (default):\r
-filter : [{"type":"list","value":["small","medium"],"field":"size"}]\r
-\r
-// phpMode == true:\r
-filter : [{"type":"list","value":"small,medium","field":"size"}]\r
- * </code></pre>\r
- */\r
- phpMode : false,\r
- /**\r
- * @cfg {Ext.data.Store} store\r
- * The {@link Ext.data.Store} this list should use as its data source\r
- * when the data source is <b>remote</b>. If the data for the list\r
- * is local, use the <code>{@link #options}</code> config instead.\r
- */\r
-\r
- /** \r
- * @private\r
- * Template method that is to initialize the filter and install required menu items.\r
- * @param {Object} config\r
- */\r
- init : function (config) {\r
- this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);\r
-\r
- // if a menu already existed, do clean up first\r
- if (this.menu){\r
- this.menu.destroy();\r
- }\r
- this.menu = new Ext.ux.menu.ListMenu(config);\r
- this.menu.on('checkchange', this.onCheckChange, this);\r
- },\r
- \r
- /**\r
- * @private\r
- * Template method that is to get and return the value of the filter.\r
- * @return {String} The value of this filter\r
- */\r
- getValue : function () {\r
- return this.menu.getSelected();\r
- },\r
- /**\r
- * @private\r
- * Template method that is to set the value of the filter.\r
- * @param {Object} value The value to set the filter\r
- */ \r
- setValue : function (value) {\r
- this.menu.setSelected(value);\r
- this.fireEvent('update', this);\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to return <tt>true</tt> if the filter\r
- * has enough configuration information to be activated.\r
- * @return {Boolean}\r
- */\r
- isActivatable : function () {\r
- return this.getValue().length > 0;\r
- },\r
- \r
- /**\r
- * @private\r
- * Template method that is to get and return serialized filter data for\r
- * transmission to the server.\r
- * @return {Object/Array} An object or collection of objects containing\r
- * key value pairs representing the current configuration of the filter.\r
- */\r
- getSerialArgs : function () {\r
- var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};\r
- return args;\r
- },\r
-\r
- /** @private */\r
- onCheckChange : function(){\r
- this.dt.delay(this.updateBuffer);\r
- },\r
- \r
- \r
- /**\r
- * Template method that is to validate the provided Ext.data.Record\r
- * against the filters configuration.\r
- * @param {Ext.data.Record} record The record to validate\r
- * @return {Boolean} true if the record is valid within the bounds\r
- * of the filter, false otherwise.\r
- */\r
- validateRecord : function (record) {\r
- return this.getValue().indexOf(record.get(this.dataIndex)) > -1;\r
- }\r
-});/** \r
- * @class Ext.ux.grid.filter.NumericFilter\r
- * @extends Ext.ux.grid.filter.Filter\r
- * Filters using an Ext.ux.menu.RangeMenu.\r
- * <p><b><u>Example Usage:</u></b></p>\r
- * <pre><code> \r
-var filters = new Ext.ux.grid.GridFilters({\r
- ...\r
- filters: [{\r
- type: 'numeric',\r
- dataIndex: 'price'\r
- }]\r
-});\r
- * </code></pre> \r
- */\r
-Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
-\r
- /**\r
- * @cfg {Object} fieldCls\r
- * The Class to use to construct each field item within this menu\r
- * Defaults to:<pre>\r
- * fieldCls : Ext.form.NumberField\r
- * </pre>\r
- */\r
- fieldCls : Ext.form.NumberField,\r
- /**\r
- * @cfg {Object} fieldCfg\r
- * The default configuration options for any field item unless superseded\r
- * by the <code>{@link #fields}</code> configuration.\r
- * Defaults to:<pre>\r
- * fieldCfg : {}\r
- * </pre>\r
- * Example usage:\r
- * <pre><code>\r
-fieldCfg : {\r
- width: 150,\r
-},\r
- * </code></pre>\r
- */\r
- /**\r
- * @cfg {Object} fields\r
- * The field items may be configured individually\r
- * Defaults to <tt>undefined</tt>.\r
- * Example usage:\r
- * <pre><code>\r
-fields : {\r
- gt: { // override fieldCfg options\r
- width: 200,\r
- fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}\r
- }\r
-},\r
- * </code></pre>\r
- */\r
- /**\r
- * @cfg {Object} iconCls\r
- * The iconCls to be applied to each comparator field item.\r
- * Defaults to:<pre>\r
-iconCls : {\r
- gt : 'ux-rangemenu-gt',\r
- lt : 'ux-rangemenu-lt',\r
- eq : 'ux-rangemenu-eq'\r
-}\r
- * </pre>\r
- */\r
- iconCls : {\r
- gt : 'ux-rangemenu-gt',\r
- lt : 'ux-rangemenu-lt',\r
- eq : 'ux-rangemenu-eq'\r
- },\r
-\r
- /**\r
- * @cfg {Object} menuItemCfgs\r
- * Default configuration options for each menu item\r
- * Defaults to:<pre>\r
-menuItemCfgs : {\r
- emptyText: 'Enter Filter Text...',\r
- selectOnFocus: true,\r
- width: 125\r
-}\r
- * </pre>\r
- */\r
- menuItemCfgs : {\r
- emptyText: 'Enter Filter Text...',\r
- selectOnFocus: true,\r
- width: 125\r
- },\r
-\r
- /**\r
- * @cfg {Array} menuItems\r
- * The items to be shown in this menu. Items are added to the menu\r
- * according to their position within this array. Defaults to:<pre>\r
- * menuItems : ['lt','gt','-','eq']\r
- * </pre>\r
- */\r
- menuItems : ['lt', 'gt', '-', 'eq'],\r
-\r
- /** \r
- * @private\r
- * Template method that is to initialize the filter and install required menu items.\r
- */\r
- init : function (config) {\r
- // if a menu already existed, do clean up first\r
- if (this.menu){\r
- this.menu.destroy();\r
- } \r
- this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {\r
- // pass along filter configs to the menu\r
- fieldCfg : this.fieldCfg || {},\r
- fieldCls : this.fieldCls,\r
- fields : this.fields || {},\r
- iconCls: this.iconCls,\r
- menuItemCfgs: this.menuItemCfgs,\r
- menuItems: this.menuItems,\r
- updateBuffer: this.updateBuffer\r
- }));\r
- // relay the event fired by the menu\r
- this.menu.on('update', this.fireUpdate, this);\r
- },\r
- \r
- /**\r
- * @private\r
- * Template method that is to get and return the value of the filter.\r
- * @return {String} The value of this filter\r
- */\r
- getValue : function () {\r
- return this.menu.getValue();\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to set the value of the filter.\r
- * @param {Object} value The value to set the filter\r
- */ \r
- setValue : function (value) {\r
- this.menu.setValue(value);\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to return <tt>true</tt> if the filter\r
- * has enough configuration information to be activated.\r
- * @return {Boolean}\r
- */\r
- isActivatable : function () {\r
- var values = this.getValue();\r
- for (key in values) {\r
- if (values[key] !== undefined) {\r
- return true;\r
- }\r
- }\r
- return false;\r
- },\r
- \r
- /**\r
- * @private\r
- * Template method that is to get and return serialized filter data for\r
- * transmission to the server.\r
- * @return {Object/Array} An object or collection of objects containing\r
- * key value pairs representing the current configuration of the filter.\r
- */\r
- getSerialArgs : function () {\r
- var key,\r
- args = [],\r
- values = this.menu.getValue();\r
- for (key in values) {\r
- args.push({\r
- type: 'numeric',\r
- comparison: key,\r
- value: values[key]\r
- });\r
- }\r
- return args;\r
- },\r
-\r
- /**\r
- * Template method that is to validate the provided Ext.data.Record\r
- * against the filters configuration.\r
- * @param {Ext.data.Record} record The record to validate\r
- * @return {Boolean} true if the record is valid within the bounds\r
- * of the filter, false otherwise.\r
- */\r
- validateRecord : function (record) {\r
- var val = record.get(this.dataIndex),\r
- values = this.getValue();\r
- if (values.eq !== undefined && val != values.eq) {\r
- return false;\r
- }\r
- if (values.lt !== undefined && val >= values.lt) {\r
- return false;\r
- }\r
- if (values.gt !== undefined && val <= values.gt) {\r
- return false;\r
- }\r
- return true;\r
- }\r
-});/** \r
- * @class Ext.ux.grid.filter.StringFilter\r
- * @extends Ext.ux.grid.filter.Filter\r
- * Filter by a configurable Ext.form.TextField\r
- * <p><b><u>Example Usage:</u></b></p>\r
- * <pre><code> \r
-var filters = new Ext.ux.grid.GridFilters({\r
- ...\r
- filters: [{\r
- // required configs\r
- type: 'string',\r
- dataIndex: 'name',\r
- \r
- // optional configs\r
- value: 'foo',\r
- active: true, // default is false\r
- iconCls: 'ux-gridfilter-text-icon' // default\r
- // any Ext.form.TextField configs accepted\r
- }]\r
-});\r
- * </code></pre>\r
- */\r
-Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
-\r
- /**\r
- * @cfg {String} iconCls\r
- * The iconCls to be applied to the menu item.\r
- * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.\r
- */\r
- iconCls : 'ux-gridfilter-text-icon',\r
-\r
- emptyText: 'Enter Filter Text...',\r
- selectOnFocus: true,\r
- width: 125,\r
- \r
- /** \r
- * @private\r
- * Template method that is to initialize the filter and install required menu items.\r
- */\r
- init : function (config) {\r
- Ext.applyIf(config, {\r
- enableKeyEvents: true,\r
- iconCls: this.iconCls,\r
- listeners: {\r
- scope: this,\r
- keyup: this.onInputKeyUp\r
- }\r
- });\r
-\r
- this.inputItem = new Ext.form.TextField(config); \r
- this.menu.add(this.inputItem);\r
- this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);\r
- },\r
- \r
- /**\r
- * @private\r
- * Template method that is to get and return the value of the filter.\r
- * @return {String} The value of this filter\r
- */\r
- getValue : function () {\r
- return this.inputItem.getValue();\r
- },\r
- \r
- /**\r
- * @private\r
- * Template method that is to set the value of the filter.\r
- * @param {Object} value The value to set the filter\r
- */ \r
- setValue : function (value) {\r
- this.inputItem.setValue(value);\r
- this.fireEvent('update', this);\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to return <tt>true</tt> if the filter\r
- * has enough configuration information to be activated.\r
- * @return {Boolean}\r
- */\r
- isActivatable : function () {\r
- return this.inputItem.getValue().length > 0;\r
- },\r
-\r
- /**\r
- * @private\r
- * Template method that is to get and return serialized filter data for\r
- * transmission to the server.\r
- * @return {Object/Array} An object or collection of objects containing\r
- * key value pairs representing the current configuration of the filter.\r
- */\r
- getSerialArgs : function () {\r
- return {type: 'string', value: this.getValue()};\r
- },\r
-\r
- /**\r
- * Template method that is to validate the provided Ext.data.Record\r
- * against the filters configuration.\r
- * @param {Ext.data.Record} record The record to validate\r
- * @return {Boolean} true if the record is valid within the bounds\r
- * of the filter, false otherwise.\r
- */\r
- validateRecord : function (record) {\r
- var val = record.get(this.dataIndex);\r
-\r
- if(typeof val != 'string') {\r
- return (this.getValue().length === 0);\r
- }\r
-\r
- return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;\r
- },\r
- \r
- /** \r
- * @private\r
- * Handler method called when there is a keyup event on this.inputItem\r
- */\r
- onInputKeyUp : function (field, e) {\r
- var k = e.getKey();\r
- if (k == e.RETURN && field.isValid()) {\r
- e.stopEvent();\r
- this.menu.hide(true);\r
- return;\r
- }\r
- // restart the timer\r
- this.updateTask.delay(this.updateBuffer);\r
- }\r
-});\r
-Ext.namespace('Ext.ux.menu');\r
-\r
-/** \r
- * @class Ext.ux.menu.ListMenu\r
- * @extends Ext.menu.Menu\r
- * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.\r
- * Although not listed as configuration options for this class, this class\r
- * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.\r
- */\r
-Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {\r
- /**\r
- * @cfg {String} labelField\r
- * Defaults to 'text'.\r
- */\r
- labelField : 'text',\r
- /**\r
- * @cfg {String} paramPrefix\r
- * Defaults to 'Loading...'.\r
- */\r
- loadingText : 'Loading...',\r
- /**\r
- * @cfg {Boolean} loadOnShow\r
- * Defaults to true.\r
- */\r
- loadOnShow : true,\r
- /**\r
- * @cfg {Boolean} single\r
- * Specify true to group all items in this list into a single-select\r
- * radio button group. Defaults to false.\r
- */\r
- single : false,\r
-\r
- constructor : function (cfg) {\r
- this.selected = [];\r
- this.addEvents(\r
- /**\r
- * @event checkchange\r
- * Fires when there is a change in checked items from this list\r
- * @param {Object} item Ext.menu.CheckItem\r
- * @param {Object} checked The checked value that was set\r
- */\r
- 'checkchange'\r
- );\r
- \r
- Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});\r
- \r
- if(!cfg.store && cfg.options){\r
- var options = [];\r
- for(var i=0, len=cfg.options.length; i<len; i++){\r
- var value = cfg.options[i];\r
- switch(Ext.type(value)){\r
- case 'array': options.push(value); break;\r
- case 'object': options.push([value.id, value[this.labelField]]); break;\r
- case 'string': options.push([value, value]); break;\r
- }\r
- }\r
- \r
- this.store = new Ext.data.Store({\r
- reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),\r
- data: options,\r
- listeners: {\r
- 'load': this.onLoad,\r
- scope: this\r
- }\r
- });\r
- this.loaded = true;\r
- } else {\r
- this.add({text: this.loadingText, iconCls: 'loading-indicator'});\r
- this.store.on('load', this.onLoad, this);\r
- }\r
- },\r
-\r
- destroy : function () {\r
- if (this.store) {\r
- this.store.destroy(); \r
- }\r
- Ext.ux.menu.ListMenu.superclass.destroy.call(this);\r
- },\r
-\r
- /**\r
- * Lists will initially show a 'loading' item while the data is retrieved from the store.\r
- * In some cases the loaded data will result in a list that goes off the screen to the\r
- * right (as placement calculations were done with the loading item). This adapter will\r
- * allow show to be called with no arguments to show with the previous arguments and\r
- * thus recalculate the width and potentially hang the menu from the left.\r
- */\r
- show : function () {\r
- var lastArgs = null;\r
- return function(){\r
- if(arguments.length === 0){\r
- Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);\r
- } else {\r
- lastArgs = arguments;\r
- if (this.loadOnShow && !this.loaded) {\r
- this.store.load();\r
- }\r
- Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);\r
- }\r
- };\r
- }(),\r
- \r
- /** @private */\r
- onLoad : function (store, records) {\r
- var visible = this.isVisible();\r
- this.hide(false);\r
- \r
- this.removeAll(true);\r
- \r
- var gid = this.single ? Ext.id() : null;\r
- for(var i=0, len=records.length; i<len; i++){\r
- var item = new Ext.menu.CheckItem({\r
- text: records[i].get(this.labelField), \r
- group: gid,\r
- checked: this.selected.indexOf(records[i].id) > -1,\r
- hideOnClick: false});\r
- \r
- item.itemId = records[i].id;\r
- item.on('checkchange', this.checkChange, this);\r
- \r
- this.add(item);\r
- }\r
- \r
- this.loaded = true;\r
- \r
- if (visible) {\r
- this.show();\r
- } \r
- this.fireEvent('load', this, records);\r
- },\r
-\r
- /**\r
- * Get the selected items.\r
- * @return {Array} selected\r
- */\r
- getSelected : function () {\r
- return this.selected;\r
- },\r
- \r
- /** @private */\r
- setSelected : function (value) {\r
- value = this.selected = [].concat(value);\r
-\r
- if (this.loaded) {\r
- this.items.each(function(item){\r
- item.setChecked(false, true);\r
- for (var i = 0, len = value.length; i < len; i++) {\r
- if (item.itemId == value[i]) {\r
- item.setChecked(true, true);\r
- }\r
- }\r
- }, this);\r
- }\r
- },\r
- \r
- /**\r
- * Handler for the 'checkchange' event from an check item in this menu\r
- * @param {Object} item Ext.menu.CheckItem\r
- * @param {Object} checked The checked value that was set\r
- */\r
- checkChange : function (item, checked) {\r
- var value = [];\r
- this.items.each(function(item){\r
- if (item.checked) {\r
- value.push(item.itemId);\r
- }\r
- },this);\r
- this.selected = value;\r
- \r
- this.fireEvent('checkchange', item, checked);\r
- } \r
-});Ext.ns('Ext.ux.menu');\r
-\r
-/** \r
- * @class Ext.ux.menu.RangeMenu\r
- * @extends Ext.menu.Menu\r
- * Custom implementation of Ext.menu.Menu that has preconfigured\r
- * items for gt, lt, eq.\r
- * <p><b><u>Example Usage:</u></b></p>\r
- * <pre><code> \r
-\r
- * </code></pre> \r
- */\r
-Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {\r
-\r
- constructor : function (config) {\r
-\r
- Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);\r
-\r
- this.addEvents(\r
- /**\r
- * @event update\r
- * Fires when a filter configuration has changed\r
- * @param {Ext.ux.grid.filter.Filter} this The filter object.\r
- */\r
- 'update'\r
- );\r
- \r
- this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);\r
- \r
- var i, len, item, cfg, Cls;\r
-\r
- for (i = 0, len = this.menuItems.length; i < len; i++) {\r
- item = this.menuItems[i];\r
- if (item !== '-') {\r
- // defaults\r
- cfg = {\r
- itemId: 'range-' + item,\r
- enableKeyEvents: true,\r
- iconCls: this.iconCls[item] || 'no-icon',\r
- listeners: {\r
- scope: this,\r
- keyup: this.onInputKeyUp\r
- }\r
- };\r
- Ext.apply(\r
- cfg,\r
- // custom configs\r
- Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),\r
- // configurable defaults\r
- this.menuItemCfgs\r
- );\r
- Cls = cfg.fieldCls || this.fieldCls;\r
- item = this.fields[item] = new Cls(cfg);\r
- }\r
- this.add(item);\r
- }\r
- },\r
-\r
- /**\r
- * @private\r
- * called by this.updateTask\r
- */\r
- fireUpdate : function () {\r
- this.fireEvent('update', this);\r
- },\r
- \r
- /**\r
- * Get and return the value of the filter.\r
- * @return {String} The value of this filter\r
- */\r
- getValue : function () {\r
- var result = {}, key, field;\r
- for (key in this.fields) {\r
- field = this.fields[key];\r
- if (field.isValid() && String(field.getValue()).length > 0) {\r
- result[key] = field.getValue();\r
- }\r
- }\r
- return result;\r
- },\r
- \r
- /**\r
- * Set the value of this menu and fires the 'update' event.\r
- * @param {Object} data The data to assign to this menu\r
- */ \r
- setValue : function (data) {\r
- var key;\r
- for (key in this.fields) {\r
- this.fields[key].setValue(data[key] !== undefined ? data[key] : '');\r
- }\r
- this.fireEvent('update', this);\r
- },\r
-\r
- /** \r
- * @private\r
- * Handler method called when there is a keyup event on an input\r
- * item of this menu.\r
- */\r
- onInputKeyUp : function (field, e) {\r
- var k = e.getKey();\r
- if (k == e.RETURN && field.isValid()) {\r
- e.stopEvent();\r
- this.hide(true);\r
- return;\r
- }\r
- \r
- if (field == this.fields.eq) {\r
- if (this.fields.gt) {\r
- this.fields.gt.setValue(null);\r
- }\r
- if (this.fields.lt) {\r
- this.fields.lt.setValue(null);\r
- }\r
- }\r
- else {\r
- this.fields.eq.setValue(null);\r
- }\r
- \r
- // restart the timer\r
- this.updateTask.delay(this.updateBuffer);\r
- }\r
-});\r
-Ext.ns('Ext.ux.grid');\r
-\r
-/**\r
- * @class Ext.ux.grid.GroupSummary\r
- * @extends Ext.util.Observable\r
- * A GridPanel plugin that enables dynamic column calculations and a dynamically\r
- * updated grouped summary row.\r
- */\r
-Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {\r
- /**\r
- * @cfg {Function} summaryRenderer Renderer example:<pre><code>\r
-summaryRenderer: function(v, params, data){\r
- return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');\r
-},\r
- * </code></pre>\r
- */\r
- /**\r
- * @cfg {String} summaryType (Optional) The type of\r
- * calculation to be used for the column. For options available see\r
- * {@link #Calculations}.\r
- */\r
-\r
- constructor : function(config){\r
- Ext.apply(this, config);\r
- Ext.ux.grid.GroupSummary.superclass.constructor.call(this);\r
- },\r
- init : function(grid){\r
- this.grid = grid;\r
- var v = this.view = grid.getView();\r
- v.doGroupEnd = this.doGroupEnd.createDelegate(this);\r
-\r
- v.afterMethod('onColumnWidthUpdated', this.doWidth, this);\r
- v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);\r
- v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);\r
- v.afterMethod('onUpdate', this.doUpdate, this);\r
- v.afterMethod('onRemove', this.doRemove, this);\r
-\r
- if(!this.rowTpl){\r
- this.rowTpl = new Ext.Template(\r
- '<div class="x-grid3-summary-row" style="{tstyle}">',\r
- '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',\r
- '<tbody><tr>{cells}</tr></tbody>',\r
- '</table></div>'\r
- );\r
- this.rowTpl.disableFormats = true;\r
- }\r
- this.rowTpl.compile();\r
-\r
- if(!this.cellTpl){\r
- this.cellTpl = new Ext.Template(\r
- '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',\r
- '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',\r
- "</td>"\r
- );\r
- this.cellTpl.disableFormats = true;\r
- }\r
- this.cellTpl.compile();\r
- },\r
-\r
- /**\r
- * Toggle the display of the summary row on/off\r
- * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.\r
- */\r
- toggleSummaries : function(visible){\r
- var el = this.grid.getGridEl();\r
- if(el){\r
- if(visible === undefined){\r
- visible = el.hasClass('x-grid-hide-summary');\r
- }\r
- el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');\r
- }\r
- },\r
-\r
- renderSummary : function(o, cs){\r
- cs = cs || this.view.getColumnData();\r
- var cfg = this.grid.getColumnModel().config,\r
- buf = [], c, p = {}, cf, last = cs.length-1;\r
- for(var i = 0, len = cs.length; i < len; i++){\r
- c = cs[i];\r
- cf = cfg[i];\r
- p.id = c.id;\r
- p.style = c.style;\r
- p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');\r
- if(cf.summaryType || cf.summaryRenderer){\r
- p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);\r
- }else{\r
- p.value = '';\r
- }\r
- if(p.value == undefined || p.value === "") p.value = " ";\r
- buf[buf.length] = this.cellTpl.apply(p);\r
- }\r
-\r
- return this.rowTpl.apply({\r
- tstyle: 'width:'+this.view.getTotalWidth()+';',\r
- cells: buf.join('')\r
- });\r
- },\r
-\r
- /**\r
- * @private\r
- * @param {Object} rs\r
- * @param {Object} cs\r
- */\r
- calculate : function(rs, cs){\r
- var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;\r
- for(var j = 0, jlen = rs.length; j < jlen; j++){\r
- r = rs[j];\r
- for(var i = 0, len = cs.length; i < len; i++){\r
- c = cs[i];\r
- cf = cfg[i];\r
- if(cf.summaryType){\r
- data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);\r
- }\r
- }\r
- }\r
- return data;\r
- },\r
-\r
- doGroupEnd : function(buf, g, cs, ds, colCount){\r
- var data = this.calculate(g.rs, cs);\r
- buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');\r
- },\r
-\r
- doWidth : function(col, w, tw){\r
- var gs = this.view.getGroups(), s;\r
- for(var i = 0, len = gs.length; i < len; i++){\r
- s = gs[i].childNodes[2];\r
- s.style.width = tw;\r
- s.firstChild.style.width = tw;\r
- s.firstChild.rows[0].childNodes[col].style.width = w;\r
- }\r
- },\r
-\r
- doAllWidths : function(ws, tw){\r
- var gs = this.view.getGroups(), s, cells, wlen = ws.length;\r
- for(var i = 0, len = gs.length; i < len; i++){\r
- s = gs[i].childNodes[2];\r
- s.style.width = tw;\r
- s.firstChild.style.width = tw;\r
- cells = s.firstChild.rows[0].childNodes;\r
- for(var j = 0; j < wlen; j++){\r
- cells[j].style.width = ws[j];\r
- }\r
- }\r
- },\r
-\r
- doHidden : function(col, hidden, tw){\r
- var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';\r
- for(var i = 0, len = gs.length; i < len; i++){\r
- s = gs[i].childNodes[2];\r
- s.style.width = tw;\r
- s.firstChild.style.width = tw;\r
- s.firstChild.rows[0].childNodes[col].style.display = display;\r
- }\r
- },\r
-\r
- // Note: requires that all (or the first) record in the\r
- // group share the same group value. Returns false if the group\r
- // could not be found.\r
- refreshSummary : function(groupValue){\r
- return this.refreshSummaryById(this.view.getGroupId(groupValue));\r
- },\r
-\r
- getSummaryNode : function(gid){\r
- var g = Ext.fly(gid, '_gsummary');\r
- if(g){\r
- return g.down('.x-grid3-summary-row', true);\r
- }\r
- return null;\r
- },\r
-\r
- refreshSummaryById : function(gid){\r
- var g = Ext.getDom(gid);\r
- if(!g){\r
- return false;\r
- }\r
- var rs = [];\r
- this.grid.getStore().each(function(r){\r
- if(r._groupId == gid){\r
- rs[rs.length] = r;\r
- }\r
- });\r
- var cs = this.view.getColumnData(),\r
- data = this.calculate(rs, cs),\r
- markup = this.renderSummary({data: data}, cs),\r
- existing = this.getSummaryNode(gid);\r
- \r
- if(existing){\r
- g.removeChild(existing);\r
- }\r
- Ext.DomHelper.append(g, markup);\r
- return true;\r
- },\r
-\r
- doUpdate : function(ds, record){\r
- this.refreshSummaryById(record._groupId);\r
- },\r
-\r
- doRemove : function(ds, record, index, isUpdate){\r
- if(!isUpdate){\r
- this.refreshSummaryById(record._groupId);\r
- }\r
- },\r
-\r
- /**\r
- * Show a message in the summary row.\r
- * <pre><code>\r
-grid.on('afteredit', function(){\r
- var groupValue = 'Ext Forms: Field Anchoring';\r
- summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
-});\r
- * </code></pre>\r
- * @param {String} groupValue\r
- * @param {String} msg Text to use as innerHTML for the summary row.\r
- */\r
- showSummaryMsg : function(groupValue, msg){\r
- var gid = this.view.getGroupId(groupValue),\r
- node = this.getSummaryNode(gid);\r
- if(node){\r
- node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';\r
- }\r
- }\r
-});\r
-\r
-//backwards compat\r
-Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;\r
-\r
-\r
-/**\r
- * Calculation types for summary row:</p><div class="mdetail-params"><ul>\r
- * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>\r
- * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>\r
- * </ul></div>\r
- * <p>Custom calculations may be implemented. An example of\r
- * custom <code>summaryType=totalCost</code>:</p><pre><code>\r
-// define a custom summary function\r
-Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){\r
- return v + (record.data.estimate * record.data.rate);\r
-};\r
- * </code></pre>\r
- * @property Calculations\r
- */\r
-\r
-Ext.ux.grid.GroupSummary.Calculations = {\r
- 'sum' : function(v, record, field){\r
- return v + (record.data[field]||0);\r
- },\r
-\r
- 'count' : function(v, record, field, data){\r
- return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);\r
- },\r
-\r
- 'max' : function(v, record, field, data){\r
- var v = record.data[field];\r
- var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];\r
- return v > max ? (data[field+'max'] = v) : max;\r
- },\r
-\r
- 'min' : function(v, record, field, data){\r
- var v = record.data[field];\r
- var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];\r
- return v < min ? (data[field+'min'] = v) : min;\r
- },\r
-\r
- 'average' : function(v, record, field, data){\r
- var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);\r
- var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));\r
- return t === 0 ? 0 : t / c;\r
- }\r
-};\r
-Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;\r
-\r
-/**\r
- * @class Ext.ux.grid.HybridSummary\r
- * @extends Ext.ux.grid.GroupSummary\r
- * Adds capability to specify the summary data for the group via json as illustrated here:\r
- * <pre><code>\r
-{\r
- data: [\r
- {\r
- projectId: 100, project: 'House',\r
- taskId: 112, description: 'Paint',\r
- estimate: 6, rate: 150,\r
- due:'06/24/2007'\r
- },\r
- ...\r
- ],\r
-\r
- summaryData: {\r
- 'House': {\r
- description: 14, estimate: 9,\r
- rate: 99, due: new Date(2009, 6, 29),\r
- cost: 999\r
- }\r
- }\r
-}\r
- * </code></pre>\r
- *\r
- */\r
-Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {\r
- /**\r
- * @private\r
- * @param {Object} rs\r
- * @param {Object} cs\r
- */\r
- calculate : function(rs, cs){\r
- var gcol = this.view.getGroupField(),\r
- gvalue = rs[0].data[gcol],\r
- gdata = this.getSummaryData(gvalue);\r
- return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);\r
- },\r
-\r
- /**\r
- * <pre><code>\r
-grid.on('afteredit', function(){\r
- var groupValue = 'Ext Forms: Field Anchoring';\r
- summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
- setTimeout(function(){ // simulate server call\r
- // HybridSummary class implements updateSummaryData\r
- summary.updateSummaryData(groupValue,\r
- // create data object based on configured dataIndex\r
- {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});\r
- }, 2000);\r
-});\r
- * </code></pre>\r
- * @param {String} groupValue\r
- * @param {Object} data data object\r
- * @param {Boolean} skipRefresh (Optional) Defaults to false\r
- */\r
- updateSummaryData : function(groupValue, data, skipRefresh){\r
- var json = this.grid.getStore().reader.jsonData;\r
- if(!json.summaryData){\r
- json.summaryData = {};\r
- }\r
- json.summaryData[groupValue] = data;\r
- if(!skipRefresh){\r
- this.refreshSummary(groupValue);\r
- }\r
- },\r
-\r
- /**\r
- * Returns the summaryData for the specified groupValue or null.\r
- * @param {String} groupValue\r
- * @return {Object} summaryData\r
- */\r
- getSummaryData : function(groupValue){\r
- var json = this.grid.getStore().reader.jsonData;\r
- if(json && json.summaryData){\r
- return json.summaryData[groupValue];\r
- }\r
- return null;\r
- }\r
-});\r
-\r
-//backwards compat\r
-Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;\r
-Ext.ux.GroupTab = Ext.extend(Ext.Container, {\r
- mainItem: 0,\r
- \r
- expanded: true,\r
- \r
- deferredRender: true,\r
- \r
- activeTab: null,\r
- \r
- idDelimiter: '__',\r
- \r
- headerAsText: false,\r
- \r
- frame: false,\r
- \r
- hideBorders: true,\r
- \r
- initComponent: function(config){\r
- Ext.apply(this, config);\r
- this.frame = false;\r
- \r
- Ext.ux.GroupTab.superclass.initComponent.call(this);\r
- \r
- this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');\r
- \r
- this.setLayout(new Ext.layout.CardLayout({\r
- deferredRender: this.deferredRender\r
- }));\r
- \r
- if (!this.stack) {\r
- this.stack = Ext.TabPanel.AccessStack();\r
- }\r
- \r
- this.initItems();\r
- \r
- this.on('beforerender', function(){\r
- this.groupEl = this.ownerCt.getGroupEl(this);\r
- }, this);\r
- \r
- this.on('add', this.onAdd, this, {\r
- target: this\r
- });\r
- this.on('remove', this.onRemove, this, {\r
- target: this\r
- });\r
- \r
- if (this.mainItem !== undefined) {\r
- var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);\r
- delete this.mainItem;\r
- this.setMainItem(item);\r
- }\r
- },\r
- \r
- /**\r
- * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which\r
- * can return false to cancel the tab change.\r
- * @param {String/Panel} tab The id or tab Panel to activate\r
- */\r
- setActiveTab : function(item){\r
- item = this.getComponent(item);\r
- if(!item){\r
- return false;\r
- }\r
- if(!this.rendered){\r
- this.activeTab = item;\r
- return true;\r
- }\r
- if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){\r
- if(this.activeTab && this.activeTab != this.mainItem){\r
- var oldEl = this.getTabEl(this.activeTab);\r
- if(oldEl){\r
- Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
- }\r
- }\r
- var el = this.getTabEl(item);\r
- Ext.fly(el).addClass('x-grouptabs-strip-active');\r
- this.activeTab = item;\r
- this.stack.add(item);\r
-\r
- this.layout.setActiveItem(item);\r
- if(this.layoutOnTabChange && item.doLayout){\r
- item.doLayout();\r
- }\r
- if(this.scrolling){\r
- this.scrollToTab(item, this.animScroll);\r
- }\r
-\r
- this.fireEvent('tabchange', this, item);\r
- return true;\r
- }\r
- return false;\r
- },\r
- \r
- getTabEl: function(item){\r
- if (item == this.mainItem) {\r
- return this.groupEl;\r
- }\r
- return Ext.TabPanel.prototype.getTabEl.call(this, item);\r
- },\r
- \r
- onRender: function(ct, position){\r
- Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);\r
- \r
- this.strip = Ext.fly(this.groupEl).createChild({\r
- tag: 'ul',\r
- cls: 'x-grouptabs-sub'\r
- });\r
-\r
- this.tooltip = new Ext.ToolTip({\r
- target: this.groupEl,\r
- delegate: 'a.x-grouptabs-text',\r
- trackMouse: true,\r
- renderTo: document.body,\r
- listeners: {\r
- beforeshow: function(tip) {\r
- var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)\r
- ? this.mainItem\r
- : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);\r
-\r
- if(!item.tabTip) {\r
- return false;\r
- }\r
- tip.body.dom.innerHTML = item.tabTip;\r
- },\r
- scope: this\r
- }\r
- });\r
- \r
- if (!this.itemTpl) {\r
- var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');\r
- tt.disableFormats = true;\r
- tt.compile();\r
- Ext.ux.GroupTab.prototype.itemTpl = tt;\r
- }\r
- \r
- this.items.each(this.initTab, this);\r
- },\r
- \r
- afterRender: function(){\r
- Ext.ux.GroupTab.superclass.afterRender.call(this);\r
- \r
- if (this.activeTab !== undefined) {\r
- var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);\r
- delete this.activeTab;\r
- this.setActiveTab(item);\r
- }\r
- },\r
- \r
- // private\r
- initTab: function(item, index){\r
- var before = this.strip.dom.childNodes[index];\r
- var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);\r
- \r
- if (item === this.mainItem) {\r
- item.tabEl = this.groupEl;\r
- p.cls += ' x-grouptabs-main-item';\r
- }\r
- \r
- var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
- \r
- item.tabEl = item.tabEl || el;\r
- \r
- item.on('disable', this.onItemDisabled, this);\r
- item.on('enable', this.onItemEnabled, this);\r
- item.on('titlechange', this.onItemTitleChanged, this);\r
- item.on('iconchange', this.onItemIconChanged, this);\r
- item.on('beforeshow', this.onBeforeShowItem, this);\r
- },\r
- \r
- setMainItem: function(item){\r
- item = this.getComponent(item);\r
- if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {\r
- return;\r
- }\r
- \r
- this.mainItem = item;\r
- },\r
- \r
- getMainItem: function(){\r
- return this.mainItem || null;\r
- },\r
- \r
- // private\r
- onBeforeShowItem: function(item){\r
- if (item != this.activeTab) {\r
- this.setActiveTab(item);\r
- return false;\r
- }\r
- },\r
- \r
- // private\r
- onAdd: function(gt, item, index){\r
- if (this.rendered) {\r
- this.initTab.call(this, item, index);\r
- }\r
- },\r
- \r
- // private\r
- onRemove: function(tp, item){\r
- Ext.destroy(Ext.get(this.getTabEl(item)));\r
- this.stack.remove(item);\r
- item.un('disable', this.onItemDisabled, this);\r
- item.un('enable', this.onItemEnabled, this);\r
- item.un('titlechange', this.onItemTitleChanged, this);\r
- item.un('iconchange', this.onItemIconChanged, this);\r
- item.un('beforeshow', this.onBeforeShowItem, this);\r
- if (item == this.activeTab) {\r
- var next = this.stack.next();\r
- if (next) {\r
- this.setActiveTab(next);\r
- }\r
- else if (this.items.getCount() > 0) {\r
- this.setActiveTab(0);\r
- }\r
- else {\r
- this.activeTab = null;\r
- }\r
- }\r
- },\r
- \r
- // private\r
- onBeforeAdd: function(item){\r
- var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);\r
- if (existing) {\r
- this.setActiveTab(item);\r
- return false;\r
- }\r
- Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);\r
- var es = item.elements;\r
- item.elements = es ? es.replace(',header', '') : es;\r
- item.border = (item.border === true);\r
- },\r
- \r
- // private\r
- onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,\r
- onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,\r
- \r
- // private\r
- onItemTitleChanged: function(item){\r
- var el = this.getTabEl(item);\r
- if (el) {\r
- Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;\r
- }\r
- },\r
- \r
- //private\r
- onItemIconChanged: function(item, iconCls, oldCls){\r
- var el = this.getTabEl(item);\r
- if (el) {\r
- Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);\r
- }\r
- },\r
- \r
- beforeDestroy: function(){\r
- Ext.TabPanel.prototype.beforeDestroy.call(this);\r
- this.tooltip.destroy();\r
- }\r
-});\r
-\r
-Ext.reg('grouptab', Ext.ux.GroupTab);\r
-Ext.ns('Ext.ux');\r
-\r
-Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {\r
- tabPosition: 'left',\r
- \r
- alternateColor: false,\r
- \r
- alternateCls: 'x-grouptabs-panel-alt',\r
- \r
- defaultType: 'grouptab',\r
- \r
- deferredRender: false,\r
- \r
- activeGroup : null,\r
- \r
- initComponent: function(){\r
- Ext.ux.GroupTabPanel.superclass.initComponent.call(this);\r
- \r
- this.addEvents(\r
- 'beforegroupchange',\r
- 'groupchange'\r
- );\r
- this.elements = 'body,header';\r
- this.stripTarget = 'header';\r
- \r
- this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';\r
- \r
- this.addClass('x-grouptabs-panel');\r
- \r
- if (this.tabStyle && this.tabStyle != '') {\r
- this.addClass('x-grouptabs-panel-' + this.tabStyle);\r
- }\r
- \r
- if (this.alternateColor) {\r
- this.addClass(this.alternateCls);\r
- }\r
- \r
- this.on('beforeadd', function(gtp, item, index){\r
- this.initGroup(item, index);\r
- }); \r
- },\r
- \r
- initEvents : function() {\r
- this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);\r
- },\r
- \r
- onRender: function(ct, position){\r
- Ext.TabPanel.superclass.onRender.call(this, ct, position);\r
- if(this.plain){\r
- var pos = this.tabPosition == 'top' ? 'header' : 'footer';\r
- this[pos].addClass('x-tab-panel-'+pos+'-plain');\r
- }\r
-\r
- var st = this[this.stripTarget];\r
-\r
- this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{\r
- tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});\r
-\r
- var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);\r
- this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\r
-\r
- this.header.addClass('x-grouptabs-panel-header');\r
- this.bwrap.addClass('x-grouptabs-bwrap');\r
- this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');\r
-\r
- if (!this.groupTpl) {\r
- var tt = new Ext.Template(\r
- '<li class="{cls}" id="{id}">', \r
- '<a class="x-grouptabs-expand" onclick="return false;"></a>', \r
- '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',\r
- '<span>{text}</span></a>', \r
- '</li>'\r
- );\r
- tt.disableFormats = true;\r
- tt.compile();\r
- Ext.ux.GroupTabPanel.prototype.groupTpl = tt;\r
- }\r
- this.items.each(this.initGroup, this);\r
- },\r
- \r
- afterRender: function(){\r
- Ext.ux.GroupTabPanel.superclass.afterRender.call(this);\r
- \r
- this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({\r
- cls: 'x-tab-joint'\r
- });\r
- \r
- this.addClass('x-tab-panel-' + this.tabPosition);\r
- this.header.setWidth(this.tabWidth);\r
- \r
- if (this.activeGroup !== undefined) {\r
- var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);\r
- delete this.activeGroup;\r
- this.setActiveGroup(group);\r
- group.setActiveTab(group.getMainItem());\r
- }\r
- },\r
-\r
- getGroupEl : Ext.TabPanel.prototype.getTabEl,\r
- \r
- // private\r
- findTargets: function(e){\r
- var item = null,\r
- itemEl = e.getTarget('li', this.strip);\r
- if (itemEl) {\r
- item = this.findById(itemEl.id.split(this.idDelimiter)[1]);\r
- if (item.disabled) {\r
- return {\r
- expand: null,\r
- item: null,\r
- el: null\r
- };\r
- }\r
- }\r
- return {\r
- expand: e.getTarget('.x-grouptabs-expand', this.strip),\r
- isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),\r
- item: item,\r
- el: itemEl\r
- };\r
- },\r
- \r
- // private\r
- onStripMouseDown: function(e){\r
- if (e.button != 0) {\r
- return;\r
- }\r
- e.preventDefault();\r
- var t = this.findTargets(e);\r
- if (t.expand) {\r
- this.toggleGroup(t.el);\r
- }\r
- else if (t.item) {\r
- if(t.isGroup) {\r
- t.item.setActiveTab(t.item.getMainItem());\r
- }\r
- else {\r
- t.item.ownerCt.setActiveTab(t.item);\r
- }\r
- }\r
- },\r
- \r
- expandGroup: function(groupEl){\r
- if(groupEl.isXType) {\r
- groupEl = this.getGroupEl(groupEl);\r
- }\r
- Ext.fly(groupEl).addClass('x-grouptabs-expanded');\r
- this.syncTabJoint();\r
- },\r
- \r
- toggleGroup: function(groupEl){\r
- if(groupEl.isXType) {\r
- groupEl = this.getGroupEl(groupEl);\r
- } \r
- Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');\r
- this.syncTabJoint();\r
- }, \r
-\r
- collapseGroup: function(groupEl){\r
- if(groupEl.isXType) {\r
- groupEl = this.getGroupEl(groupEl);\r
- }\r
- Ext.fly(groupEl).removeClass('x-grouptabs-expanded');\r
- this.syncTabJoint();\r
- },\r
- \r
- syncTabJoint: function(groupEl){\r
- if (!this.tabJoint) {\r
- return;\r
- }\r
- \r
- groupEl = groupEl || this.getGroupEl(this.activeGroup);\r
- if(groupEl) {\r
- this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); \r
- \r
- var y = Ext.isGecko2 ? 0 : 1;\r
- if (this.tabPosition == 'left'){\r
- this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);\r
- }\r
- else {\r
- this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);\r
- } \r
- }\r
- else {\r
- this.tabJoint.hide();\r
- }\r
- },\r
- \r
- getActiveTab : function() {\r
- if(!this.activeGroup) return null;\r
- return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null; \r
- },\r
- \r
- onResize: function(){\r
- Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);\r
- this.syncTabJoint();\r
- },\r
- \r
- createCorner: function(el, pos){\r
- return Ext.fly(el).createChild({\r
- cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos\r
- });\r
- },\r
- \r
- initGroup: function(group, index){\r
- var before = this.strip.dom.childNodes[index], \r
- p = this.getTemplateArgs(group);\r
- if (index === 0) {\r
- p.cls += ' x-tab-first';\r
- }\r
- p.cls += ' x-grouptabs-main';\r
- p.text = group.getMainItem().title;\r
- \r
- var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),\r
- tl = this.createCorner(el, 'top-' + this.tabPosition),\r
- bl = this.createCorner(el, 'bottom-' + this.tabPosition);\r
-\r
- group.tabEl = el;\r
- if (group.expanded) {\r
- this.expandGroup(el);\r
- }\r
-\r
- if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){\r
- bl.setLeft('-10px');\r
- bl.setBottom('-5px');\r
- tl.setLeft('-10px');\r
- tl.setTop('-5px');\r
- }\r
-\r
- this.mon(group, {\r
- scope: this,\r
- changemainitem: this.onGroupChangeMainItem,\r
- beforetabchange: this.onGroupBeforeTabChange\r
- });\r
- },\r
- \r
- setActiveGroup : function(group) {\r
- group = this.getComponent(group);\r
- if(!group){\r
- return false;\r
- }\r
- if(!this.rendered){\r
- this.activeGroup = group;\r
- return true;\r
- }\r
- if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){\r
- if(this.activeGroup){\r
- this.activeGroup.activeTab = null;\r
- var oldEl = this.getGroupEl(this.activeGroup);\r
- if(oldEl){\r
- Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
- }\r
- }\r
-\r
- var groupEl = this.getGroupEl(group);\r
- Ext.fly(groupEl).addClass('x-grouptabs-strip-active');\r
- \r
- this.activeGroup = group;\r
- this.stack.add(group);\r
-\r
- this.layout.setActiveItem(group);\r
- this.syncTabJoint(groupEl);\r
-\r
- this.fireEvent('groupchange', this, group);\r
- return true;\r
- }\r
- return false; \r
- },\r
- \r
- onGroupBeforeTabChange: function(group, newTab, oldTab){\r
- if(group !== this.activeGroup || newTab !== oldTab) {\r
- this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');\r
- } \r
- this.expandGroup(this.getGroupEl(group));\r
- if(group !== this.activeGroup) {\r
- return this.setActiveGroup(group);\r
- } \r
- },\r
- \r
- getFrameHeight: function(){\r
- var h = this.el.getFrameWidth('tb');\r
- h += (this.tbar ? this.tbar.getHeight() : 0) +\r
- (this.bbar ? this.bbar.getHeight() : 0);\r
- \r
- return h;\r
- },\r
- \r
- adjustBodyWidth: function(w){\r
- return w - this.tabWidth;\r
- }\r
-});\r
-\r
-Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*\r
- * Note that this control will most likely remain as an example, and not as a core Ext form\r
- * control. However, the API will be changing in a future release and so should not yet be\r
- * treated as a final, stable API at this time.\r
- */\r
-\r
-/**\r
- * @class Ext.ux.form.ItemSelector\r
- * @extends Ext.form.Field\r
- * A control that allows selection of between two Ext.ux.form.MultiSelect controls.\r
- *\r
- * @history\r
- * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
- *\r
- * @constructor\r
- * Create a new ItemSelector\r
- * @param {Object} config Configuration options\r
- * @xtype itemselector \r
- */\r
-Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {\r
- hideNavIcons:false,\r
- imagePath:"",\r
- iconUp:"up2.gif",\r
- iconDown:"down2.gif",\r
- iconLeft:"left2.gif",\r
- iconRight:"right2.gif",\r
- iconTop:"top2.gif",\r
- iconBottom:"bottom2.gif",\r
- drawUpIcon:true,\r
- drawDownIcon:true,\r
- drawLeftIcon:true,\r
- drawRightIcon:true,\r
- drawTopIcon:true,\r
- drawBotIcon:true,\r
- delimiter:',',\r
- bodyStyle:null,\r
- border:false,\r
- defaultAutoCreate:{tag: "div"},\r
- /**\r
- * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)\r
- */\r
- multiselects:null,\r
-\r
- initComponent: function(){\r
- Ext.ux.form.ItemSelector.superclass.initComponent.call(this);\r
- this.addEvents({\r
- 'rowdblclick' : true,\r
- 'change' : true\r
- });\r
- },\r
-\r
- onRender: function(ct, position){\r
- Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);\r
-\r
- // Internal default configuration for both multiselects\r
- var msConfig = [{\r
- legend: 'Available',\r
- draggable: true,\r
- droppable: true,\r
- width: 100,\r
- height: 100\r
- },{\r
- legend: 'Selected',\r
- droppable: true,\r
- draggable: true,\r
- width: 100,\r
- height: 100\r
- }];\r
-\r
- this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));\r
- this.fromMultiselect.on('dblclick', this.onRowDblClick, this);\r
-\r
- this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));\r
- this.toMultiselect.on('dblclick', this.onRowDblClick, this);\r
-\r
- var p = new Ext.Panel({\r
- bodyStyle:this.bodyStyle,\r
- border:this.border,\r
- layout:"table",\r
- layoutConfig:{columns:3}\r
- });\r
-\r
- p.add(this.fromMultiselect);\r
- var icons = new Ext.Panel({header:false});\r
- p.add(icons);\r
- p.add(this.toMultiselect);\r
- p.render(this.el);\r
- icons.el.down('.'+icons.bwrapCls).remove();\r
-\r
- // ICON HELL!!!\r
- if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")\r
- this.imagePath+="/";\r
- this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');\r
- this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');\r
- this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');\r
- this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');\r
- this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');\r
- this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');\r
- var el=icons.getEl();\r
- this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});\r
- el.createChild({tag: 'br'});\r
- this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});\r
- this.toTopIcon.on('click', this.toTop, this);\r
- this.upIcon.on('click', this.up, this);\r
- this.downIcon.on('click', this.down, this);\r
- this.toBottomIcon.on('click', this.toBottom, this);\r
- this.addIcon.on('click', this.fromTo, this);\r
- this.removeIcon.on('click', this.toFrom, this);\r
- if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }\r
- if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }\r
- if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }\r
- if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }\r
- if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }\r
- if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }\r
-\r
- var tb = p.body.first();\r
- this.el.setWidth(p.body.first().getWidth());\r
- p.body.removeClass();\r
-\r
- this.hiddenName = this.name;\r
- var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};\r
- this.hiddenField = this.el.createChild(hiddenTag);\r
- },\r
- \r
- doLayout: function(){\r
- if(this.rendered){\r
- this.fromMultiselect.fs.doLayout();\r
- this.toMultiselect.fs.doLayout();\r
- }\r
- },\r
-\r
- afterRender: function(){\r
- Ext.ux.form.ItemSelector.superclass.afterRender.call(this);\r
-\r
- this.toStore = this.toMultiselect.store;\r
- this.toStore.on('add', this.valueChanged, this);\r
- this.toStore.on('remove', this.valueChanged, this);\r
- this.toStore.on('load', this.valueChanged, this);\r
- this.valueChanged(this.toStore);\r
- },\r
-\r
- toTop : function() {\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- selectionsArray.sort();\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
- }\r
- selectionsArray = [];\r
- for (var i=records.length-1; i>-1; i--) {\r
- record = records[i];\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.insert(0, record);\r
- selectionsArray.push(((records.length - 1) - i));\r
- }\r
- }\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(selectionsArray);\r
- },\r
-\r
- toBottom : function() {\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- selectionsArray.sort();\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
- }\r
- selectionsArray = [];\r
- for (var i=0; i<records.length; i++) {\r
- record = records[i];\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.add(record);\r
- selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));\r
- }\r
- }\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(selectionsArray);\r
- },\r
-\r
- up : function() {\r
- var record = null;\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- selectionsArray.sort();\r
- var newSelectionsArray = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- if ((selectionsArray[i] - 1) >= 0) {\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);\r
- newSelectionsArray.push(selectionsArray[i] - 1);\r
- }\r
- }\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(newSelectionsArray);\r
- }\r
- },\r
-\r
- down : function() {\r
- var record = null;\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- selectionsArray.sort();\r
- selectionsArray.reverse();\r
- var newSelectionsArray = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {\r
- this.toMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);\r
- newSelectionsArray.push(selectionsArray[i] + 1);\r
- }\r
- }\r
- this.toMultiselect.view.refresh();\r
- this.toMultiselect.view.select(newSelectionsArray);\r
- }\r
- },\r
-\r
- fromTo : function() {\r
- var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
- }\r
- if(!this.allowDup)selectionsArray = [];\r
- for (var i=0; i<records.length; i++) {\r
- record = records[i];\r
- if(this.allowDup){\r
- var x=new Ext.data.Record();\r
- record.id=x.id;\r
- delete x;\r
- this.toMultiselect.view.store.add(record);\r
- }else{\r
- this.fromMultiselect.view.store.remove(record);\r
- this.toMultiselect.view.store.add(record);\r
- selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));\r
- }\r
- }\r
- }\r
- this.toMultiselect.view.refresh();\r
- this.fromMultiselect.view.refresh();\r
- var si = this.toMultiselect.store.sortInfo;\r
- if(si){\r
- this.toMultiselect.store.sort(si.field, si.direction);\r
- }\r
- this.toMultiselect.view.select(selectionsArray);\r
- },\r
-\r
- toFrom : function() {\r
- var selectionsArray = this.toMultiselect.view.getSelectedIndexes();\r
- var records = [];\r
- if (selectionsArray.length > 0) {\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- record = this.toMultiselect.view.store.getAt(selectionsArray[i]);\r
- records.push(record);\r
- }\r
- selectionsArray = [];\r
- for (var i=0; i<records.length; i++) {\r
- record = records[i];\r
- this.toMultiselect.view.store.remove(record);\r
- if(!this.allowDup){\r
- this.fromMultiselect.view.store.add(record);\r
- selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));\r
- }\r
- }\r
- }\r
- this.fromMultiselect.view.refresh();\r
- this.toMultiselect.view.refresh();\r
- var si = this.fromMultiselect.store.sortInfo;\r
- if (si){\r
- this.fromMultiselect.store.sort(si.field, si.direction);\r
- }\r
- this.fromMultiselect.view.select(selectionsArray);\r
- },\r
-\r
- valueChanged: function(store) {\r
- var record = null;\r
- var values = [];\r
- for (var i=0; i<store.getCount(); i++) {\r
- record = store.getAt(i);\r
- values.push(record.get(this.toMultiselect.valueField));\r
- }\r
- this.hiddenField.dom.value = values.join(this.delimiter);\r
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
- },\r
-\r
- getValue : function() {\r
- return this.hiddenField.dom.value;\r
- },\r
-\r
- onRowDblClick : function(vw, index, node, e) {\r
- if (vw == this.toMultiselect.view){\r
- this.toFrom();\r
- } else if (vw == this.fromMultiselect.view) {\r
- this.fromTo();\r
- }\r
- return this.fireEvent('rowdblclick', vw, index, node, e);\r
- },\r
-\r
- reset: function(){\r
- range = this.toMultiselect.store.getRange();\r
- this.toMultiselect.store.removeAll();\r
- this.fromMultiselect.store.add(range);\r
- var si = this.fromMultiselect.store.sortInfo;\r
- if (si){\r
- this.fromMultiselect.store.sort(si.field, si.direction);\r
- }\r
- this.valueChanged(this.toMultiselect.store);\r
- }\r
-});\r
-\r
-Ext.reg('itemselector', Ext.ux.form.ItemSelector);\r
-\r
-//backwards compat\r
-Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;\r
-Ext.ns('Ext.ux.grid');\r
-\r
-Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {\r
- lockText : 'Lock',\r
- unlockText : 'Unlock',\r
- rowBorderWidth : 1,\r
- lockedBorderWidth : 1,\r
- /*\r
- * This option ensures that height between the rows is synchronized\r
- * between the locked and unlocked sides. This option only needs to be used\r
- * when the row heights isn't predictable.\r
- */\r
- syncHeights: false,\r
- initTemplates : function(){\r
- var ts = this.templates || {};\r
- if(!ts.master){\r
- ts.master = new Ext.Template(\r
- '<div class="x-grid3" hidefocus="true">',\r
- '<div class="x-grid3-locked">',\r
- '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{lstyle}">{lockedHeader}</div></div><div class="x-clear"></div></div>',\r
- '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',\r
- '</div>',\r
- '<div class="x-grid3-viewport x-grid3-unlocked">',\r
- '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',\r
- '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',\r
- '</div>',\r
- '<div class="x-grid3-resize-marker"> </div>',\r
- '<div class="x-grid3-resize-proxy"> </div>',\r
- '</div>'\r
- );\r
- }\r
- this.templates = ts;\r
- Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);\r
- },\r
- getEditorParent : function(ed){\r
- return this.el.dom;\r
- },\r
- initElements : function(){\r
- var E = Ext.Element;\r
- var el = this.grid.getGridEl().dom.firstChild;\r
- var cs = el.childNodes;\r
- this.el = new E(el);\r
- this.lockedWrap = new E(cs[0]);\r
- this.lockedHd = new E(this.lockedWrap.dom.firstChild);\r
- this.lockedInnerHd = this.lockedHd.dom.firstChild;\r
- this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]);\r
- this.lockedBody = new E(this.lockedScroller.dom.firstChild);\r
- this.mainWrap = new E(cs[1]);\r
- this.mainHd = new E(this.mainWrap.dom.firstChild);\r
- if(this.grid.hideHeaders){\r
- this.lockedHd.setDisplayed(false);\r
- this.mainHd.setDisplayed(false);\r
- }\r
- this.innerHd = this.mainHd.dom.firstChild;\r
- this.scroller = new E(this.mainWrap.dom.childNodes[1]);\r
- if(this.forceFit){\r
- this.scroller.setStyle('overflow-x', 'hidden');\r
- }\r
- this.mainBody = new E(this.scroller.dom.firstChild);\r
- this.focusEl = new E(this.scroller.dom.childNodes[1]);\r
- this.focusEl.swallowEvent('click', true);\r
- this.resizeMarker = new E(cs[2]);\r
- this.resizeProxy = new E(cs[3]);\r
- },\r
- \r
- getLockedRows : function(){\r
- return this.hasRows() ? this.lockedBody.dom.childNodes : [];\r
- },\r
- \r
- getLockedRow : function(row){\r
- return this.getLockedRows()[row];\r
- },\r
- \r
- getCell : function(row, col){\r
- var llen = this.cm.getLockedCount();\r
- if(col < llen){\r
- return this.getLockedRow(row).getElementsByTagName('td')[col];\r
- }\r
- return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);\r
- },\r
- \r
- getHeaderCell : function(index){\r
- var llen = this.cm.getLockedCount();\r
- if(index < llen){\r
- return this.lockedHd.dom.getElementsByTagName('td')[index];\r
- }\r
- return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);\r
- },\r
- \r
- addRowClass : function(row, cls){\r
- var r = this.getLockedRow(row);\r
- if(r){\r
- this.fly(r).addClass(cls);\r
- }\r
- Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);\r
- },\r
- \r
- removeRowClass : function(row, cls){\r
- var r = this.getLockedRow(row);\r
- if(r){\r
- this.fly(r).removeClass(cls);\r
- }\r
- Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);\r
- },\r
- \r
- removeRow : function(row) {\r
- Ext.removeNode(this.getLockedRow(row));\r
- Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);\r
- },\r
- \r
- removeRows : function(firstRow, lastRow){\r
- var bd = this.lockedBody.dom;\r
- for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){\r
- Ext.removeNode(bd.childNodes[firstRow]);\r
- }\r
- Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);\r
- },\r
- \r
- syncScroll : function(e){\r
- var mb = this.scroller.dom;\r
- this.lockedScroller.dom.scrollTop = mb.scrollTop;\r
- Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);\r
- },\r
- \r
- updateSortIcon : function(col, dir){\r
- var sc = this.sortClasses,\r
- lhds = this.lockedHd.select('td').removeClass(sc),\r
- hds = this.mainHd.select('td').removeClass(sc),\r
- llen = this.cm.getLockedCount(),\r
- cls = sc[dir == 'DESC' ? 1 : 0];\r
- if(col < llen){\r
- lhds.item(col).addClass(cls);\r
- }else{\r
- hds.item(col - llen).addClass(cls);\r
- }\r
- },\r
- \r
- updateAllColumnWidths : function(){\r
- var tw = this.getTotalWidth(),\r
- clen = this.cm.getColumnCount(),\r
- lw = this.getLockedWidth(),\r
- llen = this.cm.getLockedCount(),\r
- ws = [], len, i;\r
- this.updateLockedWidth();\r
- for(i = 0; i < clen; i++){\r
- ws[i] = this.getColumnWidth(i);\r
- var hd = this.getHeaderCell(i);\r
- hd.style.width = ws[i];\r
- }\r
- var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;\r
- for(i = 0, len = ns.length; i < len; i++){\r
- row = lns[i];\r
- row.style.width = lw;\r
- if(row.firstChild){\r
- row.firstChild.style.width = lw;\r
- trow = row.firstChild.rows[0];\r
- for (j = 0; j < llen; j++) {\r
- trow.childNodes[j].style.width = ws[j];\r
- }\r
- }\r
- row = ns[i];\r
- row.style.width = tw;\r
- if(row.firstChild){\r
- row.firstChild.style.width = tw;\r
- trow = row.firstChild.rows[0];\r
- for (j = llen; j < clen; j++) {\r
- trow.childNodes[j - llen].style.width = ws[j];\r
- }\r
- }\r
- }\r
- this.onAllColumnWidthsUpdated(ws, tw);\r
- this.syncHeaderHeight();\r
- },\r
- \r
- updateColumnWidth : function(col, width){\r
- var w = this.getColumnWidth(col),\r
- llen = this.cm.getLockedCount(),\r
- ns, rw, c, row;\r
- this.updateLockedWidth();\r
- if(col < llen){\r
- ns = this.getLockedRows();\r
- rw = this.getLockedWidth();\r
- c = col;\r
- }else{\r
- ns = this.getRows();\r
- rw = this.getTotalWidth();\r
- c = col - llen;\r
- }\r
- var hd = this.getHeaderCell(col);\r
- hd.style.width = w;\r
- for(var i = 0, len = ns.length; i < len; i++){\r
- row = ns[i];\r
- row.style.width = rw;\r
- if(row.firstChild){\r
- row.firstChild.style.width = rw;\r
- row.firstChild.rows[0].childNodes[c].style.width = w;\r
- }\r
- }\r
- this.onColumnWidthUpdated(col, w, this.getTotalWidth());\r
- this.syncHeaderHeight();\r
- },\r
- \r
- updateColumnHidden : function(col, hidden){\r
- var llen = this.cm.getLockedCount(),\r
- ns, rw, c, row,\r
- display = hidden ? 'none' : '';\r
- this.updateLockedWidth();\r
- if(col < llen){\r
- ns = this.getLockedRows();\r
- rw = this.getLockedWidth();\r
- c = col;\r
- }else{\r
- ns = this.getRows();\r
- rw = this.getTotalWidth();\r
- c = col - llen;\r
- }\r
- var hd = this.getHeaderCell(col);\r
- hd.style.display = display;\r
- for(var i = 0, len = ns.length; i < len; i++){\r
- row = ns[i];\r
- row.style.width = rw;\r
- if(row.firstChild){\r
- row.firstChild.style.width = rw;\r
- row.firstChild.rows[0].childNodes[c].style.display = display;\r
- }\r
- }\r
- this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());\r
- delete this.lastViewWidth;\r
- this.layout();\r
- },\r
- \r
- doRender : function(cs, rs, ds, startRow, colCount, stripe){\r
- var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,\r
- tstyle = 'width:'+this.getTotalWidth()+';',\r
- lstyle = 'width:'+this.getLockedWidth()+';',\r
- buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;\r
- for(var j = 0, len = rs.length; j < len; j++){\r
- r = rs[j]; cb = []; lcb = [];\r
- var rowIndex = (j+startRow);\r
- for(var i = 0; i < colCount; i++){\r
- c = cs[i];\r
- p.id = c.id;\r
- p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +\r
- (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');\r
- p.attr = p.cellAttr = '';\r
- p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);\r
- p.style = c.style;\r
- if(Ext.isEmpty(p.value)){\r
- p.value = ' ';\r
- }\r
- if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){\r
- p.css += ' x-grid3-dirty-cell';\r
- }\r
- if(c.locked){\r
- lcb[lcb.length] = ct.apply(p);\r
- }else{\r
- cb[cb.length] = ct.apply(p);\r
- }\r
- }\r
- var alt = [];\r
- if(stripe && ((rowIndex+1) % 2 === 0)){\r
- alt[0] = 'x-grid3-row-alt';\r
- }\r
- if(r.dirty){\r
- alt[1] = ' x-grid3-dirty-row';\r
- }\r
- rp.cols = colCount;\r
- if(this.getRowClass){\r
- alt[2] = this.getRowClass(r, rowIndex, rp, ds);\r
- }\r
- rp.alt = alt.join(' ');\r
- rp.cells = cb.join('');\r
- rp.tstyle = tstyle;\r
- buf[buf.length] = rt.apply(rp);\r
- rp.cells = lcb.join('');\r
- rp.tstyle = lstyle;\r
- lbuf[lbuf.length] = rt.apply(rp);\r
- }\r
- return [buf.join(''), lbuf.join('')];\r
- },\r
- processRows : function(startRow, skipStripe){\r
- if(!this.ds || this.ds.getCount() < 1){\r
- return;\r
- }\r
- var rows = this.getRows(),\r
- lrows = this.getLockedRows(),\r
- row, lrow;\r
- skipStripe = skipStripe || !this.grid.stripeRows;\r
- startRow = startRow || 0;\r
- for(var i = 0, len = rows.length; i < len; ++i){\r
- row = rows[i];\r
- lrow = lrows[i];\r
- row.rowIndex = i;\r
- lrow.rowIndex = i;\r
- if(!skipStripe){\r
- row.className = row.className.replace(this.rowClsRe, ' ');\r
- lrow.className = lrow.className.replace(this.rowClsRe, ' ');\r
- if ((i + 1) % 2 === 0){\r
- row.className += ' x-grid3-row-alt';\r
- lrow.className += ' x-grid3-row-alt';\r
- }\r
- }\r
- if(this.syncHeights){\r
- var el1 = Ext.get(row),\r
- el2 = Ext.get(lrow),\r
- h1 = el1.getHeight(),\r
- h2 = el2.getHeight();\r
- \r
- if(h1 > h2){\r
- el2.setHeight(h1); \r
- }else if(h2 > h1){\r
- el1.setHeight(h2);\r
- }\r
- }\r
- }\r
- if(startRow === 0){\r
- Ext.fly(rows[0]).addClass(this.firstRowCls);\r
- Ext.fly(lrows[0]).addClass(this.firstRowCls);\r
- }\r
- Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);\r
- Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);\r
- },\r
- \r
- afterRender : function(){\r
- if(!this.ds || !this.cm){\r
- return;\r
- }\r
- var bd = this.renderRows() || [' ', ' '];\r
- this.mainBody.dom.innerHTML = bd[0];\r
- this.lockedBody.dom.innerHTML = bd[1];\r
- this.processRows(0, true);\r
- if(this.deferEmptyText !== true){\r
- this.applyEmptyText();\r
- }\r
- },\r
- \r
- renderUI : function(){\r
- var header = this.renderHeaders();\r
- var body = this.templates.body.apply({rows:' '});\r
- var html = this.templates.master.apply({\r
- body: body,\r
- header: header[0],\r
- ostyle: 'width:'+this.getOffsetWidth()+';',\r
- bstyle: 'width:'+this.getTotalWidth()+';',\r
- lockedBody: body,\r
- lockedHeader: header[1],\r
- lstyle: 'width:'+this.getLockedWidth()+';'\r
- });\r
- var g = this.grid;\r
- g.getGridEl().dom.innerHTML = html;\r
- this.initElements();\r
- Ext.fly(this.innerHd).on('click', this.handleHdDown, this);\r
- Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);\r
- this.mainHd.on({\r
- scope: this,\r
- mouseover: this.handleHdOver,\r
- mouseout: this.handleHdOut,\r
- mousemove: this.handleHdMove\r
- });\r
- this.lockedHd.on({\r
- scope: this,\r
- mouseover: this.handleHdOver,\r
- mouseout: this.handleHdOut,\r
- mousemove: this.handleHdMove\r
- });\r
- this.scroller.on('scroll', this.syncScroll, this);\r
- if(g.enableColumnResize !== false){\r
- this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);\r
- this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));\r
- this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));\r
- }\r
- if(g.enableColumnMove){\r
- this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);\r
- this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));\r
- this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));\r
- this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);\r
- }\r
- if(g.enableHdMenu !== false){\r
- this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});\r
- this.hmenu.add(\r
- {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},\r
- {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}\r
- );\r
- if(this.grid.enableColLock !== false){\r
- this.hmenu.add('-',\r
- {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},\r
- {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}\r
- );\r
- }\r
- if(g.enableColumnHide !== false){\r
- this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});\r
- this.colMenu.on({\r
- scope: this,\r
- beforeshow: this.beforeColMenuShow,\r
- itemclick: this.handleHdMenuClick\r
- });\r
- this.hmenu.add('-', {\r
- itemId:'columns',\r
- hideOnClick: false,\r
- text: this.columnsText,\r
- menu: this.colMenu,\r
- iconCls: 'x-cols-icon'\r
- });\r
- }\r
- this.hmenu.on('itemclick', this.handleHdMenuClick, this);\r
- }\r
- if(g.trackMouseOver){\r
- this.mainBody.on({\r
- scope: this,\r
- mouseover: this.onRowOver,\r
- mouseout: this.onRowOut\r
- });\r
- this.lockedBody.on({\r
- scope: this,\r
- mouseover: this.onRowOver,\r
- mouseout: this.onRowOut\r
- });\r
- }\r
- \r
- if(g.enableDragDrop || g.enableDrag){\r
- this.dragZone = new Ext.grid.GridDragZone(g, {\r
- ddGroup : g.ddGroup || 'GridDD'\r
- });\r
- }\r
- this.updateHeaderSortState();\r
- },\r
- \r
- layout : function(){\r
- if(!this.mainBody){\r
- return;\r
- }\r
- var g = this.grid;\r
- var c = g.getGridEl();\r
- var csize = c.getSize(true);\r
- var vw = csize.width;\r
- if(!g.hideHeaders && (vw < 20 || csize.height < 20)){\r
- return;\r
- }\r
- this.syncHeaderHeight();\r
- if(g.autoHeight){\r
- this.scroller.dom.style.overflow = 'visible';\r
- this.lockedScroller.dom.style.overflow = 'visible';\r
- if(Ext.isWebKit){\r
- this.scroller.dom.style.position = 'static';\r
- this.lockedScroller.dom.style.position = 'static';\r
- }\r
- }else{\r
- this.el.setSize(csize.width, csize.height);\r
- var hdHeight = this.mainHd.getHeight();\r
- var vh = csize.height - (hdHeight);\r
- }\r
- this.updateLockedWidth();\r
- if(this.forceFit){\r
- if(this.lastViewWidth != vw){\r
- this.fitColumns(false, false);\r
- this.lastViewWidth = vw;\r
- }\r
- }else {\r
- this.autoExpand();\r
- this.syncHeaderScroll();\r
- }\r
- this.onLayout(vw, vh);\r
- },\r
- \r
- getOffsetWidth : function() {\r
- return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';\r
- },\r
- \r
- renderHeaders : function(){\r
- var cm = this.cm,\r
- ts = this.templates,\r
- ct = ts.hcell,\r
- cb = [], lcb = [],\r
- p = {},\r
- len = cm.getColumnCount(),\r
- last = len - 1;\r
- for(var i = 0; i < len; i++){\r
- p.id = cm.getColumnId(i);\r
- p.value = cm.getColumnHeader(i) || '';\r
- p.style = this.getColumnStyle(i, true);\r
- p.tooltip = this.getColumnTooltip(i);\r
- p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +\r
- (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');\r
- if(cm.config[i].align == 'right'){\r
- p.istyle = 'padding-right:16px';\r
- } else {\r
- delete p.istyle;\r
- }\r
- if(cm.isLocked(i)){\r
- lcb[lcb.length] = ct.apply(p);\r
- }else{\r
- cb[cb.length] = ct.apply(p);\r
- }\r
- }\r
- return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),\r
- ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];\r
- },\r
- \r
- updateHeaders : function(){\r
- var hd = this.renderHeaders();\r
- this.innerHd.firstChild.innerHTML = hd[0];\r
- this.innerHd.firstChild.style.width = this.getOffsetWidth();\r
- this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();\r
- this.lockedInnerHd.firstChild.innerHTML = hd[1];\r
- var lw = this.getLockedWidth();\r
- this.lockedInnerHd.firstChild.style.width = lw;\r
- this.lockedInnerHd.firstChild.firstChild.style.width = lw;\r
- },\r
- \r
- getResolvedXY : function(resolved){\r
- if(!resolved){\r
- return null;\r
- }\r
- var c = resolved.cell, r = resolved.row;\r
- return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];\r
- },\r
- \r
- syncFocusEl : function(row, col, hscroll){\r
- Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);\r
- },\r
- \r
- ensureVisible : function(row, col, hscroll){\r
- return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);\r
- },\r
- \r
- insertRows : function(dm, firstRow, lastRow, isUpdate){\r
- var last = dm.getCount() - 1;\r
- if(!isUpdate && firstRow === 0 && lastRow >= last){\r
- this.refresh();\r
- }else{\r
- if(!isUpdate){\r
- this.fireEvent('beforerowsinserted', this, firstRow, lastRow);\r
- }\r
- var html = this.renderRows(firstRow, lastRow),\r
- before = this.getRow(firstRow);\r
- if(before){\r
- if(firstRow === 0){\r
- this.removeRowClass(0, this.firstRowCls);\r
- }\r
- Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);\r
- before = this.getLockedRow(firstRow);\r
- Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);\r
- }else{\r
- this.removeRowClass(last - 1, this.lastRowCls);\r
- Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);\r
- Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);\r
- }\r
- if(!isUpdate){\r
- this.fireEvent('rowsinserted', this, firstRow, lastRow);\r
- this.processRows(firstRow);\r
- }else if(firstRow === 0 || firstRow >= last){\r
- this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);\r
- }\r
- }\r
- this.syncFocusEl(firstRow);\r
- },\r
- \r
- getColumnStyle : function(col, isHeader){\r
- var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';\r
- style += 'width:'+this.getColumnWidth(col)+';';\r
- if(this.cm.isHidden(col)){\r
- style += 'display:none;';\r
- }\r
- var align = this.cm.config[col].align;\r
- if(align){\r
- style += 'text-align:'+align+';';\r
- }\r
- return style;\r
- },\r
- \r
- getLockedWidth : function() {\r
- return this.cm.getTotalLockedWidth() + 'px';\r
- },\r
- \r
- getTotalWidth : function() {\r
- return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';\r
- },\r
- \r
- getColumnData : function(){\r
- var cs = [], cm = this.cm, colCount = cm.getColumnCount();\r
- for(var i = 0; i < colCount; i++){\r
- var name = cm.getDataIndex(i);\r
- cs[i] = {\r
- name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),\r
- renderer : cm.getRenderer(i),\r
- id : cm.getColumnId(i),\r
- style : this.getColumnStyle(i),\r
- locked : cm.isLocked(i)\r
- };\r
- }\r
- return cs;\r
- },\r
- \r
- renderBody : function(){\r
- var markup = this.renderRows() || [' ', ' '];\r
- return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];\r
- },\r
- \r
- refreshRow : function(record){\r
- Ext.ux.grid.LockingGridView.superclass.refreshRow.call(this, record);\r
- var index = Ext.isNumber(record) ? record : this.ds.indexOf(record);\r
- this.getLockedRow(index).rowIndex = index;\r
- },\r
- \r
- refresh : function(headersToo){\r
- this.fireEvent('beforerefresh', this);\r
- this.grid.stopEditing(true);\r
- var result = this.renderBody();\r
- this.mainBody.update(result[0]).setWidth(this.getTotalWidth());\r
- this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());\r
- if(headersToo === true){\r
- this.updateHeaders();\r
- this.updateHeaderSortState();\r
- }\r
- this.processRows(0, true);\r
- this.layout();\r
- this.applyEmptyText();\r
- this.fireEvent('refresh', this);\r
- },\r
- \r
- onDenyColumnLock : function(){\r
-\r
- },\r
- \r
- initData : function(ds, cm){\r
- if(this.cm){\r
- this.cm.un('columnlockchange', this.onColumnLock, this);\r
- }\r
- Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);\r
- if(this.cm){\r
- this.cm.on('columnlockchange', this.onColumnLock, this);\r
- }\r
- },\r
- \r
- onColumnLock : function(){\r
- this.refresh(true);\r
- },\r
- \r
- handleHdMenuClick : function(item){\r
- var index = this.hdCtxIndex,\r
- cm = this.cm,\r
- id = item.getItemId(),\r
- llen = cm.getLockedCount();\r
- switch(id){\r
- case 'lock':\r
- if(cm.getColumnCount(true) <= llen + 1){\r
- this.onDenyColumnLock();\r
- return;\r
- }\r
- if(llen != index){\r
- cm.setLocked(index, true, true);\r
- cm.moveColumn(index, llen);\r
- this.grid.fireEvent('columnmove', index, llen);\r
- }else{\r
- cm.setLocked(index, true);\r
- }\r
- break;\r
- case 'unlock':\r
- if(llen - 1 != index){\r
- cm.setLocked(index, false, true);\r
- cm.moveColumn(index, llen - 1);\r
- this.grid.fireEvent('columnmove', index, llen - 1);\r
- }else{\r
- cm.setLocked(index, false);\r
- }\r
- break;\r
- default:\r
- return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);\r
- }\r
- return true;\r
- },\r
- \r
- handleHdDown : function(e, t){\r
- Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);\r
- if(this.grid.enableColLock !== false){\r
- if(Ext.fly(t).hasClass('x-grid3-hd-btn')){\r
- var hd = this.findHeaderCell(t),\r
- index = this.getCellIndex(hd),\r
- ms = this.hmenu.items, cm = this.cm;\r
- ms.get('lock').setDisabled(cm.isLocked(index));\r
- ms.get('unlock').setDisabled(!cm.isLocked(index));\r
- }\r
- }\r
- },\r
- \r
- syncHeaderHeight: function(){\r
- this.innerHd.firstChild.firstChild.style.height = 'auto';\r
- this.lockedInnerHd.firstChild.firstChild.style.height = 'auto';\r
- var hd = this.innerHd.firstChild.firstChild.offsetHeight,\r
- lhd = this.lockedInnerHd.firstChild.firstChild.offsetHeight,\r
- height = (lhd > hd ? lhd : hd) + 'px';\r
- this.innerHd.firstChild.firstChild.style.height = height;\r
- this.lockedInnerHd.firstChild.firstChild.style.height = height;\r
- },\r
- \r
- updateLockedWidth: function(){\r
- var lw = this.cm.getTotalLockedWidth(),\r
- tw = this.cm.getTotalWidth() - lw,\r
- csize = this.grid.getGridEl().getSize(true),\r
- lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,\r
- rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,\r
- vw = (csize.width - lw - lp - rp) + 'px',\r
- so = this.getScrollOffset();\r
- if(!this.grid.autoHeight){\r
- var vh = (csize.height - this.mainHd.getHeight()) + 'px';\r
- this.lockedScroller.dom.style.height = vh;\r
- this.scroller.dom.style.height = vh;\r
- }\r
- this.lockedWrap.dom.style.width = (lw + rp) + 'px';\r
- this.scroller.dom.style.width = vw;\r
- this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';\r
- if(this.innerHd){\r
- this.lockedInnerHd.firstChild.style.width = lw + 'px';\r
- this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';\r
- this.innerHd.style.width = vw;\r
- this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';\r
- this.innerHd.firstChild.firstChild.style.width = tw + 'px';\r
- }\r
- if(this.mainBody){\r
- this.lockedBody.dom.style.width = (lw + rp) + 'px';\r
- this.mainBody.dom.style.width = (tw + rp) + 'px';\r
- }\r
- }\r
-});\r
-\r
-Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {\r
- isLocked : function(colIndex){\r
- return this.config[colIndex].locked === true;\r
- },\r
- \r
- setLocked : function(colIndex, value, suppressEvent){\r
- if(this.isLocked(colIndex) == value){\r
- return;\r
- }\r
- this.config[colIndex].locked = value;\r
- if(!suppressEvent){\r
- this.fireEvent('columnlockchange', this, colIndex, value);\r
- }\r
- },\r
- \r
- getTotalLockedWidth : function(){\r
- var totalWidth = 0;\r
- for(var i = 0, len = this.config.length; i < len; i++){\r
- if(this.isLocked(i) && !this.isHidden(i)){\r
- totalWidth += this.getColumnWidth(i);\r
- }\r
- }\r
- return totalWidth;\r
- },\r
- \r
- getLockedCount : function(){\r
- for(var i = 0, len = this.config.length; i < len; i++){\r
- if(!this.isLocked(i)){\r
- return i;\r
- }\r
- }\r
- },\r
- \r
- moveColumn : function(oldIndex, newIndex){\r
- if(oldIndex < newIndex && this.isLocked(oldIndex) && !this.isLocked(newIndex)){\r
- this.setLocked(oldIndex, false, true);\r
- }else if(oldIndex > newIndex && !this.isLocked(oldIndex) && this.isLocked(newIndex)){\r
- this.setLocked(oldIndex, true, true);\r
- }\r
- Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);\r
- }\r
-});\r
-Ext.ns('Ext.ux.form');\r
-\r
-/**\r
- * @class Ext.ux.form.MultiSelect\r
- * @extends Ext.form.Field\r
- * A control that allows selection and form submission of multiple list items.\r
- *\r
- * @history\r
- * 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)\r
- * 2008-06-19 bpm Docs and demo code clean up\r
- *\r
- * @constructor\r
- * Create a new MultiSelect\r
- * @param {Object} config Configuration options\r
- * @xtype multiselect\r
- */\r
-Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field, {\r
- /**\r
- * @cfg {String} legend Wraps the object with a fieldset and specified legend.\r
- */\r
- /**\r
- * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.\r
- */\r
- /**\r
- * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).\r
- */\r
- /**\r
- * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).\r
- */\r
- /**\r
- * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).\r
- */\r
- ddReorder:false,\r
- /**\r
- * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a\r
- * toolbar config, or an array of buttons/button configs to be added to the toolbar.\r
- */\r
- /**\r
- * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled\r
- * (use for lists which are sorted, defaults to false).\r
- */\r
- appendOnly:false,\r
- /**\r
- * @cfg {Number} width Width in pixels of the control (defaults to 100).\r
- */\r
- width:100,\r
- /**\r
- * @cfg {Number} height Height in pixels of the control (defaults to 100).\r
- */\r
- height:100,\r
- /**\r
- * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).\r
- */\r
- displayField:0,\r
- /**\r
- * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).\r
- */\r
- valueField:1,\r
- /**\r
- * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no\r
- * selection (defaults to true).\r
- */\r
- allowBlank:true,\r
- /**\r
- * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).\r
- */\r
- minSelections:0,\r
- /**\r
- * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).\r
- */\r
- maxSelections:Number.MAX_VALUE,\r
- /**\r
- * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as\r
- * {@link Ext.form.TextField#blankText}.\r
- */\r
- blankText:Ext.form.TextField.prototype.blankText,\r
- /**\r
- * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}\r
- * item(s) required'). The {0} token will be replaced by the value of {@link #minSelections}.\r
- */\r
- minSelectionsText:'Minimum {0} item(s) required',\r
- /**\r
- * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}\r
- * item(s) allowed'). The {0} token will be replaced by the value of {@link #maxSelections}.\r
- */\r
- maxSelectionsText:'Maximum {0} item(s) allowed',\r
- /**\r
- * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values\r
- * (defaults to ',').\r
- */\r
- delimiter:',',\r
- /**\r
- * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).\r
- * Acceptable values for this property are:\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>any {@link Ext.data.Store Store} subclass</b></li>\r
- * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.\r
- * <div class="mdetail-params"><ul>\r
- * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">\r
- * A 1-dimensional array will automatically be expanded (each array item will be the combo\r
- * {@link #valueField value} and {@link #displayField text})</div></li>\r
- * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">\r
- * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo\r
- * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.\r
- * </div></li></ul></div></li></ul></div>\r
- */\r
-\r
- // private\r
- defaultAutoCreate : {tag: "div"},\r
-\r
- // private\r
- initComponent: function(){\r
- Ext.ux.form.MultiSelect.superclass.initComponent.call(this);\r
-\r
- if(Ext.isArray(this.store)){\r
- if (Ext.isArray(this.store[0])){\r
- this.store = new Ext.data.ArrayStore({\r
- fields: ['value','text'],\r
- data: this.store\r
- });\r
- this.valueField = 'value';\r
- }else{\r
- this.store = new Ext.data.ArrayStore({\r
- fields: ['text'],\r
- data: this.store,\r
- expandData: true\r
- });\r
- this.valueField = 'text';\r
- }\r
- this.displayField = 'text';\r
- } else {\r
- this.store = Ext.StoreMgr.lookup(this.store);\r
- }\r
-\r
- this.addEvents({\r
- 'dblclick' : true,\r
- 'click' : true,\r
- 'change' : true,\r
- 'drop' : true\r
- });\r
- },\r
-\r
- // private\r
- onRender: function(ct, position){\r
- Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);\r
-\r
- var fs = this.fs = new Ext.form.FieldSet({\r
- renderTo: this.el,\r
- title: this.legend,\r
- height: this.height,\r
- width: this.width,\r
- style: "padding:0;",\r
- tbar: this.tbar\r
- });\r
- fs.body.addClass('ux-mselect');\r
-\r
- this.view = new Ext.ListView({\r
- multiSelect: true,\r
- store: this.store,\r
- columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],\r
- hideHeaders: true\r
- });\r
-\r
- fs.add(this.view);\r
-\r
- this.view.on('click', this.onViewClick, this);\r
- this.view.on('beforeclick', this.onViewBeforeClick, this);\r
- this.view.on('dblclick', this.onViewDblClick, this);\r
-\r
- this.hiddenName = this.name || Ext.id();\r
- var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };\r
- this.hiddenField = this.el.createChild(hiddenTag);\r
- this.hiddenField.dom.disabled = this.hiddenName != this.name;\r
- fs.doLayout();\r
- },\r
-\r
- // private\r
- afterRender: function(){\r
- Ext.ux.form.MultiSelect.superclass.afterRender.call(this);\r
-\r
- if (this.ddReorder && !this.dragGroup && !this.dropGroup){\r
- this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();\r
- }\r
-\r
- if (this.draggable || this.dragGroup){\r
- this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {\r
- ddGroup: this.dragGroup\r
- });\r
- }\r
- if (this.droppable || this.dropGroup){\r
- this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {\r
- ddGroup: this.dropGroup\r
- });\r
- }\r
- },\r
-\r
- // private\r
- onViewClick: function(vw, index, node, e) {\r
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);\r
- this.hiddenField.dom.value = this.getValue();\r
- this.fireEvent('click', this, e);\r
- this.validate();\r
- },\r
-\r
- // private\r
- onViewBeforeClick: function(vw, index, node, e) {\r
- if (this.disabled) {return false;}\r
- },\r
-\r
- // private\r
- onViewDblClick : function(vw, index, node, e) {\r
- return this.fireEvent('dblclick', vw, index, node, e);\r
- },\r
-\r
- /**\r
- * Returns an array of data values for the selected items in the list. The values will be separated\r
- * by {@link #delimiter}.\r
- * @return {Array} value An array of string data values\r
- */\r
- getValue: function(valueField){\r
- var returnArray = [];\r
- var selectionsArray = this.view.getSelectedIndexes();\r
- if (selectionsArray.length == 0) {return '';}\r
- for (var i=0; i<selectionsArray.length; i++) {\r
- returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));\r
- }\r
- return returnArray.join(this.delimiter);\r
- },\r
-\r
- /**\r
- * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.\r
- * @param {String/Array} values The values to set\r
- */\r
- setValue: function(values) {\r
- var index;\r
- var selections = [];\r
- this.view.clearSelections();\r
- this.hiddenField.dom.value = '';\r
-\r
- if (!values || (values == '')) { return; }\r
-\r
- if (!Ext.isArray(values)) { values = values.split(this.delimiter); }\r
- for (var i=0; i<values.length; i++) {\r
- index = this.view.store.indexOf(this.view.store.query(this.valueField,\r
- new RegExp('^' + values[i] + '$', "i")).itemAt(0));\r
- selections.push(index);\r
- }\r
- this.view.select(selections);\r
- this.hiddenField.dom.value = this.getValue();\r
- this.validate();\r
- },\r
-\r
- // inherit docs\r
- reset : function() {\r
- this.setValue('');\r
- },\r
-\r
- // inherit docs\r
- getRawValue: function(valueField) {\r
- var tmp = this.getValue(valueField);\r
- if (tmp.length) {\r
- tmp = tmp.split(this.delimiter);\r
- }\r
- else {\r
- tmp = [];\r
- }\r
- return tmp;\r
- },\r
-\r
- // inherit docs\r
- setRawValue: function(values){\r
- setValue(values);\r
- },\r
-\r
- // inherit docs\r
- validateValue : function(value){\r
- if (value.length < 1) { // if it has no value\r
- if (this.allowBlank) {\r
- this.clearInvalid();\r
- return true;\r
- } else {\r
- this.markInvalid(this.blankText);\r
- return false;\r
- }\r
- }\r
- if (value.length < this.minSelections) {\r
- this.markInvalid(String.format(this.minSelectionsText, this.minSelections));\r
- return false;\r
- }\r
- if (value.length > this.maxSelections) {\r
- this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));\r
- return false;\r
- }\r
- return true;\r
- },\r
-\r
- // inherit docs\r
- disable: function(){\r
- this.disabled = true;\r
- this.hiddenField.dom.disabled = true;\r
- this.fs.disable();\r
- },\r
-\r
- // inherit docs\r
- enable: function(){\r
- this.disabled = false;\r
- this.hiddenField.dom.disabled = false;\r
- this.fs.enable();\r
- },\r
-\r
- // inherit docs\r
- destroy: function(){\r
- Ext.destroy(this.fs, this.dragZone, this.dropZone);\r
- Ext.ux.form.MultiSelect.superclass.destroy.call(this);\r
- }\r
-});\r
-\r
-\r
-Ext.reg('multiselect', Ext.ux.form.MultiSelect);\r
-\r
-//backwards compat\r
-Ext.ux.Multiselect = Ext.ux.form.MultiSelect;\r
-\r
-\r
-Ext.ux.form.MultiSelect.DragZone = function(ms, config){\r
- this.ms = ms;\r
- this.view = ms.view;\r
- var ddGroup = config.ddGroup || 'MultiselectDD';\r
- var dd;\r
- if (Ext.isArray(ddGroup)){\r
- dd = ddGroup.shift();\r
- } else {\r
- dd = ddGroup;\r
- ddGroup = null;\r
- }\r
- Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
- this.setDraggable(ddGroup);\r
-};\r
-\r
-Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {\r
- onInitDrag : function(x, y){\r
- var el = Ext.get(this.dragData.ddel.cloneNode(true));\r
- this.proxy.update(el.dom);\r
- el.setWidth(el.child('em').getWidth());\r
- this.onStartDrag(x, y);\r
- return true;\r
- },\r
-\r
- // private\r
- collectSelection: function(data) {\r
- data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();\r
- var i = 0;\r
- this.view.store.each(function(rec){\r
- if (this.view.isSelected(i)) {\r
- var n = this.view.getNode(i);\r
- var dragNode = n.cloneNode(true);\r
- dragNode.id = Ext.id();\r
- data.ddel.appendChild(dragNode);\r
- data.records.push(this.view.store.getAt(i));\r
- data.viewNodes.push(n);\r
- }\r
- i++;\r
- }, this);\r
- },\r
-\r
- // override\r
- onEndDrag: function(data, e) {\r
- var d = Ext.get(this.dragData.ddel);\r
- if (d && d.hasClass("multi-proxy")) {\r
- d.remove();\r
- }\r
- },\r
-\r
- // override\r
- getDragData: function(e){\r
- var target = this.view.findItemFromChild(e.getTarget());\r
- if(target) {\r
- if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {\r
- this.view.select(target);\r
- this.ms.setValue(this.ms.getValue());\r
- }\r
- if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;\r
- var dragData = {\r
- sourceView: this.view,\r
- viewNodes: [],\r
- records: []\r
- };\r
- if (this.view.getSelectionCount() == 1) {\r
- var i = this.view.getSelectedIndexes()[0];\r
- var n = this.view.getNode(i);\r
- dragData.viewNodes.push(dragData.ddel = n);\r
- dragData.records.push(this.view.store.getAt(i));\r
- dragData.repairXY = Ext.fly(n).getXY();\r
- } else {\r
- dragData.ddel = document.createElement('div');\r
- dragData.ddel.className = 'multi-proxy';\r
- this.collectSelection(dragData);\r
- }\r
- return dragData;\r
- }\r
- return false;\r
- },\r
-\r
- // override the default repairXY.\r
- getRepairXY : function(e){\r
- return this.dragData.repairXY;\r
- },\r
-\r
- // private\r
- setDraggable: function(ddGroup){\r
- if (!ddGroup) return;\r
- if (Ext.isArray(ddGroup)) {\r
- Ext.each(ddGroup, this.setDraggable, this);\r
- return;\r
- }\r
- this.addToGroup(ddGroup);\r
- }\r
-});\r
-\r
-Ext.ux.form.MultiSelect.DropZone = function(ms, config){\r
- this.ms = ms;\r
- this.view = ms.view;\r
- var ddGroup = config.ddGroup || 'MultiselectDD';\r
- var dd;\r
- if (Ext.isArray(ddGroup)){\r
- dd = ddGroup.shift();\r
- } else {\r
- dd = ddGroup;\r
- ddGroup = null;\r
- }\r
- Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });\r
- this.setDroppable(ddGroup);\r
-};\r
-\r
-Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {\r
- /**\r
- * Part of the Ext.dd.DropZone interface. If no target node is found, the\r
- * whole Element becomes the target, and this causes the drop gesture to append.\r
- */\r
- getTargetFromEvent : function(e) {\r
- var target = e.getTarget();\r
- return target;\r
- },\r
-\r
- // private\r
- getDropPoint : function(e, n, dd){\r
- if (n == this.ms.fs.body.dom) { return "below"; }\r
- var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;\r
- var c = t + (b - t) / 2;\r
- var y = Ext.lib.Event.getPageY(e);\r
- if(y <= c) {\r
- return "above";\r
- }else{\r
- return "below";\r
- }\r
- },\r
-\r
- // private\r
- isValidDropPoint: function(pt, n, data) {\r
- if (!data.viewNodes || (data.viewNodes.length != 1)) {\r
- return true;\r
- }\r
- var d = data.viewNodes[0];\r
- if (d == n) {\r
- return false;\r
- }\r
- if ((pt == "below") && (n.nextSibling == d)) {\r
- return false;\r
- }\r
- if ((pt == "above") && (n.previousSibling == d)) {\r
- return false;\r
- }\r
- return true;\r
- },\r
-\r
- // override\r
- onNodeEnter : function(n, dd, e, data){\r
- return false;\r
- },\r
-\r
- // override\r
- onNodeOver : function(n, dd, e, data){\r
- var dragElClass = this.dropNotAllowed;\r
- var pt = this.getDropPoint(e, n, dd);\r
- if (this.isValidDropPoint(pt, n, data)) {\r
- if (this.ms.appendOnly) {\r
- return "x-tree-drop-ok-below";\r
- }\r
-\r
- // set the insert point style on the target node\r
- if (pt) {\r
- var targetElClass;\r
- if (pt == "above"){\r
- dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";\r
- targetElClass = "x-view-drag-insert-above";\r
- } else {\r
- dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";\r
- targetElClass = "x-view-drag-insert-below";\r
- }\r
- if (this.lastInsertClass != targetElClass){\r
- Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);\r
- this.lastInsertClass = targetElClass;\r
- }\r
- }\r
- }\r
- return dragElClass;\r
- },\r
-\r
- // private\r
- onNodeOut : function(n, dd, e, data){\r
- this.removeDropIndicators(n);\r
- },\r
-\r
- // private\r
- onNodeDrop : function(n, dd, e, data){\r
- if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {\r
- return false;\r
- }\r
- var pt = this.getDropPoint(e, n, dd);\r
- if (n != this.ms.fs.body.dom)\r
- n = this.view.findItemFromChild(n);\r
-\r
- if(this.ms.appendOnly) {\r
- insertAt = this.view.store.getCount();\r
- } else {\r
- insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);\r
- if (pt == "below") {\r
- insertAt++;\r
- }\r
- }\r
-\r
- var dir = false;\r
-\r
- // Validate if dragging within the same MultiSelect\r
- if (data.sourceView == this.view) {\r
- // If the first element to be inserted below is the target node, remove it\r
- if (pt == "below") {\r
- if (data.viewNodes[0] == n) {\r
- data.viewNodes.shift();\r
- }\r
- } else { // If the last element to be inserted above is the target node, remove it\r
- if (data.viewNodes[data.viewNodes.length - 1] == n) {\r
- data.viewNodes.pop();\r
- }\r
- }\r
-\r
- // Nothing to drop...\r
- if (!data.viewNodes.length) {\r
- return false;\r
- }\r
-\r
- // If we are moving DOWN, then because a store.remove() takes place first,\r
- // the insertAt must be decremented.\r
- if (insertAt > this.view.store.indexOf(data.records[0])) {\r
- dir = 'down';\r
- insertAt--;\r
- }\r
- }\r
-\r
- for (var i = 0; i < data.records.length; i++) {\r
- var r = data.records[i];\r
- if (data.sourceView) {\r
- data.sourceView.store.remove(r);\r
- }\r
- this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);\r
- var si = this.view.store.sortInfo;\r
- if(si){\r
- this.view.store.sort(si.field, si.direction);\r
- }\r
- }\r
- return true;\r
- },\r
-\r
- // private\r
- removeDropIndicators : function(n){\r
- if(n){\r
- Ext.fly(n).removeClass([\r
- "x-view-drag-insert-above",\r
- "x-view-drag-insert-left",\r
- "x-view-drag-insert-right",\r
- "x-view-drag-insert-below"]);\r
- this.lastInsertClass = "_noclass";\r
- }\r
- },\r
-\r
- // private\r
- setDroppable: function(ddGroup){\r
- if (!ddGroup) return;\r
- if (Ext.isArray(ddGroup)) {\r
- Ext.each(ddGroup, this.setDroppable, this);\r
- return;\r
- }\r
- this.addToGroup(ddGroup);\r
- }\r
-});\r