/hippo/src/main/webapp/ext/src/widgets/grid/GridPanel.js

http://hdbc.googlecode.com/ · JavaScript · 952 lines · 291 code · 41 blank · 620 comment · 41 complexity · 2f681cbcb1f37753e9aebf25ba18257b MD5 · raw file 

    

  1. /*!
    2. 

  2.  * Ext JS Library 3.0.0
    3. 

  3.  * Copyright(c) 2006-2009 Ext JS, LLC
    4. 

  4.  * licensing@extjs.com
    5. 

  5.  * http://www.extjs.com/license
    6. 

  6.  */
    7. 

  7. /**

    8. 

  8.  * @class Ext.grid.GridPanel

    9. 

  9.  * @extends Ext.Panel

    10. 

  10.  * <p>This class represents the primary interface of a component based grid control to represent data

    11. 

  11.  * in a tabular format of rows and columns. The GridPanel is composed of the following:</p>

    12. 

  12.  * <div class="mdetail-params"><ul>

    13. 

  13.  * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)

    14. 

  14.  * <div class="sub-desc"></div></li>

    15. 

  15.  * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup

    16. 

  16.  * <div class="sub-desc"></div></li>

    17. 

  17.  * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface 

    18. 

  18.  * <div class="sub-desc"></div></li>

    19. 

  19.  * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior 

    20. 

  20.  * <div class="sub-desc"></div></li>

    21. 

  21.  * </ul></div>

    22. 

  22.  * <p>Example usage:</p>

    23. 

  23.  * <pre><code>

    24. 

  24. var grid = new Ext.grid.GridPanel({

    25. 

  25.     {@link #store}: new (@link Ext.data.Store}({

    26. 

  26.         {@link Ext.data.Store#autoDestroy autoDestroy}: true,

    27. 

  27.         {@link Ext.data.Store#reader reader}: reader,

    28. 

  28.         {@link Ext.data.Store#data data}: xg.dummyData

    29. 

  29.     }),

    30. 

  30.     {@link #columns}: [

    31. 

  31.         {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},

    32. 

  32.         {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},

    33. 

  33.         {header: 'Change', width: 120, sortable: true, dataIndex: 'change'},

    34. 

  34.         {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'},

    35. 

  35.         // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype

    36. 

  36.         {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'}

    37. 

  37.     ],

    38. 

  38.     {@link #viewConfig}: {

    39. 

  39.         {@link Ext.grid.GridView#forceFit forceFit}: true,

    40. 

  40. 

    41. 

  41. //      Return CSS class to apply to rows depending upon data values

    42. 

  42.         {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {

    43. 

  43.             var c = record.{@link Ext.data.Record#get get}('change');

    44. 

  44.             if (c < 0) {

    45. 

  45.                 return 'price-fall';

    46. 

  46.             } else if (c > 0) {

    47. 

  47.                 return 'price-rise';

    48. 

  48.             }

    49. 

  49.         }

    50. 

  50.     },

    51. 

  51.     {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),

    52. 

  52.     width: 600,

    53. 

  53.     height: 300,

    54. 

  54.     frame: true,

    55. 

  55.     title: 'Framed with Row Selection and Horizontal Scrolling',

    56. 

  56.     iconCls: 'icon-grid'

    57. 

  57. });

    58. 

  58.  * </code></pre>

    59. 

  59.  * <p><b><u>Notes:</u></b></p>

    60. 

  60.  * <div class="mdetail-params"><ul>

    61. 

  61.  * <li>Although this class inherits many configuration options from base classes, some of them

    62. 

  62.  * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will

    63. 

  63.  * have no effect.</li>

    64. 

  64.  * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to

    65. 

  65.  * scroll its rows. These dimensions can either be set explicitly through the

    66. 

  66.  * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>

    67. 

  67.  * configuration options or implicitly set by using the grid as a child item of a

    68. 

  68.  * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}

    69. 

  69.  * provide the sizing of its child items (for example the Container of the Grid may specify

    70. 

  70.  * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>

    71. 

  71.  * <li>To access the data in a Grid, it is necessary to use the data model encapsulated

    72. 

  72.  * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>

    73. 

  73.  * </ul></div>

    74. 

  74.  * @constructor

    75. 

  75.  * @param {Object} config The config object

    76. 

  76.  * @xtype grid

    77. 

  77.  */

    78. 

  78. Ext.grid.GridPanel = Ext.extend(Ext.Panel, {

    79. 

  79.     /**

    80. 

  80.      * @cfg {String} autoExpandColumn

    81. 

  81.      * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in

    82. 

  82.      * this grid that should expand to fill unused space. This value specified here can not

    83. 

  83.      * be <tt>0</tt>.</p>

    84. 

  84.      * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with

    85. 

  85.      * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>

    86. 

  86.      * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>

    87. 

  87.      * for additional details.</p>

    88. 

  88.      * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>

    89. 

  89.      */

    90. 

  90.     autoExpandColumn : false,

    91. 

  91.     /**

    92. 

  92.      * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>

    93. 

  93.      * can have (if enabled). Defaults to <tt>1000</tt>.

    94. 

  94.      */

    95. 

  95.     autoExpandMax : 1000,

    96. 

  96.     /**

    97. 

  97.      * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>

    98. 

  98.      * can have (if enabled). Defaults to <tt>50</tt>.

    99. 

  99.      */

    100. 

  100.     autoExpandMin : 50,

    101. 

  101.     /**

    102. 

  102.      * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.

    103. 

  103.      * Default is <tt>false</tt>.

    104. 

  104.      */

    105. 

  105.     columnLines : false,

    106. 

  106.     /**

    107. 

  107.      * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.

    108. 

  108.      */

    109. 

  109.     /**

    110. 

  110.      * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).

    111. 

  111.      */

    112. 

  112.     /**

    113. 

  113.      * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a

    114. 

  114.      * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the

    115. 

  115.      * <tt>{@link #colModel}</tt> configuration property.

    116. 

  116.      */

    117. 

  117.     /**

    118. 

  118.      * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.

    119. 

  119.      */

    120. 

  120.     /**

    121. 

  121.      * @cfg {String} ddText

    122. 

  122.      * Configures the text in the drag proxy.  Defaults to:

    123. 

  123.      * <pre><code>

    124. 

  124.      * ddText : '{0} selected row{1}'

    125. 

  125.      * </code></pre>

    126. 

  126.      * <tt>{0}</tt> is replaced with the number of selected rows.

    127. 

  127.      */

    128. 

  128.     ddText : '{0} selected row{1}',

    129. 

  129.     /**

    130. 

  130.      * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>

    131. 

  131.      * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row

    132. 

  132.      * structure deferred so that layouts with GridPanels appear more quickly.</p>

    133. 

  133.      */

    134. 

  134.     deferRowRender : true,

    135. 

  135.     /**

    136. 

  136.      * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>

    137. 

  137.      * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>

    138. 

  138.      */

    139. 

  139.     /**

    140. 

  140.      * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.

    141. 

  141.      */

    142. 

  142.     /**

    143. 

  143.      * @cfg {Boolean} enableColumnHide Defaults to <tt>true</tt> to enable hiding of columns with the header context menu.

    144. 

  144.      */

    145. 

  145.     enableColumnHide : true,

    146. 

  146.     /**

    147. 

  147.      * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>

    148. 

  148.      * to turn off column reordering via drag drop.

    149. 

  149.      */

    150. 

  150.     enableColumnMove : true,

    151. 

  151.     /**

    152. 

  152.      * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>

    153. 

  153.      * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to

    154. 

  154.      * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b>

    155. 

  155.      * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt>

    156. 

  156.      * property.</p>

    157. 

  157.      * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of

    158. 

  158.      * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},

    159. 

  159.      * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able

    160. 

  160.      * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>

    161. 

  161.      */

    162. 

  162.     enableDragDrop : false,

    163. 

  163.     /**

    164. 

  164.      * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.

    165. 

  165.      */

    166. 

  166.     enableHdMenu : true,

    167. 

  167.     /**

    168. 

  168.      * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.

    169. 

  169.      */

    170. 

  170.     /**

    171. 

  171.      * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while

    172. 

  172.      * loading. Defaults to <code>false</code>.

    173. 

  173.      */

    174. 

  174.     loadMask : false,

    175. 

  175.     /**

    176. 

  176.      * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.

    177. 

  177.      */

    178. 

  178.     /**

    179. 

  179.      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.

    180. 

  180.      */

    181. 

  181.     minColumnWidth : 25,

    182. 

  182.     /**

    183. 

  183.      * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.

    184. 

  184.      */

    185. 

  185.     /**

    186. 

  186.      * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide

    187. 

  187.      * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).

    188. 

  188.      */

    189. 

  189.     /**

    190. 

  190.      * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).

    191. 

  191.      */

    192. 

  192.     /**

    193. 

  193.      * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>.

    194. 

  194.      * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of

    195. 

  195.      * the grid. A default CSS rule is provided which sets a background colour, but you can override this

    196. 

  196.      * with a rule which either overrides the <b>background-color</b> style using the '!important'

    197. 

  197.      * modifier, or which uses a CSS selector of higher specificity.</p>

    198. 

  198.      */

    199. 

  199.     stripeRows : false,

    200. 

  200.     /**

    201. 

  201.      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>

    202. 

  202.      * for GridPanel, but <tt>false</tt> for EditorGridPanel.

    203. 

  203.      */

    204. 

  204.     trackMouseOver : true,

    205. 

  205.     /**

    206. 

  206.      * @cfg {Array} stateEvents

    207. 

  207.      * An array of events that, when fired, should trigger this component to save its state.

    208. 

  208.      * Defaults to:<pre><code>

    209. 

  209.      * stateEvents: ['columnmove', 'columnresize', 'sortchange']

    210. 

  210.      * </code></pre>

    211. 

  211.      * <p>These can be any types of events supported by this component, including browser or

    212. 

  212.      * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>

    213. 

  213.      * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring

    214. 

  214.      * Component state.</p>

    215. 

  215.      */

    216. 

  216.     stateEvents : ['columnmove', 'columnresize', 'sortchange'],

    217. 

  217.     /**

    218. 

  218.      * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set

    219. 

  219.      * before a call to {@link Ext.Component#render render()}.

    220. 

  220.      */

    221. 

  221.     view : null,

    222. 

  222.     /**

    223. 

  223.      * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of

    224. 

  224.      * the config options available for {@link Ext.grid.GridView} can be specified here. This option

    225. 

  225.      * is ignored if <tt>{@link #view}</tt> is specified.

    226. 

  226.      */

    227. 

  227. 

    228. 

  228.     // private

    229. 

  229.     rendered : false,

    230. 

  230.     // private

    231. 

  231.     viewReady : false,

    232. 

  232. 

    233. 

  233.     // private

    234. 

  234.     initComponent : function(){

    235. 

  235.         Ext.grid.GridPanel.superclass.initComponent.call(this);

    236. 

  236. 

    237. 

  237.         if(this.columnLines){

    238. 

  238.             this.cls = (this.cls || '') + ' x-grid-with-col-lines';

    239. 

  239.         }

    240. 

  240.         // override any provided value since it isn't valid

    241. 

  241.         // and is causing too many bug reports ;)

    242. 

  242.         this.autoScroll = false;

    243. 

  243.         this.autoWidth = false;

    244. 

  244. 

    245. 

  245.         if(Ext.isArray(this.columns)){

    246. 

  246.             this.colModel = new Ext.grid.ColumnModel(this.columns);

    247. 

  247.             delete this.columns;

    248. 

  248.         }

    249. 

  249. 

    250. 

  250.         // check and correct shorthanded configs

    251. 

  251.         if(this.ds){

    252. 

  252.             this.store = this.ds;

    253. 

  253.             delete this.ds;

    254. 

  254.         }

    255. 

  255.         if(this.cm){

    256. 

  256.             this.colModel = this.cm;

    257. 

  257.             delete this.cm;

    258. 

  258.         }

    259. 

  259.         if(this.sm){

    260. 

  260.             this.selModel = this.sm;

    261. 

  261.             delete this.sm;

    262. 

  262.         }

    263. 

  263.         this.store = Ext.StoreMgr.lookup(this.store);

    264. 

  264. 

    265. 

  265.         this.addEvents(

    266. 

  266.             // raw events

    267. 

  267.             /**

    268. 

  268.              * @event click

    269. 

  269.              * The raw click event for the entire grid.

    270. 

  270.              * @param {Ext.EventObject} e

    271. 

  271.              */

    272. 

  272.             'click',

    273. 

  273.             /**

    274. 

  274.              * @event dblclick

    275. 

  275.              * The raw dblclick event for the entire grid.

    276. 

  276.              * @param {Ext.EventObject} e

    277. 

  277.              */

    278. 

  278.             'dblclick',

    279. 

  279.             /**

    280. 

  280.              * @event contextmenu

    281. 

  281.              * The raw contextmenu event for the entire grid.

    282. 

  282.              * @param {Ext.EventObject} e

    283. 

  283.              */

    284. 

  284.             'contextmenu',

    285. 

  285.             /**

    286. 

  286.              * @event mousedown

    287. 

  287.              * The raw mousedown event for the entire grid.

    288. 

  288.              * @param {Ext.EventObject} e

    289. 

  289.              */

    290. 

  290.             'mousedown',

    291. 

  291.             /**

    292. 

  292.              * @event mouseup

    293. 

  293.              * The raw mouseup event for the entire grid.

    294. 

  294.              * @param {Ext.EventObject} e

    295. 

  295.              */

    296. 

  296.             'mouseup',

    297. 

  297.             /**

    298. 

  298.              * @event mouseover

    299. 

  299.              * The raw mouseover event for the entire grid.

    300. 

  300.              * @param {Ext.EventObject} e

    301. 

  301.              */

    302. 

  302.             'mouseover',

    303. 

  303.             /**

    304. 

  304.              * @event mouseout

    305. 

  305.              * The raw mouseout event for the entire grid.

    306. 

  306.              * @param {Ext.EventObject} e

    307. 

  307.              */

    308. 

  308.             'mouseout',

    309. 

  309.             /**

    310. 

  310.              * @event keypress

    311. 

  311.              * The raw keypress event for the entire grid.

    312. 

  312.              * @param {Ext.EventObject} e

    313. 

  313.              */

    314. 

  314.             'keypress',

    315. 

  315.             /**

    316. 

  316.              * @event keydown

    317. 

  317.              * The raw keydown event for the entire grid.

    318. 

  318.              * @param {Ext.EventObject} e

    319. 

  319.              */

    320. 

  320.             'keydown',

    321. 

  321. 

    322. 

  322.             // custom events

    323. 

  323.             /**

    324. 

  324.              * @event cellmousedown

    325. 

  325.              * Fires before a cell is clicked

    326. 

  326.              * @param {Grid} this

    327. 

  327.              * @param {Number} rowIndex

    328. 

  328.              * @param {Number} columnIndex

    329. 

  329.              * @param {Ext.EventObject} e

    330. 

  330.              */

    331. 

  331.             'cellmousedown',

    332. 

  332.             /**

    333. 

  333.              * @event rowmousedown

    334. 

  334.              * Fires before a row is clicked

    335. 

  335.              * @param {Grid} this

    336. 

  336.              * @param {Number} rowIndex

    337. 

  337.              * @param {Ext.EventObject} e

    338. 

  338.              */

    339. 

  339.             'rowmousedown',

    340. 

  340.             /**

    341. 

  341.              * @event headermousedown

    342. 

  342.              * Fires before a header is clicked

    343. 

  343.              * @param {Grid} this

    344. 

  344.              * @param {Number} columnIndex

    345. 

  345.              * @param {Ext.EventObject} e

    346. 

  346.              */

    347. 

  347.             'headermousedown',

    348. 

  348. 

    349. 

  349.             /**

    350. 

  350.              * @event cellclick

    351. 

  351.              * Fires when a cell is clicked.

    352. 

  352.              * The data for the cell is drawn from the {@link Ext.data.Record Record}

    353. 

  353.              * for this row. To access the data in the listener function use the

    354. 

  354.              * following technique:

    355. 

  355.              * <pre><code>

    356. 

  356. function(grid, rowIndex, columnIndex, e) {

    357. 

  357.     var record = grid.getStore().getAt(rowIndex);  // Get the Record

    358. 

  358.     var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name

    359. 

  359.     var data = record.get(fieldName);

    360. 

  360. }

    361. 

  361. </code></pre>

    362. 

  362.              * @param {Grid} this

    363. 

  363.              * @param {Number} rowIndex

    364. 

  364.              * @param {Number} columnIndex

    365. 

  365.              * @param {Ext.EventObject} e

    366. 

  366.              */

    367. 

  367.             'cellclick',

    368. 

  368.             /**

    369. 

  369.              * @event celldblclick

    370. 

  370.              * Fires when a cell is double clicked

    371. 

  371.              * @param {Grid} this

    372. 

  372.              * @param {Number} rowIndex

    373. 

  373.              * @param {Number} columnIndex

    374. 

  374.              * @param {Ext.EventObject} e

    375. 

  375.              */

    376. 

  376.             'celldblclick',

    377. 

  377.             /**

    378. 

  378.              * @event rowclick

    379. 

  379.              * Fires when a row is clicked

    380. 

  380.              * @param {Grid} this

    381. 

  381.              * @param {Number} rowIndex

    382. 

  382.              * @param {Ext.EventObject} e

    383. 

  383.              */

    384. 

  384.             'rowclick',

    385. 

  385.             /**

    386. 

  386.              * @event rowdblclick

    387. 

  387.              * Fires when a row is double clicked

    388. 

  388.              * @param {Grid} this

    389. 

  389.              * @param {Number} rowIndex

    390. 

  390.              * @param {Ext.EventObject} e

    391. 

  391.              */

    392. 

  392.             'rowdblclick',

    393. 

  393.             /**

    394. 

  394.              * @event headerclick

    395. 

  395.              * Fires when a header is clicked

    396. 

  396.              * @param {Grid} this

    397. 

  397.              * @param {Number} columnIndex

    398. 

  398.              * @param {Ext.EventObject} e

    399. 

  399.              */

    400. 

  400.             'headerclick',

    401. 

  401.             /**

    402. 

  402.              * @event headerdblclick

    403. 

  403.              * Fires when a header cell is double clicked

    404. 

  404.              * @param {Grid} this

    405. 

  405.              * @param {Number} columnIndex

    406. 

  406.              * @param {Ext.EventObject} e

    407. 

  407.              */

    408. 

  408.             'headerdblclick',

    409. 

  409.             /**

    410. 

  410.              * @event rowcontextmenu

    411. 

  411.              * Fires when a row is right clicked

    412. 

  412.              * @param {Grid} this

    413. 

  413.              * @param {Number} rowIndex

    414. 

  414.              * @param {Ext.EventObject} e

    415. 

  415.              */

    416. 

  416.             'rowcontextmenu',

    417. 

  417.             /**

    418. 

  418.              * @event cellcontextmenu

    419. 

  419.              * Fires when a cell is right clicked

    420. 

  420.              * @param {Grid} this

    421. 

  421.              * @param {Number} rowIndex

    422. 

  422.              * @param {Number} cellIndex

    423. 

  423.              * @param {Ext.EventObject} e

    424. 

  424.              */

    425. 

  425.             'cellcontextmenu',

    426. 

  426.             /**

    427. 

  427.              * @event headercontextmenu

    428. 

  428.              * Fires when a header is right clicked

    429. 

  429.              * @param {Grid} this

    430. 

  430.              * @param {Number} columnIndex

    431. 

  431.              * @param {Ext.EventObject} e

    432. 

  432.              */

    433. 

  433.             'headercontextmenu',

    434. 

  434.             /**

    435. 

  435.              * @event bodyscroll

    436. 

  436.              * Fires when the body element is scrolled

    437. 

  437.              * @param {Number} scrollLeft

    438. 

  438.              * @param {Number} scrollTop

    439. 

  439.              */

    440. 

  440.             'bodyscroll',

    441. 

  441.             /**

    442. 

  442.              * @event columnresize

    443. 

  443.              * Fires when the user resizes a column

    444. 

  444.              * @param {Number} columnIndex

    445. 

  445.              * @param {Number} newSize

    446. 

  446.              */

    447. 

  447.             'columnresize',

    448. 

  448.             /**

    449. 

  449.              * @event columnmove

    450. 

  450.              * Fires when the user moves a column

    451. 

  451.              * @param {Number} oldIndex

    452. 

  452.              * @param {Number} newIndex

    453. 

  453.              */

    454. 

  454.             'columnmove',

    455. 

  455.             /**

    456. 

  456.              * @event sortchange

    457. 

  457.              * Fires when the grid's store sort changes

    458. 

  458.              * @param {Grid} this

    459. 

  459.              * @param {Object} sortInfo An object with the keys field and direction

    460. 

  460.              */

    461. 

  461.             'sortchange',

    462. 

  462.             /**

    463. 

  463.              * @event reconfigure

    464. 

  464.              * Fires when the grid is reconfigured with a new store and/or column model.

    465. 

  465.              * @param {Grid} this

    466. 

  466.              * @param {Ext.data.Store} store The new store

    467. 

  467.              * @param {Ext.grid.ColumnModel} colModel The new column model

    468. 

  468.              */

    469. 

  469.             'reconfigure'

    470. 

  470.         );

    471. 

  471.     },

    472. 

  472. 

    473. 

  473.     // private

    474. 

  474.     onRender : function(ct, position){

    475. 

  475.         Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);

    476. 

  476. 

    477. 

  477.         var c = this.body;

    478. 

  478. 

    479. 

  479.         this.el.addClass('x-grid-panel');

    480. 

  480. 

    481. 

  481.         var view = this.getView();

    482. 

  482.         view.init(this);

    483. 

  483. 

    484. 

  484.         this.mon(c, {

    485. 

  485.             mousedown: this.onMouseDown,

    486. 

  486.             click: this.onClick,

    487. 

  487.             dblclick: this.onDblClick,

    488. 

  488.             contextmenu: this.onContextMenu,

    489. 

  489.             keydown: this.onKeyDown,

    490. 

  490.             scope: this

    491. 

  491.         });

    492. 

  492. 

    493. 

  493.         this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress']);

    494. 

  494. 

    495. 

  495.         this.getSelectionModel().init(this);

    496. 

  496.         this.view.render();

    497. 

  497.     },

    498. 

  498. 

    499. 

  499.     // private

    500. 

  500.     initEvents : function(){

    501. 

  501.         Ext.grid.GridPanel.superclass.initEvents.call(this);

    502. 

  502. 

    503. 

  503.         if(this.loadMask){

    504. 

  504.             this.loadMask = new Ext.LoadMask(this.bwrap,

    505. 

  505.                     Ext.apply({store:this.store}, this.loadMask));

    506. 

  506.         }

    507. 

  507.     },

    508. 

  508. 

    509. 

  509.     initStateEvents : function(){

    510. 

  510.         Ext.grid.GridPanel.superclass.initStateEvents.call(this);

    511. 

  511.         this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});

    512. 

  512.     },

    513. 

  513. 

    514. 

  514.     applyState : function(state){

    515. 

  515.         var cm = this.colModel;

    516. 

  516.         var cs = state.columns;

    517. 

  517.         if(cs){

    518. 

  518.             for(var i = 0, len = cs.length; i < len; i++){

    519. 

  519.                 var s = cs[i];

    520. 

  520.                 var c = cm.getColumnById(s.id);

    521. 

  521.                 if(c){

    522. 

  522.                     c.hidden = s.hidden;

    523. 

  523.                     c.width = s.width;

    524. 

  524.                     var oldIndex = cm.getIndexById(s.id);

    525. 

  525.                     if(oldIndex != i){

    526. 

  526.                         cm.moveColumn(oldIndex, i);

    527. 

  527.                     }

    528. 

  528.                 }

    529. 

  529.             }

    530. 

  530.         }

    531. 

  531.         if(state.sort && this.store){

    532. 

  532.             this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);

    533. 

  533.         }

    534. 

  534.         delete state.columns;

    535. 

  535.         delete state.sort;

    536. 

  536.         Ext.grid.GridPanel.superclass.applyState.call(this, state);

    537. 

  537.     },

    538. 

  538. 

    539. 

  539.     getState : function(){

    540. 

  540.         var o = {columns: []};

    541. 

  541.         for(var i = 0, c; (c = this.colModel.config[i]); i++){

    542. 

  542.             o.columns[i] = {

    543. 

  543.                 id: c.id,

    544. 

  544.                 width: c.width

    545. 

  545.             };

    546. 

  546.             if(c.hidden){

    547. 

  547.                 o.columns[i].hidden = true;

    548. 

  548.             }

    549. 

  549.         }

    550. 

  550.         if(this.store){

    551. 

  551.             var ss = this.store.getSortState();

    552. 

  552.             if(ss){

    553. 

  553.                 o.sort = ss;

    554. 

  554.             }

    555. 

  555.         }

    556. 

  556.         return o;

    557. 

  557.     },

    558. 

  558. 

    559. 

  559.     // private

    560. 

  560.     afterRender : function(){

    561. 

  561.         Ext.grid.GridPanel.superclass.afterRender.call(this);

    562. 

  562.         this.view.layout();

    563. 

  563.         if(this.deferRowRender){

    564. 

  564.             this.view.afterRender.defer(10, this.view);

    565. 

  565.         }else{

    566. 

  566.             this.view.afterRender();

    567. 

  567.         }

    568. 

  568.         this.viewReady = true;

    569. 

  569.     },

    570. 

  570. 

    571. 

  571.     /**

    572. 

  572.      * <p>Reconfigures the grid to use a different Store and Column Model

    573. 

  573.      * and fires the 'reconfigure' event. The View will be bound to the new

    574. 

  574.      * objects and refreshed.</p>

    575. 

  575.      * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become

    576. 

  576.      * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the

    577. 

  577.      * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound

    578. 

  578.      * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring

    579. 

  579.      * with the new data.</p>

    580. 

  580.      * @param {Ext.data.Store} store The new {@link Ext.data.Store} object

    581. 

  581.      * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object

    582. 

  582.      */

    583. 

  583.     reconfigure : function(store, colModel){

    584. 

  584.         if(this.loadMask){

    585. 

  585.             this.loadMask.destroy();

    586. 

  586.             this.loadMask = new Ext.LoadMask(this.bwrap,

    587. 

  587.                     Ext.apply({}, {store:store}, this.initialConfig.loadMask));

    588. 

  588.         }

    589. 

  589.         this.view.initData(store, colModel);

    590. 

  590.         this.store = store;

    591. 

  591.         this.colModel = colModel;

    592. 

  592.         if(this.rendered){

    593. 

  593.             this.view.refresh(true);

    594. 

  594.         }

    595. 

  595.         this.fireEvent('reconfigure', this, store, colModel);

    596. 

  596.     },

    597. 

  597. 

    598. 

  598.     // private

    599. 

  599.     onKeyDown : function(e){

    600. 

  600.         this.fireEvent('keydown', e);

    601. 

  601.     },

    602. 

  602. 

    603. 

  603.     // private

    604. 

  604.     onDestroy : function(){

    605. 

  605.         if(this.rendered){

    606. 

  606.             var c = this.body;

    607. 

  607.             c.removeAllListeners();

    608. 

  608.             c.update('');

    609. 

  609.             Ext.destroy(this.view, this.loadMask);

    610. 

  610.         }else if(this.store && this.store.autoDestroy){

    611. 

  611.             this.store.destroy();

    612. 

  612.         }

    613. 

  613.         Ext.destroy(this.colModel, this.selModel);

    614. 

  614.         this.store = this.selModel = this.colModel = this.view = this.loadMask = null;

    615. 

  615.         Ext.grid.GridPanel.superclass.onDestroy.call(this);

    616. 

  616.     },

    617. 

  617. 

    618. 

  618.     // private

    619. 

  619.     processEvent : function(name, e){

    620. 

  620.         this.fireEvent(name, e);

    621. 

  621.         var t = e.getTarget();

    622. 

  622.         var v = this.view;

    623. 

  623.         var header = v.findHeaderIndex(t);

    624. 

  624.         if(header !== false){

    625. 

  625.             this.fireEvent('header' + name, this, header, e);

    626. 

  626.         }else{

    627. 

  627.             var row = v.findRowIndex(t);

    628. 

  628.             var cell = v.findCellIndex(t);

    629. 

  629.             if(row !== false){

    630. 

  630.                 this.fireEvent('row' + name, this, row, e);

    631. 

  631.                 if(cell !== false){

    632. 

  632.                     this.fireEvent('cell' + name, this, row, cell, e);

    633. 

  633.                 }

    634. 

  634.             }

    635. 

  635.         }

    636. 

  636.     },

    637. 

  637. 

    638. 

  638.     // private

    639. 

  639.     onClick : function(e){

    640. 

  640.         this.processEvent('click', e);

    641. 

  641.     },

    642. 

  642. 

    643. 

  643.     // private

    644. 

  644.     onMouseDown : function(e){

    645. 

  645.         this.processEvent('mousedown', e);

    646. 

  646.     },

    647. 

  647. 

    648. 

  648.     // private

    649. 

  649.     onContextMenu : function(e, t){

    650. 

  650.         this.processEvent('contextmenu', e);

    651. 

  651.     },

    652. 

  652. 

    653. 

  653.     // private

    654. 

  654.     onDblClick : function(e){

    655. 

  655.         this.processEvent('dblclick', e);

    656. 

  656.     },

    657. 

  657. 

    658. 

  658.     // private

    659. 

  659.     walkCells : function(row, col, step, fn, scope){

    660. 

  660.         var cm = this.colModel, clen = cm.getColumnCount();

    661. 

  661.         var ds = this.store, rlen = ds.getCount(), first = true;

    662. 

  662.         if(step < 0){

    663. 

  663.             if(col < 0){

    664. 

  664.                 row--;

    665. 

  665.                 first = false;

    666. 

  666.             }

    667. 

  667.             while(row >= 0){

    668. 

  668.                 if(!first){

    669. 

  669.                     col = clen-1;

    670. 

  670.                 }

    671. 

  671.                 first = false;

    672. 

  672.                 while(col >= 0){

    673. 

  673.                     if(fn.call(scope || this, row, col, cm) === true){

    674. 

  674.                         return [row, col];

    675. 

  675.                     }

    676. 

  676.                     col--;

    677. 

  677.                 }

    678. 

  678.                 row--;

    679. 

  679.             }

    680. 

  680.         } else {

    681. 

  681.             if(col >= clen){

    682. 

  682.                 row++;

    683. 

  683.                 first = false;

    684. 

  684.             }

    685. 

  685.             while(row < rlen){

    686. 

  686.                 if(!first){

    687. 

  687.                     col = 0;

    688. 

  688.                 }

    689. 

  689.                 first = false;

    690. 

  690.                 while(col < clen){

    691. 

  691.                     if(fn.call(scope || this, row, col, cm) === true){

    692. 

  692.                         return [row, col];

    693. 

  693.                     }

    694. 

  694.                     col++;

    695. 

  695.                 }

    696. 

  696.                 row++;

    697. 

  697.             }

    698. 

  698.         }

    699. 

  699.         return null;

    700. 

  700.     },

    701. 

  701. 

    702. 

  702.     // private

    703. 

  703.     onResize : function(){

    704. 

  704.         Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);

    705. 

  705.         if(this.viewReady){

    706. 

  706.             this.view.layout();

    707. 

  707.         }

    708. 

  708.     },

    709. 

  709. 

    710. 

  710.     /**

    711. 

  711.      * Returns the grid's underlying element.

    712. 

  712.      * @return {Element} The element

    713. 

  713.      */

    714. 

  714.     getGridEl : function(){

    715. 

  715.         return this.body;

    716. 

  716.     },

    717. 

  717. 

    718. 

  718.     // private for compatibility, overridden by editor grid

    719. 

  719.     stopEditing : Ext.emptyFn,

    720. 

  720. 

    721. 

  721.     /**

    722. 

  722.      * Returns the grid's selection model configured by the <code>{@link #selModel}</code>

    723. 

  723.      * configuration option. If no selection model was configured, this will create

    724. 

  724.      * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.

    725. 

  725.      * @return {SelectionModel}

    726. 

  726.      */

    727. 

  727.     getSelectionModel : function(){

    728. 

  728.         if(!this.selModel){

    729. 

  729.             this.selModel = new Ext.grid.RowSelectionModel(

    730. 

  730.                     this.disableSelection ? {selectRow: Ext.emptyFn} : null);

    731. 

  731.         }

    732. 

  732.         return this.selModel;

    733. 

  733.     },

    734. 

  734. 

    735. 

  735.     /**

    736. 

  736.      * Returns the grid's data store.

    737. 

  737.      * @return {Ext.data.Store} The store

    738. 

  738.      */

    739. 

  739.     getStore : function(){

    740. 

  740.         return this.store;

    741. 

  741.     },

    742. 

  742. 

    743. 

  743.     /**

    744. 

  744.      * Returns the grid's ColumnModel.

    745. 

  745.      * @return {Ext.grid.ColumnModel} The column model

    746. 

  746.      */

    747. 

  747.     getColumnModel : function(){

    748. 

  748.         return this.colModel;

    749. 

  749.     },

    750. 

  750. 

    751. 

  751.     /**

    752. 

  752.      * Returns the grid's GridView object.

    753. 

  753.      * @return {Ext.grid.GridView} The grid view

    754. 

  754.      */

    755. 

  755.     getView : function(){

    756. 

  756.         if(!this.view){

    757. 

  757.             this.view = new Ext.grid.GridView(this.viewConfig);

    758. 

  758.         }

    759. 

  759.         return this.view;

    760. 

  760.     },

    761. 

  761.     /**

    762. 

  762.      * Called to get grid's drag proxy text, by default returns this.ddText.

    763. 

  763.      * @return {String} The text

    764. 

  764.      */

    765. 

  765.     getDragDropText : function(){

    766. 

  766.         var count = this.selModel.getCount();

    767. 

  767.         return String.format(this.ddText, count, count == 1 ? '' : 's');

    768. 

  768.     }

    769. 

  769. 

    770. 

  770.     /** 

    771. 

  771.      * @cfg {String/Number} activeItem 

    772. 

  772.      * @hide 

    773. 

  773.      */

    774. 

  774.     /** 

    775. 

  775.      * @cfg {Boolean} autoDestroy 

    776. 

  776.      * @hide 

    777. 

  777.      */

    778. 

  778.     /** 

    779. 

  779.      * @cfg {Object/String/Function} autoLoad 

    780. 

  780.      * @hide 

    781. 

  781.      */

    782. 

  782.     /** 

    783. 

  783.      * @cfg {Boolean} autoWidth 

    784. 

  784.      * @hide 

    785. 

  785.      */

    786. 

  786.     /** 

    787. 

  787.      * @cfg {Boolean/Number} bufferResize 

    788. 

  788.      * @hide 

    789. 

  789.      */

    790. 

  790.     /** 

    791. 

  791.      * @cfg {String} defaultType 

    792. 

  792.      * @hide 

    793. 

  793.      */

    794. 

  794.     /** 

    795. 

  795.      * @cfg {Object} defaults 

    796. 

  796.      * @hide 

    797. 

  797.      */

    798. 

  798.     /** 

    799. 

  799.      * @cfg {Boolean} hideBorders 

    800. 

  800.      * @hide 

    801. 

  801.      */

    802. 

  802.     /** 

    803. 

  803.      * @cfg {Mixed} items 

    804. 

  804.      * @hide 

    805. 

  805.      */

    806. 

  806.     /** 

    807. 

  807.      * @cfg {String} layout 

    808. 

  808.      * @hide 

    809. 

  809.      */

    810. 

  810.     /** 

    811. 

  811.      * @cfg {Object} layoutConfig 

    812. 

  812.      * @hide 

    813. 

  813.      */

    814. 

  814.     /** 

    815. 

  815.      * @cfg {Boolean} monitorResize 

    816. 

  816.      * @hide 

    817. 

  817.      */

    818. 

  818.     /** 

    819. 

  819.      * @property items 

    820. 

  820.      * @hide 

    821. 

  821.      */

    822. 

  822.     /** 

    823. 

  823.      * @method add 

    824. 

  824.      * @hide 

    825. 

  825.      */

    826. 

  826.     /** 

    827. 

  827.      * @method cascade 

    828. 

  828.      * @hide 

    829. 

  829.      */

    830. 

  830.     /** 

    831. 

  831.      * @method doLayout 

    832. 

  832.      * @hide 

    833. 

  833.      */

    834. 

  834.     /** 

    835. 

  835.      * @method find 

    836. 

  836.      * @hide 

    837. 

  837.      */

    838. 

  838.     /** 

    839. 

  839.      * @method findBy 

    840. 

  840.      * @hide 

    841. 

  841.      */

    842. 

  842.     /** 

    843. 

  843.      * @method findById 

    844. 

  844.      * @hide 

    845. 

  845.      */

    846. 

  846.     /** 

    847. 

  847.      * @method findByType 

    848. 

  848.      * @hide 

    849. 

  849.      */

    850. 

  850.     /** 

    851. 

  851.      * @method getComponent 

    852. 

  852.      * @hide 

    853. 

  853.      */

    854. 

  854.     /** 

    855. 

  855.      * @method getLayout 

    856. 

  856.      * @hide 

    857. 

  857.      */

    858. 

  858.     /** 

    859. 

  859.      * @method getUpdater 

    860. 

  860.      * @hide 

    861. 

  861.      */

    862. 

  862.     /** 

    863. 

  863.      * @method insert 

    864. 

  864.      * @hide 

    865. 

  865.      */

    866. 

  866.     /** 

    867. 

  867.      * @method load 

    868. 

  868.      * @hide 

    869. 

  869.      */

    870. 

  870.     /** 

    871. 

  871.      * @method remove 

    872. 

  872.      * @hide 

    873. 

  873.      */

    874. 

  874.     /** 

    875. 

  875.      * @event add 

    876. 

  876.      * @hide 

    877. 

  877.      */

    878. 

  878.     /** 

    879. 

  879.      * @event afterLayout 

    880. 

  880.      * @hide 

    881. 

  881.      */

    882. 

  882.     /** 

    883. 

  883.      * @event beforeadd 

    884. 

  884.      * @hide 

    885. 

  885.      */

    886. 

  886.     /** 

    887. 

  887.      * @event beforeremove 

    888. 

  888.      * @hide 

    889. 

  889.      */

    890. 

  890.     /** 

    891. 

  891.      * @event remove 

    892. 

  892.      * @hide 

    893. 

  893.      */

    894. 

  894. 

    895. 

  895. 

    896. 

  896. 

    897. 

  897.     /**

    898. 

  898.      * @cfg {String} allowDomMove  @hide

    899. 

  899.      */

    900. 

  900.     /**

    901. 

  901.      * @cfg {String} autoEl @hide

    902. 

  902.      */

    903. 

  903.     /**

    904. 

  904.      * @cfg {String} applyTo  @hide

    905. 

  905.      */

    906. 

  906.     /**

    907. 

  907.      * @cfg {String} autoScroll  @hide

    908. 

  908.      */

    909. 

  909.     /**

    910. 

  910.      * @cfg {String} bodyBorder  @hide

    911. 

  911.      */

    912. 

  912.     /**

    913. 

  913.      * @cfg {String} bodyStyle  @hide

    914. 

  914.      */

    915. 

  915.     /**

    916. 

  916.      * @cfg {String} contentEl  @hide

    917. 

  917.      */

    918. 

  918.     /**

    919. 

  919.      * @cfg {String} disabledClass  @hide

    920. 

  920.      */

    921. 

  921.     /**

    922. 

  922.      * @cfg {String} elements  @hide

    923. 

  923.      */

    924. 

  924.     /**

    925. 

  925.      * @cfg {String} html  @hide

    926. 

  926.      */

    927. 

  927.     /**

    928. 

  928.      * @cfg {Boolean} preventBodyReset

    929. 

  929.      * @hide

    930. 

  930.      */

    931. 

  931.     /**

    932. 

  932.      * @property disabled

    933. 

  933.      * @hide

    934. 

  934.      */

    935. 

  935.     /**

    936. 

  936.      * @method applyToMarkup

    937. 

  937.      * @hide

    938. 

  938.      */

    939. 

  939.     /**

    940. 

  940.      * @method enable

    941. 

  941.      * @hide

    942. 

  942.      */

    943. 

  943.     /**

    944. 

  944.      * @method disable

    945. 

  945.      * @hide

    946. 

  946.      */

    947. 

  947.     /**

    948. 

  948.      * @method setDisabled

    949. 

  949.      * @hide

    950. 

  950.      */

    951. 

  951. });

    952. 

  952. Ext.reg('grid', Ext.grid.GridPanel);
    953.