4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.grid.ViewPanel
14 * @extends Roo.grid.Grid
15 * Class for creating and editable grid.
16 * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
17 * The container MUST have some type of size defined for the grid to fill. The container will be
18 * automatically set to position relative if it isn't already.
19 * @param {Object} dataSource The data model to bind to
20 * @param {Object} colModel The column model with info about this grid's columns
22 Roo.grid.ViewPanel = function(container, config){
23 // initialize the container
24 this.container = Roo.get(container);
25 this.container.update("");
26 this.container.setStyle("overflow", "hidden");
27 this.container.addClass('x-grid-container');
29 this.id = this.container.id;
31 Roo.apply(this, config);
32 // check and correct shorthanded configs
34 this.dataSource = this.ds;
38 this.colModel = this.cm;
42 this.selModel = this.sm;
47 this.selModel = Roo.factory(this.selModel, Roo.grid);
48 this.sm = this.selModel;
49 this.sm.xmodule = this.xmodule || false;
51 if (typeof(this.colModel.config) == 'undefined') {
52 this.colModel = new Roo.grid.ColumnModel(this.colModel);
53 this.cm = this.colModel;
54 this.cm.xmodule = this.xmodule || false;
56 if (this.dataSource) {
57 this.dataSource= Roo.factory(this.dataSource, Roo.data);
58 this.ds = this.dataSource;
59 this.ds.xmodule = this.xmodule || false;
66 this.container.setWidth(this.width);
70 this.container.setHeight(this.height);
77 * The raw click event for the entire grid.
78 * @param {Roo.EventObject} e
83 * The raw dblclick event for the entire grid.
84 * @param {Roo.EventObject} e
89 * The raw contextmenu event for the entire grid.
90 * @param {Roo.EventObject} e
95 * The raw mousedown event for the entire grid.
96 * @param {Roo.EventObject} e
101 * The raw mouseup event for the entire grid.
102 * @param {Roo.EventObject} e
107 * The raw mouseover event for the entire grid.
108 * @param {Roo.EventObject} e
113 * The raw mouseout event for the entire grid.
114 * @param {Roo.EventObject} e
119 * The raw keypress event for the entire grid.
120 * @param {Roo.EventObject} e
125 * The raw keydown event for the entire grid.
126 * @param {Roo.EventObject} e
134 * Fires when a cell is clicked
136 * @param {Number} rowIndex
137 * @param {Number} columnIndex
138 * @param {Roo.EventObject} e
142 * @event celldblclick
143 * Fires when a cell is double clicked
145 * @param {Number} rowIndex
146 * @param {Number} columnIndex
147 * @param {Roo.EventObject} e
149 "celldblclick" : true,
152 * Fires when a row is clicked
154 * @param {Number} rowIndex
155 * @param {Roo.EventObject} e
160 * Fires when a row is double clicked
162 * @param {Number} rowIndex
163 * @param {Roo.EventObject} e
165 "rowdblclick" : true,
168 * Fires when a header is clicked
170 * @param {Number} columnIndex
171 * @param {Roo.EventObject} e
173 "headerclick" : true,
175 * @event headerdblclick
176 * Fires when a header cell is double clicked
178 * @param {Number} columnIndex
179 * @param {Roo.EventObject} e
181 "headerdblclick" : true,
183 * @event rowcontextmenu
184 * Fires when a row is right clicked
186 * @param {Number} rowIndex
187 * @param {Roo.EventObject} e
189 "rowcontextmenu" : true,
191 * @event cellcontextmenu
192 * Fires when a cell is right clicked
194 * @param {Number} rowIndex
195 * @param {Number} cellIndex
196 * @param {Roo.EventObject} e
198 "cellcontextmenu" : true,
200 * @event headercontextmenu
201 * Fires when a header is right clicked
203 * @param {Number} columnIndex
204 * @param {Roo.EventObject} e
206 "headercontextmenu" : true,
209 * Fires when the body element is scrolled
210 * @param {Number} scrollLeft
211 * @param {Number} scrollTop
215 * @event columnresize
216 * Fires when the user resizes a column
217 * @param {Number} columnIndex
218 * @param {Number} newSize
220 "columnresize" : true,
223 * Fires when the user moves a column
224 * @param {Number} oldIndex
225 * @param {Number} newIndex
230 * Fires when row(s) start being dragged
232 * @param {Roo.GridDD} dd The drag drop object
233 * @param {event} e The raw browser event
238 * Fires when a drag operation is complete
240 * @param {Roo.GridDD} dd The drag drop object
241 * @param {event} e The raw browser event
246 * Fires when dragged row(s) are dropped on a valid DD target
248 * @param {Roo.GridDD} dd The drag drop object
249 * @param {String} targetId The target drag drop object
250 * @param {event} e The raw browser event
255 * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
257 * @param {Roo.GridDD} dd The drag drop object
258 * @param {String} targetId The target drag drop object
259 * @param {event} e The raw browser event
264 * Fires when the dragged row(s) first cross another DD target while being dragged
266 * @param {Roo.GridDD} dd The drag drop object
267 * @param {String} targetId The target drag drop object
268 * @param {event} e The raw browser event
273 * Fires when the dragged row(s) leave another DD target while being dragged
275 * @param {Roo.GridDD} dd The drag drop object
276 * @param {String} targetId The target drag drop object
277 * @param {event} e The raw browser event
282 * Fires when a row is rendered, so you can change add a style to it.
283 * @param {GridView} gridview The grid view
284 * @param {Object} rowcfg contains record rowIndex and rowClass - set rowClass to add a style.
290 * Fires when the grid is rendered
296 Roo.grid.ViewPanel.superclass.constructor.call(this);
300 Roo.extend(Roo.grid.ViewPanel, Roo.grid.Grid, {
302 * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
303 * of a fixed width. Default is false.
306 * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
309 * Called once after all setup has been completed and the grid is ready to be rendered.
310 * @return {Roo.grid.Grid} this
314 var c = this.container;
315 // try to detect autoHeight/width mode
316 if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
317 this.autoHeight = true;
319 var view = this.getView();
322 c.on("click", this.onClick, this);
323 c.on("dblclick", this.onDblClick, this);
324 c.on("contextmenu", this.onContextMenu, this);
325 c.on("keydown", this.onKeyDown, this);
327 this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
329 this.getSelectionModel().init(this);
334 this.loadMask = new Roo.LoadMask(this.container,
335 Roo.apply({store:this.dataSource}, this.loadMask));
339 if (this.toolbar && this.toolbar.xtype) {
340 this.toolbar.container = this.getView().getHeaderPanel(true);
341 this.toolbar = new Roo.Toolbar(this.toolbar);
343 if (this.footer && this.footer.xtype) {
344 this.footer.dataSource = this.getDataSource();
345 this.footer.container = this.getView().getFooterPanel(true);
346 this.footer = Roo.factory(this.footer, Roo);
348 if (this.dropTarget && this.dropTarget.xtype) {
349 delete this.dropTarget.xtype;
350 this.dropTarget = new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
354 this.rendered = true;
355 this.fireEvent('render', this);