/hippo/src/main/webapp/ext/pkgs/pkg-grid-property-debug.js

http://hdbc.googlecode.com/ · JavaScript · 370 lines · 188 code · 28 blank · 154 comment · 25 complexity · ac8b12f62cb05cbe56957c1a9ca3ab32 MD5 · raw file

  1. /*!
  2. * Ext JS Library 3.0.0
  3. * Copyright(c) 2006-2009 Ext JS, LLC
  4. * licensing@extjs.com
  5. * http://www.extjs.com/license
  6. */
  7. /**
  8. * @class Ext.grid.PropertyRecord
  9. * A specific {@link Ext.data.Record} type that represents a name/value pair and is made to work with the
  10. * {@link Ext.grid.PropertyGrid}. Typically, PropertyRecords do not need to be created directly as they can be
  11. * created implicitly by simply using the appropriate data configs either via the {@link Ext.grid.PropertyGrid#source}
  12. * config property or by calling {@link Ext.grid.PropertyGrid#setSource}. However, if the need arises, these records
  13. * can also be created explicitly as shwon below. Example usage:
  14. * <pre><code>
  15. var rec = new Ext.grid.PropertyRecord({
  16. name: 'Birthday',
  17. value: new Date(Date.parse('05/26/1972'))
  18. });
  19. // Add record to an already populated grid
  20. grid.store.addSorted(rec);
  21. </code></pre>
  22. * @constructor
  23. * @param {Object} config A data object in the format: {name: [name], value: [value]}. The specified value's type
  24. * will be read automatically by the grid to determine the type of editor to use when displaying it.
  25. */
  26. Ext.grid.PropertyRecord = Ext.data.Record.create([
  27. {name:'name',type:'string'}, 'value'
  28. ]);
  29. /**
  30. * @class Ext.grid.PropertyStore
  31. * @extends Ext.util.Observable
  32. * A custom wrapper for the {@link Ext.grid.PropertyGrid}'s {@link Ext.data.Store}. This class handles the mapping
  33. * between the custom data source objects supported by the grid and the {@link Ext.grid.PropertyRecord} format
  34. * required for compatibility with the underlying store. Generally this class should not need to be used directly --
  35. * the grid's data should be accessed from the underlying store via the {@link #store} property.
  36. * @constructor
  37. * @param {Ext.grid.Grid} grid The grid this store will be bound to
  38. * @param {Object} source The source data config object
  39. */
  40. Ext.grid.PropertyStore = function(grid, source){
  41. this.grid = grid;
  42. this.store = new Ext.data.Store({
  43. recordType : Ext.grid.PropertyRecord
  44. });
  45. this.store.on('update', this.onUpdate, this);
  46. if(source){
  47. this.setSource(source);
  48. }
  49. Ext.grid.PropertyStore.superclass.constructor.call(this);
  50. };
  51. Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
  52. // protected - should only be called by the grid. Use grid.setSource instead.
  53. setSource : function(o){
  54. this.source = o;
  55. this.store.removeAll();
  56. var data = [];
  57. for(var k in o){
  58. if(this.isEditableValue(o[k])){
  59. data.push(new Ext.grid.PropertyRecord({name: k, value: o[k]}, k));
  60. }
  61. }
  62. this.store.loadRecords({records: data}, {}, true);
  63. },
  64. // private
  65. onUpdate : function(ds, record, type){
  66. if(type == Ext.data.Record.EDIT){
  67. var v = record.data.value;
  68. var oldValue = record.modified.value;
  69. if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){
  70. this.source[record.id] = v;
  71. record.commit();
  72. this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue);
  73. }else{
  74. record.reject();
  75. }
  76. }
  77. },
  78. // private
  79. getProperty : function(row){
  80. return this.store.getAt(row);
  81. },
  82. // private
  83. isEditableValue: function(val){
  84. if(Ext.isDate(val)){
  85. return true;
  86. }
  87. return !(Ext.isObject(val) || Ext.isFunction(val));
  88. },
  89. // private
  90. setValue : function(prop, value){
  91. this.source[prop] = value;
  92. this.store.getById(prop).set('value', value);
  93. },
  94. // protected - should only be called by the grid. Use grid.getSource instead.
  95. getSource : function(){
  96. return this.source;
  97. }
  98. });
  99. /**
  100. * @class Ext.grid.PropertyColumnModel
  101. * @extends Ext.grid.ColumnModel
  102. * A custom column model for the {@link Ext.grid.PropertyGrid}. Generally it should not need to be used directly.
  103. * @constructor
  104. * @param {Ext.grid.Grid} grid The grid this store will be bound to
  105. * @param {Object} source The source data config object
  106. */
  107. Ext.grid.PropertyColumnModel = function(grid, store){
  108. var g = Ext.grid,
  109. f = Ext.form;
  110. this.grid = grid;
  111. g.PropertyColumnModel.superclass.constructor.call(this, [
  112. {header: this.nameText, width:50, sortable: true, dataIndex:'name', id: 'name', menuDisabled:true},
  113. {header: this.valueText, width:50, resizable:false, dataIndex: 'value', id: 'value', menuDisabled:true}
  114. ]);
  115. this.store = store;
  116. var bfield = new f.Field({
  117. autoCreate: {tag: 'select', children: [
  118. {tag: 'option', value: 'true', html: 'true'},
  119. {tag: 'option', value: 'false', html: 'false'}
  120. ]},
  121. getValue : function(){
  122. return this.el.value == 'true';
  123. }
  124. });
  125. this.editors = {
  126. 'date' : new g.GridEditor(new f.DateField({selectOnFocus:true})),
  127. 'string' : new g.GridEditor(new f.TextField({selectOnFocus:true})),
  128. 'number' : new g.GridEditor(new f.NumberField({selectOnFocus:true, style:'text-align:left;'})),
  129. 'boolean' : new g.GridEditor(bfield)
  130. };
  131. this.renderCellDelegate = this.renderCell.createDelegate(this);
  132. this.renderPropDelegate = this.renderProp.createDelegate(this);
  133. };
  134. Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
  135. // private - strings used for locale support
  136. nameText : 'Name',
  137. valueText : 'Value',
  138. dateFormat : 'm/j/Y',
  139. // private
  140. renderDate : function(dateVal){
  141. return dateVal.dateFormat(this.dateFormat);
  142. },
  143. // private
  144. renderBool : function(bVal){
  145. return bVal ? 'true' : 'false';
  146. },
  147. // private
  148. isCellEditable : function(colIndex, rowIndex){
  149. return colIndex == 1;
  150. },
  151. // private
  152. getRenderer : function(col){
  153. return col == 1 ?
  154. this.renderCellDelegate : this.renderPropDelegate;
  155. },
  156. // private
  157. renderProp : function(v){
  158. return this.getPropertyName(v);
  159. },
  160. // private
  161. renderCell : function(val){
  162. var rv = val;
  163. if(Ext.isDate(val)){
  164. rv = this.renderDate(val);
  165. }else if(typeof val == 'boolean'){
  166. rv = this.renderBool(val);
  167. }
  168. return Ext.util.Format.htmlEncode(rv);
  169. },
  170. // private
  171. getPropertyName : function(name){
  172. var pn = this.grid.propertyNames;
  173. return pn && pn[name] ? pn[name] : name;
  174. },
  175. // private
  176. getCellEditor : function(colIndex, rowIndex){
  177. var p = this.store.getProperty(rowIndex),
  178. n = p.data.name,
  179. val = p.data.value;
  180. if(this.grid.customEditors[n]){
  181. return this.grid.customEditors[n];
  182. }
  183. if(Ext.isDate(val)){
  184. return this.editors.date;
  185. }else if(typeof val == 'number'){
  186. return this.editors.number;
  187. }else if(typeof val == 'boolean'){
  188. return this.editors['boolean'];
  189. }else{
  190. return this.editors.string;
  191. }
  192. },
  193. // inherit docs
  194. destroy : function(){
  195. Ext.grid.PropertyColumnModel.superclass.destroy.call(this);
  196. for(var ed in this.editors){
  197. Ext.destroy(ed);
  198. }
  199. }
  200. });
  201. /**
  202. * @class Ext.grid.PropertyGrid
  203. * @extends Ext.grid.EditorGridPanel
  204. * A specialized grid implementation intended to mimic the traditional property grid as typically seen in
  205. * development IDEs. Each row in the grid represents a property of some object, and the data is stored
  206. * as a set of name/value pairs in {@link Ext.grid.PropertyRecord}s. Example usage:
  207. * <pre><code>
  208. var grid = new Ext.grid.PropertyGrid({
  209. title: 'Properties Grid',
  210. autoHeight: true,
  211. width: 300,
  212. renderTo: 'grid-ct',
  213. source: {
  214. "(name)": "My Object",
  215. "Created": new Date(Date.parse('10/15/2006')),
  216. "Available": false,
  217. "Version": .01,
  218. "Description": "A test object"
  219. }
  220. });
  221. </code></pre>
  222. * @constructor
  223. * @param {Object} config The grid config object
  224. */
  225. Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
  226. /**
  227. * @cfg {Object} propertyNames An object containing property name/display name pairs.
  228. * If specified, the display name will be shown in the name column instead of the property name.
  229. */
  230. /**
  231. * @cfg {Object} source A data object to use as the data source of the grid (see {@link #setSource} for details).
  232. */
  233. /**
  234. * @cfg {Object} customEditors An object containing name/value pairs of custom editor type definitions that allow
  235. * the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing
  236. * of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
  237. * associated with a custom input control by specifying a custom editor. The name of the editor
  238. * type should correspond with the name of the property that will use the editor. Example usage:
  239. * <pre><code>
  240. var grid = new Ext.grid.PropertyGrid({
  241. ...
  242. customEditors: {
  243. 'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
  244. },
  245. source: {
  246. 'Start Time': '10:00 AM'
  247. }
  248. });
  249. </code></pre>
  250. */
  251. // private config overrides
  252. enableColumnMove:false,
  253. stripeRows:false,
  254. trackMouseOver: false,
  255. clicksToEdit:1,
  256. enableHdMenu : false,
  257. viewConfig : {
  258. forceFit:true
  259. },
  260. // private
  261. initComponent : function(){
  262. this.customEditors = this.customEditors || {};
  263. this.lastEditRow = null;
  264. var store = new Ext.grid.PropertyStore(this);
  265. this.propStore = store;
  266. var cm = new Ext.grid.PropertyColumnModel(this, store);
  267. store.store.sort('name', 'ASC');
  268. this.addEvents(
  269. /**
  270. * @event beforepropertychange
  271. * Fires before a property value changes. Handlers can return false to cancel the property change
  272. * (this will internally call {@link Ext.data.Record#reject} on the property's record).
  273. * @param {Object} source The source data object for the grid (corresponds to the same object passed in
  274. * as the {@link #source} config property).
  275. * @param {String} recordId The record's id in the data store
  276. * @param {Mixed} value The current edited property value
  277. * @param {Mixed} oldValue The original property value prior to editing
  278. */
  279. 'beforepropertychange',
  280. /**
  281. * @event propertychange
  282. * Fires after a property value has changed.
  283. * @param {Object} source The source data object for the grid (corresponds to the same object passed in
  284. * as the {@link #source} config property).
  285. * @param {String} recordId The record's id in the data store
  286. * @param {Mixed} value The current edited property value
  287. * @param {Mixed} oldValue The original property value prior to editing
  288. */
  289. 'propertychange'
  290. );
  291. this.cm = cm;
  292. this.ds = store.store;
  293. Ext.grid.PropertyGrid.superclass.initComponent.call(this);
  294. this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){
  295. if(colIndex === 0){
  296. this.startEditing.defer(200, this, [rowIndex, 1]);
  297. return false;
  298. }
  299. }, this);
  300. },
  301. // private
  302. onRender : function(){
  303. Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);
  304. this.getGridEl().addClass('x-props-grid');
  305. },
  306. // private
  307. afterRender: function(){
  308. Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
  309. if(this.source){
  310. this.setSource(this.source);
  311. }
  312. },
  313. /**
  314. * Sets the source data object containing the property data. The data object can contain one or more name/value
  315. * pairs representing all of the properties of an object to display in the grid, and this data will automatically
  316. * be loaded into the grid's {@link #store}. The values should be supplied in the proper data type if needed,
  317. * otherwise string type will be assumed. If the grid already contains data, this method will replace any
  318. * existing data. See also the {@link #source} config value. Example usage:
  319. * <pre><code>
  320. grid.setSource({
  321. "(name)": "My Object",
  322. "Created": new Date(Date.parse('10/15/2006')), // date type
  323. "Available": false, // boolean type
  324. "Version": .01, // decimal type
  325. "Description": "A test object"
  326. });
  327. </code></pre>
  328. * @param {Object} source The data object
  329. */
  330. setSource : function(source){
  331. this.propStore.setSource(source);
  332. },
  333. /**
  334. * Gets the source data object containing the property data. See {@link #setSource} for details regarding the
  335. * format of the data object.
  336. * @return {Object} The data object
  337. */
  338. getSource : function(){
  339. return this.propStore.getSource();
  340. }
  341. });
  342. Ext.reg("propertygrid", Ext.grid.PropertyGrid);