+Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
+ hide : function(){
+ // center panel can't be hidden
+ },
+
+ show : function(){
+ // center panel can't be hidden
+ },
+
+ getMinWidth: function(){
+ return this.minWidth;
+ },
+
+ getMinHeight: function(){
+ return this.minHeight;
+ }
+});
+
+
+Roo.NorthLayoutRegion = function(mgr, config){
+ Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.TOP;
+ this.split.orientation = Roo.SplitBar.VERTICAL;
+ this.split.el.addClass("x-layout-split-v");
+ }
+ var size = config.initialSize || config.height;
+ if(typeof size != "undefined"){
+ this.el.setHeight(size);
+ }
+};
+Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.VERTICAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ box.height += this.split.el.getHeight();
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ box.height -= this.split.el.getHeight();
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y+box.height);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.updateBody(box.width, null);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+
+Roo.SouthLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.BOTTOM;
+ this.split.orientation = Roo.SplitBar.VERTICAL;
+ this.split.el.addClass("x-layout-split-v");
+ }
+ var size = config.initialSize || config.height;
+ if(typeof size != "undefined"){
+ this.el.setHeight(size);
+ }
+};
+Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.VERTICAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sh = this.split.el.getHeight();
+ box.height += sh;
+ box.y -= sh;
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sh = this.split.el.getHeight();
+ box.height -= sh;
+ box.y += sh;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y-sh);
+ this.split.el.setWidth(box.width);
+ }
+ if(this.collapsed){
+ this.updateBody(box.width, null);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+
+Roo.EastLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.RIGHT;
+ this.split.orientation = Roo.SplitBar.HORIZONTAL;
+ this.split.el.addClass("x-layout-split-h");
+ }
+ var size = config.initialSize || config.width;
+ if(typeof size != "undefined"){
+ this.el.setWidth(size);
+ }
+};
+Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.HORIZONTAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ var sw = this.split.el.getWidth();
+ box.width += sw;
+ box.x -= sw;
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ box.x += sw;
+ }
+ if(this.collapsed){
+ this.updateBody(null, box.height);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+
+Roo.WestLayoutRegion = function(mgr, config){
+ Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
+ if(this.split){
+ this.split.placement = Roo.SplitBar.LEFT;
+ this.split.orientation = Roo.SplitBar.HORIZONTAL;
+ this.split.el.addClass("x-layout-split-h");
+ }
+ var size = config.initialSize || config.width;
+ if(typeof size != "undefined"){
+ this.el.setWidth(size);
+ }
+};
+Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
+ orientation: Roo.SplitBar.HORIZONTAL,
+ getBox : function(){
+ if(this.collapsed){
+ return this.collapsedEl.getBox();
+ }
+ var box = this.el.getBox();
+ if(this.split){
+ box.width += this.split.el.getWidth();
+ }
+ return box;
+ },
+
+ updateBox : function(box){
+ if(this.split && !this.collapsed){
+ var sw = this.split.el.getWidth();
+ box.width -= sw;
+ this.split.el.setLeft(box.x+box.width);
+ this.split.el.setTop(box.y);
+ this.split.el.setHeight(box.height);
+ }
+ if(this.collapsed){
+ this.updateBody(null, box.height);
+ }
+ Roo.LayoutRegion.prototype.updateBox.call(this, box);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/*
+ * Private internal class for reading and applying state
+ */
+Roo.LayoutStateManager = function(layout){
+ // default empty state
+ this.state = {
+ north: {},
+ south: {},
+ east: {},
+ west: {}
+ };
+};
+
+Roo.LayoutStateManager.prototype = {
+ init : function(layout, provider){
+ this.provider = provider;
+ var state = provider.get(layout.id+"-layout-state");
+ if(state){
+ var wasUpdating = layout.isUpdating();
+ if(!wasUpdating){
+ layout.beginUpdate();
+ }
+ for(var key in state){
+ if(typeof state[key] != "function"){
+ var rstate = state[key];
+ var r = layout.getRegion(key);
+ if(r && rstate){
+ if(rstate.size){
+ r.resizeTo(rstate.size);
+ }
+ if(rstate.collapsed == true){
+ r.collapse(true);
+ }else{
+ r.expand(null, true);
+ }
+ }
+ }
+ }
+ if(!wasUpdating){
+ layout.endUpdate();
+ }
+ this.state = state;
+ }
+ this.layout = layout;
+ layout.on("regionresized", this.onRegionResized, this);
+ layout.on("regioncollapsed", this.onRegionCollapsed, this);
+ layout.on("regionexpanded", this.onRegionExpanded, this);
+ },
+
+ storeState : function(){
+ this.provider.set(this.layout.id+"-layout-state", this.state);
+ },
+
+ onRegionResized : function(region, newSize){
+ this.state[region.getPosition()].size = newSize;
+ this.storeState();
+ },
+
+ onRegionCollapsed : function(region){
+ this.state[region.getPosition()].collapsed = true;
+ this.storeState();
+ },
+
+ onRegionExpanded : function(region){
+ this.state[region.getPosition()].collapsed = false;
+ this.storeState();
+ }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.ContentPanel
+ * @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * A basic ContentPanel element.
+ * @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
+ * @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
+ * @cfg {Boolean|Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
+ * @cfg {Boolean} closable True if the panel can be closed/removed
+ * @cfg {Boolean} background True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Roo.Toolbar} toolbar A toolbar for this panel
+ * @cfg {Boolean} autoScroll True to scroll overflow in this panel (use with {@link #fitToFrame})
+ * @cfg {String} title The title for this panel
+ * @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
+ * @cfg {String} url Calls {@link #setUrl} with this value
+ * @cfg {String} region (center|north|south|east|west) [required] which region to put this panel on (when used with xtype constructors)
+ * @cfg {String|Object} params When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
+ * @cfg {String} style Extra style to add to the content panel
+ * @cfg {Roo.menu.Menu} menu popup menu
+
+ * @constructor
+ * Create a new ContentPanel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+Roo.ContentPanel = function(el, config, content){
+
+ /*
+ if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ if (config && config.parentLayout) {
+ el = config.parentLayout.el.createChild();
+ }
+ */
+ if(el.autoCreate){ // xtype is available if this is called from factory
+ config = el;
+ el = Roo.id();
+ }
+ this.el = Roo.get(el);
+ if(!this.el && config && config.autoCreate){
+ if(typeof config.autoCreate == "object"){
+ if(!config.autoCreate.id){
+ config.autoCreate.id = config.id||el;
+ }
+ this.el = Roo.DomHelper.append(document.body,
+ config.autoCreate, true);
+ }else{
+ this.el = Roo.DomHelper.append(document.body,
+ {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
+ }
+ }
+
+
+ this.closable = false;
+ this.loaded = false;
+ this.active = false;
+ if(typeof config == "string"){
+ this.title = config;
+ }else{
+ Roo.apply(this, config);
+ }
+
+ if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+ this.wrapEl = this.el.wrap();
+ this.toolbar.container = this.el.insertSibling(false, 'before');
+ this.toolbar = new Roo.Toolbar(this.toolbar);
+ }
+
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+ if (!this.wrapEl) {
+ this.wrapEl = this.el.wrap();
+ }
+
+ this.footer.container = this.wrapEl.createChild();
+
+ this.footer = Roo.factory(this.footer, Roo);
+
+ }
+
+ if(this.resizeEl){
+ this.resizeEl = Roo.get(this.resizeEl, true);
+ }else{
+ this.resizeEl = this.el;
+ }
+ // handle view.xtype
+
+
+
+
+ this.addEvents({
+ /**
+ * @event activate
+ * Fires when this panel is activated.
+ * @param {Roo.ContentPanel} this
+ */
+ "activate" : true,
+ /**
+ * @event deactivate
+ * Fires when this panel is activated.
+ * @param {Roo.ContentPanel} this
+ */
+ "deactivate" : true,
+
+ /**
+ * @event resize
+ * Fires when this panel is resized if fitToFrame is true.
+ * @param {Roo.ContentPanel} this
+ * @param {Number} width The width after any component adjustments
+ * @param {Number} height The height after any component adjustments
+ */
+ "resize" : true,
+
+ /**
+ * @event render
+ * Fires when this tab is created
+ * @param {Roo.ContentPanel} this
+ */
+ "render" : true
+
+
+ });
+
+
+
+
+ if(this.autoScroll){
+ this.resizeEl.setStyle("overflow", "auto");
+ } else {
+ // fix randome scrolling
+ this.el.on('scroll', function() {
+ Roo.log('fix random scolling');
+ this.scrollTo('top',0);
+ });
+ }
+ content = content || this.content;
+ if(content){
+ this.setContent(content);
+ }
+ if(config && config.url){
+ this.setUrl(this.url, this.params, this.loadOnce);
+ }
+
+
+
+ Roo.ContentPanel.superclass.constructor.call(this);
+
+ if (this.view && typeof(this.view.xtype) != 'undefined') {
+ this.view.el = this.el.appendChild(document.createElement("div"));
+ this.view = Roo.factory(this.view);
+ this.view.render && this.view.render(false, '');
+ }
+
+
+ this.fireEvent('render', this);
+};
+
+Roo.extend(Roo.ContentPanel, Roo.util.Observable, {
+ tabTip:'',
+ setRegion : function(region){
+ this.region = region;
+ if(region){
+ this.el.replaceClass("x-layout-inactive-content", "x-layout-active-content");
+ }else{
+ this.el.replaceClass("x-layout-active-content", "x-layout-inactive-content");
+ }
+ },
+
+ /**
+ * Returns the toolbar for this Panel if one was configured.
+ * @return {Roo.Toolbar}
+ */
+ getToolbar : function(){
+ return this.toolbar;
+ },
+
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent("deactivate", this);
+ }else{
+ this.fireEvent("activate", this);
+ }
+ },
+ /**
+ * Updates this panel's element
+ * @param {String} content The new content
+ * @param {Boolean} loadScripts (optional) true to look for and process scripts
+ */
+ setContent : function(content, loadScripts){
+ this.el.update(content, loadScripts);
+ },
+
+ ignoreResize : function(w, h){
+ if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
+ return true;
+ }else{
+ this.lastSize = {width: w, height: h};
+ return false;
+ }
+ },
+ /**
+ * Get the {@link Roo.UpdateManager} for this panel. Enables you to perform Ajax updates.
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ getUpdateManager : function(){
+ return this.el.getUpdateManager();
+ },
+ /**
+ * Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use {@link #setUrl}.
+ * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
+<pre><code>
+panel.load({
+ url: "your-url.php",
+ params: {param1: "foo", param2: "bar"}, // or a URL encoded string
+ callback: yourFunction,
+ scope: yourObject, //(optional scope)
+ discardUrl: false,
+ nocache: false,
+ text: "Loading...",
+ timeout: 30,
+ scripts: false
+});
+</code></pre>
+ * The only required property is <i>url</i>. The optional properties <i>nocache</i>, <i>text</i> and <i>scripts</i>
+ * are shorthand for <i>disableCaching</i>, <i>indicatorText</i> and <i>loadScripts</i> and are used to set their associated property on this panel UpdateManager instance.
+ * @param {String/Object} params (optional) The parameters to pass as either a URL encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
+ * @param {Function} callback (optional) Callback when transaction is complete -- called with signature (oElement, bSuccess, oResponse)
+ * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
+ * @return {Roo.ContentPanel} this
+ */
+ load : function(){
+ var um = this.el.getUpdateManager();
+ um.update.apply(um, arguments);
+ return this;
+ },
+
+
+ /**
+ * Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
+ * @param {String/Function} url The URL to load the content from or a function to call to get the URL
+ * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
+ * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
+ * @return {Roo.UpdateManager} The UpdateManager
+ */
+ setUrl : function(url, params, loadOnce){
+ if(this.refreshDelegate){
+ this.removeListener("activate", this.refreshDelegate);
+ }
+ this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
+ this.on("activate", this.refreshDelegate);
+ return this.el.getUpdateManager();
+ },
+
+ _handleRefresh : function(url, params, loadOnce){
+ if(!loadOnce || !this.loaded){
+ var updater = this.el.getUpdateManager();
+ updater.update(url, params, this._setLoaded.createDelegate(this));
+ }
+ },
+
+ _setLoaded : function(){
+ this.loaded = true;
+ },
+
+ /**
+ * Returns this panel's id
+ * @return {String}
+ */
+ getId : function(){
+ return this.el.id;
+ },
+
+ /**
+ * Returns this panel's element - used by regiosn to add.
+ * @return {Roo.Element}
+ */
+ getEl : function(){
+ return this.wrapEl || this.el;
+ },
+
+ adjustForComponents : function(width, height)
+ {
+ //Roo.log('adjustForComponents ');
+ if(this.resizeEl != this.el){
+ width -= this.el.getFrameWidth('lr');
+ height -= this.el.getFrameWidth('tb');
+ }
+ if(this.toolbar){
+ var te = this.toolbar.getEl();
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+ if(this.footer){
+ var te = this.footer.getEl();
+ //Roo.log("footer:" + te.getHeight());
+
+ height -= te.getHeight();
+ te.setWidth(width);
+ }
+
+
+ if(this.adjustments){
+ width += this.adjustments[0];
+ height += this.adjustments[1];
+ }
+ return {"width": width, "height": height};
+ },
+
+ setSize : function(width, height){
+ if(this.fitToFrame && !this.ignoreResize(width, height)){
+ if(this.fitContainer && this.resizeEl != this.el){
+ this.el.setSize(width, height);
+ }
+ var size = this.adjustForComponents(width, height);
+ this.resizeEl.setSize(this.autoWidth ? "auto" : size.width, this.autoHeight ? "auto" : size.height);
+ this.fireEvent('resize', this, size.width, size.height);
+ }
+ },
+
+ /**
+ * Returns this panel's title
+ * @return {String}
+ */
+ getTitle : function(){
+ return this.title;
+ },
+
+ /**
+ * Set this panel's title
+ * @param {String} title
+ */
+ setTitle : function(title){
+ this.title = title;
+ if(this.region){
+ this.region.updatePanelTitle(this, title);
+ }
+ },
+
+ /**
+ * Returns true is this panel was configured to be closable
+ * @return {Boolean}
+ */
+ isClosable : function(){
+ return this.closable;
+ },
+
+ beforeSlide : function(){
+ this.el.clip();
+ this.resizeEl.clip();
+ },
+
+ afterSlide : function(){
+ this.el.unclip();
+ this.resizeEl.unclip();
+ },
+
+ /**
+ * Force a content refresh from the URL specified in the {@link #setUrl} method.
+ * Will fail silently if the {@link #setUrl} method has not been called.
+ * This does not activate the panel, just updates its content.
+ */
+ refresh : function(){
+ if(this.refreshDelegate){
+ this.loaded = false;
+ this.refreshDelegate();
+ }
+ },
+
+ /**
+ * Destroys this panel
+ */
+ destroy : function(){
+ this.el.removeAllListeners();
+ var tempEl = document.createElement("span");
+ tempEl.appendChild(this.el.dom);
+ tempEl.innerHTML = "";
+ this.el.remove();
+ this.el = null;
+ },
+
+ /**
+ * form - if the content panel contains a form - this is a reference to it.
+ * @type {Roo.form.Form}
+ */
+ form : false,
+ /**
+ * view - if the content panel contains a view (Roo.DatePicker / Roo.View / Roo.JsonView)
+ * This contains a reference to it.
+ * @type {Roo.View}
+ */
+ view : false,
+
+ /**
+ * Adds a xtype elements to the panel - currently only supports Forms, View, JsonView.
+ * <pre><code>
+
+layout.addxtype({
+ xtype : 'Form',
+ items: [ .... ]
+ }
+);
+
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+
+ addxtype : function(cfg) {
+ if(cfg.xtype.match(/^UploadCropbox$/)) {
+
+ this.cropbox = new Roo.factory(cfg);
+
+ this.cropbox.render(this.el);
+
+ return this.cropbox;
+ }
+ // add form..
+ if (cfg.xtype.match(/^Form$/)) {
+
+ var el;
+ //if (this.footer) {
+ // el = this.footer.container.insertSibling(false, 'before');
+ //} else {
+ el = this.el.createChild();
+ //}
+
+ this.form = new Roo.form.Form(cfg);
+
+
+ if ( this.form.allItems.length) {
+ this.form.render(el.dom);
+ }
+ return this.form;
+ }
+ // should only have one of theses..
+ if ([ 'View', 'JsonView', 'DatePicker'].indexOf(cfg.xtype) > -1) {
+ // views.. should not be just added - used named prop 'view''
+
+ cfg.el = this.el.appendChild(document.createElement("div"));
+ // factory?
+
+ var ret = new Roo.factory(cfg);
+
+ ret.render && ret.render(false, ''); // render blank..
+ this.view = ret;
+ return ret;
+ }
+ return false;
+ }
+});
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * @class Roo.GridPanel
+ * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @constructor
+ * Create a new GridPanel.
+ * @cfg {Roo.grid.Grid} grid The grid for this panel
+ */
+Roo.GridPanel = function(grid, config){
+
+ // universal ctor...
+ if (typeof(grid.grid) != 'undefined') {
+ config = grid;
+ grid = config.grid;
+ }
+ this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
+ {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
+
+ this.wrapper.dom.appendChild(grid.getGridEl().dom);
+
+ Roo.GridPanel.superclass.constructor.call(this, this.wrapper, config);
+
+ if(this.toolbar){
+ this.toolbar.el.insertBefore(this.wrapper.dom.firstChild);
+ }
+ // xtype created footer. - not sure if will work as we normally have to render first..
+ if (this.footer && !this.footer.el && this.footer.xtype) {
+
+ this.footer.container = this.grid.getView().getFooterPanel(true);
+ this.footer.dataSource = this.grid.dataSource;
+ this.footer = Roo.factory(this.footer, Roo);
+
+ }
+
+ grid.monitorWindowResize = false; // turn off autosizing
+ grid.autoHeight = false;
+ grid.autoWidth = false;
+ this.grid = grid;
+ this.grid.getGridEl().replaceClass("x-layout-inactive-content", "x-layout-component-panel");
+};
+
+Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
+ getId : function(){
+ return this.grid.id;
+ },
+
+ /**
+ * Returns the grid for this panel
+ * @return {Roo.grid.Grid}
+ */
+ getGrid : function(){
+ return this.grid;
+ },
+
+ setSize : function(width, height){
+ if(!this.ignoreResize(width, height)){
+ var grid = this.grid;
+ var size = this.adjustForComponents(width, height);
+ grid.getGridEl().setSize(size.width, size.height);
+ grid.autoSize();
+ }
+ },
+
+ beforeSlide : function(){
+ this.grid.getView().scroller.clip();
+ },
+
+ afterSlide : function(){
+ this.grid.getView().scroller.unclip();
+ },
+
+ destroy : function(){
+ this.grid.destroy();
+ delete this.grid;
+ Roo.GridPanel.superclass.destroy.call(this);
+ }
+});
+
+
+/**
+ * @class Roo.NestedLayoutPanel
+ * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @cfg {Roo.BorderLayout} layout [required] The layout for this panel
+ *
+ *
+ * @constructor
+ * Create a new NestedLayoutPanel.
+ *
+ *
+ * @param {Roo.BorderLayout} layout [required] The layout for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ */
+Roo.NestedLayoutPanel = function(layout, config)
+{
+ // construct with only one argument..
+ /* FIXME - implement nicer consturctors
+ if (layout.layout) {
+ config = layout;
+ layout = config.layout;
+ delete config.layout;
+ }
+ if (layout.xtype && !layout.getEl) {
+ // then layout needs constructing..
+ layout = Roo.factory(layout, Roo);
+ }
+ */
+
+
+ Roo.NestedLayoutPanel.superclass.constructor.call(this, layout.getEl(), config);
+
+ layout.monitorWindowResize = false; // turn off autosizing
+ this.layout = layout;
+ this.layout.getEl().addClass("x-layout-nested-layout");
+
+
+
+
+};
+
+Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
+
+ layout : false,
+
+ setSize : function(width, height){
+ if(!this.ignoreResize(width, height)){
+ var size = this.adjustForComponents(width, height);
+ var el = this.layout.getEl();
+ el.setSize(size.width, size.height);
+ var touch = el.dom.offsetWidth;
+ this.layout.layout();
+ // ie requires a double layout on the first pass
+ if(Roo.isIE && !this.initialized){
+ this.initialized = true;
+ this.layout.layout();
+ }
+ }
+ },
+
+ // activate all subpanels if not currently active..
+
+ setActiveState : function(active){
+ this.active = active;
+ if(!active){
+ this.fireEvent("deactivate", this);
+ return;
+ }
+
+ this.fireEvent("activate", this);
+ // not sure if this should happen before or after..
+ if (!this.layout) {
+ return; // should not happen..
+ }
+ var reg = false;
+ for (var r in this.layout.regions) {
+ reg = this.layout.getRegion(r);
+ if (reg.getActivePanel()) {
+ //reg.showPanel(reg.getActivePanel()); // force it to activate..
+ reg.setActivePanel(reg.getActivePanel());
+ continue;
+ }
+ if (!reg.panels.length) {
+ continue;
+ }
+ reg.showPanel(reg.getPanel(0));
+ }
+
+
+
+
+ },
+
+ /**
+ * Returns the nested BorderLayout for this panel
+ * @return {Roo.BorderLayout}
+ */
+ getLayout : function(){
+ return this.layout;
+ },
+
+ /**
+ * Adds a xtype elements to the layout of the nested panel
+ * <pre><code>
+
+panel.addxtype({
+ xtype : 'ContentPanel',
+ region: 'west',
+ items: [ .... ]
+ }
+);
+
+panel.addxtype({
+ xtype : 'NestedLayoutPanel',
+ region: 'west',
+ layout: {
+ center: { },
+ west: { }
+ },
+ items : [ ... list of content panels or nested layout panels.. ]
+ }
+);
+</code></pre>
+ * @param {Object} cfg Xtype definition of item to add.
+ */
+ addxtype : function(cfg) {
+ return this.layout.addxtype(cfg);
+
+ }
+});
+
+Roo.ScrollPanel = function(el, config, content){
+ config = config || {};
+ config.fitToFrame = true;
+ Roo.ScrollPanel.superclass.constructor.call(this, el, config, content);
+
+ this.el.dom.style.overflow = "hidden";
+ var wrap = this.el.wrap({cls: "x-scroller x-layout-inactive-content"});
+ this.el.removeClass("x-layout-inactive-content");
+ this.el.on("mousewheel", this.onWheel, this);
+
+ var up = wrap.createChild({cls: "x-scroller-up", html: " "}, this.el.dom);
+ var down = wrap.createChild({cls: "x-scroller-down", html: " "});
+ up.unselectable(); down.unselectable();
+ up.on("click", this.scrollUp, this);
+ down.on("click", this.scrollDown, this);
+ up.addClassOnOver("x-scroller-btn-over");
+ down.addClassOnOver("x-scroller-btn-over");
+ up.addClassOnClick("x-scroller-btn-click");
+ down.addClassOnClick("x-scroller-btn-click");
+ this.adjustments = [0, -(up.getHeight() + down.getHeight())];
+
+ this.resizeEl = this.el;
+ this.el = wrap; this.up = up; this.down = down;
+};
+
+Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
+ increment : 100,
+ wheelIncrement : 5,
+ scrollUp : function(){
+ this.resizeEl.scroll("up", this.increment, {callback: this.afterScroll, scope: this});
+ },
+
+ scrollDown : function(){
+ this.resizeEl.scroll("down", this.increment, {callback: this.afterScroll, scope: this});
+ },
+
+ afterScroll : function(){
+ var el = this.resizeEl;
+ var t = el.dom.scrollTop, h = el.dom.scrollHeight, ch = el.dom.clientHeight;
+ this.up[t == 0 ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ this.down[h - t <= ch ? "addClass" : "removeClass"]("x-scroller-btn-disabled");
+ },
+
+ setSize : function(){
+ Roo.ScrollPanel.superclass.setSize.apply(this, arguments);
+ this.afterScroll();
+ },
+
+ onWheel : function(e){
+ var d = e.getWheelDelta();
+ this.resizeEl.dom.scrollTop -= (d*this.wheelIncrement);
+ this.afterScroll();
+ e.stopEvent();
+ },
+
+ setContent : function(content, loadScripts){
+ this.resizeEl.update(content, loadScripts);
+ }
+
+});
+
+
+
+/**
+ * @class Roo.TreePanel
+ * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * Treepanel component
+ *
+ * @constructor
+ * Create a new TreePanel. - defaults to fit/scoll contents.
+ * @param {String/Object} config A string to set only the panel's title, or a config object
+ */
+Roo.TreePanel = function(config){
+ var el = config.el;
+ var tree = config.tree;
+ delete config.tree;
+ delete config.el; // hopefull!
+
+ // wrapper for IE7 strict & safari scroll issue
+
+ var treeEl = el.createChild();
+ config.resizeEl = treeEl;
+
+
+
+ Roo.TreePanel.superclass.constructor.call(this, el, config);
+
+
+ this.tree = new Roo.tree.TreePanel(treeEl , tree);
+ //console.log(tree);
+ this.on('activate', function()
+ {
+ if (this.tree.rendered) {
+ return;
+ }
+ //console.log('render tree');
+ this.tree.render();
+ });
+ // this should not be needed.. - it's actually the 'el' that resizes?
+ // actuall it breaks the containerScroll - dragging nodes auto scroll at top
+
+ //this.on('resize', function (cp, w, h) {
+ // this.tree.innerCt.setWidth(w);
+ // this.tree.innerCt.setHeight(h);
+ // //this.tree.innerCt.setStyle('overflow-y', 'auto');
+ //});
+
+
+
+};
+
+Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
+ fitToFrame : true,
+ autoScroll : true,
+ /*
+ * @cfg {Roo.tree.TreePanel} tree [required] The tree TreePanel, with config etc.
+ */
+ tree : false
+
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/**
+ * @class Roo.ReaderLayout
+ * @extends Roo.BorderLayout
+ * This is a pre-built layout that represents a classic, 5-pane application. It consists of a header, a primary
+ * center region containing two nested regions (a top one for a list view and one for item preview below),
+ * and regions on either side that can be used for navigation, application commands, informational displays, etc.
+ * The setup and configuration work exactly the same as it does for a {@link Roo.BorderLayout} - this class simply
+ * expedites the setup of the overall layout and regions for this common application style.
+ * Example:
+ <pre><code>
+var reader = new Roo.ReaderLayout();
+var CP = Roo.ContentPanel; // shortcut for adding
+
+reader.beginUpdate();
+reader.add("north", new CP("north", "North"));
+reader.add("west", new CP("west", {title: "West"}));
+reader.add("east", new CP("east", {title: "East"}));
+
+reader.regions.listView.add(new CP("listView", "List"));
+reader.regions.preview.add(new CP("preview", "Preview"));
+reader.endUpdate();
+</code></pre>
+* @constructor
+* Create a new ReaderLayout
+* @param {Object} config Configuration options
+* @param {String/HTMLElement/Element} container (optional) The container this layout is bound to (defaults to
+* document.body if omitted)
+*/
+Roo.ReaderLayout = function(config, renderTo){
+ var c = config || {size:{}};
+ Roo.ReaderLayout.superclass.constructor.call(this, renderTo || document.body, {
+ north: c.north !== false ? Roo.apply({
+ split:false,
+ initialSize: 32,
+ titlebar: false
+ }, c.north) : false,
+ west: c.west !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ animate: true,
+ margins:{left:5,right:0,bottom:5,top:5},
+ cmargins:{left:5,right:5,bottom:5,top:5}
+ }, c.west) : false,
+ east: c.east !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 175,
+ maxSize: 400,
+ titlebar: true,
+ collapsible: true,
+ animate: true,
+ margins:{left:0,right:5,bottom:5,top:5},
+ cmargins:{left:5,right:5,bottom:5,top:5}
+ }, c.east) : false,
+ center: Roo.apply({
+ tabPosition: 'top',
+ autoScroll:false,
+ closeOnTab: true,
+ titlebar:false,
+ margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
+ }, c.center)
+ });
+
+ this.el.addClass('x-reader');
+
+ this.beginUpdate();
+
+ var inner = new Roo.BorderLayout(Roo.get(document.body).createChild(), {
+ south: c.preview !== false ? Roo.apply({
+ split:true,
+ initialSize: 200,
+ minSize: 100,
+ autoScroll:true,
+ collapsible:true,
+ titlebar: true,
+ cmargins:{top:5,left:0, right:0, bottom:0}
+ }, c.preview) : false,
+ center: Roo.apply({
+ autoScroll:false,
+ titlebar:false,
+ minHeight:200
+ }, c.listView)
+ });
+ this.add('center', new Roo.NestedLayoutPanel(inner,
+ Roo.apply({title: c.mainTitle || '',tabTip:''},c.innerPanelCfg)));
+
+ this.endUpdate();
+
+ this.regions.preview = inner.getRegion('south');
+ this.regions.listView = inner.getRegion('center');
+};
+
+Roo.extend(Roo.ReaderLayout, Roo.BorderLayout);/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.Grid
+ * @extends Roo.util.Observable
+ * This class represents the primary interface of a component based grid control.
+ * <br><br>Usage:<pre><code>
+ var grid = new Roo.grid.Grid("my-container-id", {
+ ds: myDataStore,
+ cm: myColModel,
+ selModel: mySelectionModel,
+ autoSizeColumns: true,
+ monitorWindowResize: false,
+ trackMouseOver: true
+ });
+ // set any options
+ grid.render();
+ * </code></pre>
+ * <b>Common Problems:</b><br/>
+ * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
+ * element will correct this<br/>
+ * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
+ * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
+ * are unpredictable.<br/>
+ * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
+ * grid to calculate dimensions/offsets.<br/>
+ * @constructor
+ * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
+ * The container MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid.
+ */
+Roo.grid.Grid = function(container, config){
+ // initialize the container
+ this.container = Roo.get(container);
+ this.container.update("");
+ this.container.setStyle("overflow", "hidden");
+ this.container.addClass('x-grid-container');
+
+ this.id = this.container.id;
+
+ Roo.apply(this, config);
+ // check and correct shorthanded configs
+ if(this.ds){
+ this.dataSource = this.ds;
+ delete this.ds;
+ }
+ if(this.cm){
+ this.colModel = this.cm;
+ delete this.cm;
+ }
+ if(this.sm){
+ this.selModel = this.sm;
+ delete this.sm;
+ }
+
+ if (this.selModel) {
+ this.selModel = Roo.factory(this.selModel, Roo.grid);
+ this.sm = this.selModel;
+ this.sm.xmodule = this.xmodule || false;
+ }
+ if (typeof(this.colModel.config) == 'undefined') {
+ this.colModel = new Roo.grid.ColumnModel(this.colModel);
+ this.cm = this.colModel;
+ this.cm.xmodule = this.xmodule || false;
+ }
+ if (this.dataSource) {
+ this.dataSource= Roo.factory(this.dataSource, Roo.data);
+ this.ds = this.dataSource;
+ this.ds.xmodule = this.xmodule || false;
+
+ }
+
+
+
+ if(this.width){
+ this.container.setWidth(this.width);
+ }
+
+ if(this.height){
+ this.container.setHeight(this.height);
+ }
+ /** @private */
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "click" : true,
+ /**
+ * @event dblclick
+ * The raw dblclick event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "dblclick" : true,
+ /**
+ * @event contextmenu
+ * The raw contextmenu event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "contextmenu" : true,
+ /**
+ * @event mousedown
+ * The raw mousedown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mousedown" : true,
+ /**
+ * @event mouseup
+ * The raw mouseup event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseup" : true,
+ /**
+ * @event mouseover
+ * The raw mouseover event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseover" : true,
+ /**
+ * @event mouseout
+ * The raw mouseout event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mouseout" : true,
+ /**
+ * @event keypress
+ * The raw keypress event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keypress" : true,
+ /**
+ * @event keydown
+ * The raw keydown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "keydown" : true,
+
+ // custom events
+
+ /**
+ * @event cellclick
+ * Fires when a cell is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "cellclick" : true,
+ /**
+ * @event celldblclick
+ * Fires when a cell is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "celldblclick" : true,
+ /**
+ * @event rowclick
+ * Fires when a row is clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowclick" : true,
+ /**
+ * @event rowdblclick
+ * Fires when a row is double clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowdblclick" : true,
+ /**
+ * @event headerclick
+ * Fires when a header is clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headerclick" : true,
+ /**
+ * @event headerdblclick
+ * Fires when a header cell is double clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headerdblclick" : true,
+ /**
+ * @event rowcontextmenu
+ * Fires when a row is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Roo.EventObject} e
+ */
+ "rowcontextmenu" : true,
+ /**
+ * @event cellcontextmenu
+ * Fires when a cell is right clicked
+ * @param {Grid} this
+ * @param {Number} rowIndex
+ * @param {Number} cellIndex
+ * @param {Roo.EventObject} e
+ */
+ "cellcontextmenu" : true,
+ /**
+ * @event headercontextmenu
+ * Fires when a header is right clicked
+ * @param {Grid} this
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "headercontextmenu" : true,
+ /**
+ * @event bodyscroll
+ * Fires when the body element is scrolled
+ * @param {Number} scrollLeft
+ * @param {Number} scrollTop
+ */
+ "bodyscroll" : true,
+ /**
+ * @event columnresize
+ * Fires when the user resizes a column
+ * @param {Number} columnIndex
+ * @param {Number} newSize
+ */
+ "columnresize" : true,
+ /**
+ * @event columnmove
+ * Fires when the user moves a column
+ * @param {Number} oldIndex
+ * @param {Number} newIndex
+ */
+ "columnmove" : true,
+ /**
+ * @event startdrag
+ * Fires when row(s) start being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
+ */
+ "startdrag" : true,
+ /**
+ * @event enddrag
+ * Fires when a drag operation is complete
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {event} e The raw browser event
+ */
+ "enddrag" : true,
+ /**
+ * @event dragdrop
+ * Fires when dragged row(s) are dropped on a valid DD target
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragdrop" : true,
+ /**
+ * @event dragover
+ * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragover" : true,
+ /**
+ * @event dragenter
+ * Fires when the dragged row(s) first cross another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragenter" : true,
+ /**
+ * @event dragout
+ * Fires when the dragged row(s) leave another DD target while being dragged
+ * @param {Grid} this
+ * @param {Roo.GridDD} dd The drag drop object
+ * @param {String} targetId The target drag drop object
+ * @param {event} e The raw browser event
+ */
+ "dragout" : true,
+ /**
+ * @event rowclass
+ * Fires when a row is rendered, so you can change add a style to it.
+ * @param {GridView} gridview The grid view
+ * @param {Object} rowcfg contains record rowIndex and rowClass - set rowClass to add a style.
+ */
+ 'rowclass' : true,
+
+ /**
+ * @event render
+ * Fires when the grid is rendered
+ * @param {Grid} grid
+ */
+ 'render' : true
+ });
+
+ Roo.grid.Grid.superclass.constructor.call(this);
+};
+Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
+
+ /**
+ * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
+ */
+ /**
+ * @cfg {Roo.grid.GridView} view The view that renders the grid (default = Roo.grid.GridView)
+ */
+ /**
+ * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
+ */
+ /**
+ * @cfg {Roo.data.Store} ds The data store for the grid
+ */
+ /**
+ * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
+ */
+
+ /**
+ * @cfg {Roo.PagingToolbar} footer the paging toolbar
+ */
+
+ /**
+ * @cfg {String} ddGroup - drag drop group.
+ */
+ /**
+ * @cfg {String} dragGroup - drag group (?? not sure if needed.)
+ */
+
+ /**
+ * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
+ */
+ minColumnWidth : 25,
+
+ /**
+ * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
+ * <b>on initial render.</b> It is more efficient to explicitly size the columns
+ * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option. Default is false.
+ */
+ autoSizeColumns : false,
+
+ /**
+ * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
+ */
+ autoSizeHeaders : true,
+
+ /**
+ * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
+ */
+ monitorWindowResize : true,
+
+ /**
+ * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
+ * rows measured to get a columns size. Default is 0 (all rows).
+ */
+ maxRowsToMeasure : 0,
+
+ /**
+ * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
+ */
+ trackMouseOver : true,
+
+ /**
+ * @cfg {Boolean} enableDrag True to enable drag of rows. Default is false. (double check if this is needed?)
+ */
+ /**
+ * @cfg {Boolean} enableDrop True to enable drop of elements. Default is false. (double check if this is needed?)
+ */
+
+ /**
+ * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
+ */
+ enableDragDrop : false,
+
+ /**
+ * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
+ */
+ enableColumnMove : true,
+
+ /**
+ * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
+ */
+ enableColumnHide : true,
+
+ /**
+ * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
+ */
+ enableRowHeightSync : false,
+
+ /**
+ * @cfg {Boolean} stripeRows True to stripe the rows. Default is true.
+ */
+ stripeRows : true,
+
+ /**
+ * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
+ */
+ autoHeight : false,
+
+ /**
+ * @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
+ */
+ autoExpandColumn : false,
+
+ /**
+ * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
+ * Default is 50.
+ */
+ autoExpandMin : 50,
+
+ /**
+ * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
+ */
+ autoExpandMax : 1000,
+
+ /**
+ * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
+ */
+ view : null,
+
+ /**
+ * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
+ */
+ loadMask : false,
+ /**
+ * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
+ */
+ dropTarget: false,
+ /**
+ * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
+ */
+ sortColMenu : false,
+
+ // private
+ rendered : false,
+
+ /**
+ * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
+ * of a fixed width. Default is false.
+ */
+ /**
+ * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
+ */
+
+
+ /**
+ * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
+ * %0 is replaced with the number of selected rows.
+ */
+ ddText : "{0} selected row{1}",
+
+
+ /**
+ * Called once after all setup has been completed and the grid is ready to be rendered.
+ * @return {Roo.grid.Grid} this
+ */
+ render : function()
+ {
+ var c = this.container;
+ // try to detect autoHeight/width mode
+ if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
+ this.autoHeight = true;
+ }
+ var view = this.getView();
+ view.init(this);
+
+ c.on("click", this.onClick, this);
+ c.on("dblclick", this.onDblClick, this);
+ c.on("contextmenu", this.onContextMenu, this);
+ c.on("keydown", this.onKeyDown, this);
+ if (Roo.isTouch) {
+ c.on("touchstart", this.onTouchStart, this);
+ }
+
+ this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
+
+ this.getSelectionModel().init(this);
+
+ view.render();
+
+ if(this.loadMask){
+ this.loadMask = new Roo.LoadMask(this.container,
+ Roo.apply({store:this.dataSource}, this.loadMask));
+ }
+
+
+ if (this.toolbar && this.toolbar.xtype) {
+ this.toolbar.container = this.getView().getHeaderPanel(true);
+ this.toolbar = new Roo.Toolbar(this.toolbar);
+ }
+ if (this.footer && this.footer.xtype) {
+ this.footer.dataSource = this.getDataSource();
+ this.footer.container = this.getView().getFooterPanel(true);
+ this.footer = Roo.factory(this.footer, Roo);
+ }
+ if (this.dropTarget && this.dropTarget.xtype) {
+ delete this.dropTarget.xtype;
+ this.dropTarget = new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
+ }
+
+
+ this.rendered = true;
+ this.fireEvent('render', this);
+ return this;
+ },
+
+ /**
+ * Reconfigures the grid to use a different Store and Column Model.
+ * The View will be bound to the new objects and refreshed.
+ * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
+ * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
+ */
+ reconfigure : function(dataSource, colModel){
+ if(this.loadMask){
+ this.loadMask.destroy();
+ this.loadMask = new Roo.LoadMask(this.container,
+ Roo.apply({store:dataSource}, this.loadMask));
+ }
+ this.view.bind(dataSource, colModel);
+ this.dataSource = dataSource;
+ this.colModel = colModel;
+ this.view.refresh(true);
+ },
+ /**
+ * addColumns
+ * Add's a column, default at the end..
+
+ * @param {int} position to add (default end)
+ * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel}
+ */
+ addColumns : function(pos, ar)
+ {
+
+ for (var i =0;i< ar.length;i++) {
+ var cfg = ar[i];
+ cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
+ this.cm.lookup[cfg.id] = cfg;
+ }
+
+
+ if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
+ pos = this.cm.config.length; //this.cm.config.push(cfg);
+ }
+ pos = Math.max(0,pos);
+ ar.unshift(0);
+ ar.unshift(pos);
+ this.cm.config.splice.apply(this.cm.config, ar);
+
+
+
+ this.view.generateRules(this.cm);
+ this.view.refresh(true);
+
+ },
+
+
+
+
+ // private
+ onKeyDown : function(e){
+ this.fireEvent("keydown", e);
+ },
+
+ /**
+ * Destroy this grid.
+ * @param {Boolean} removeEl True to remove the element
+ */
+ destroy : function(removeEl, keepListeners){
+ if(this.loadMask){
+ this.loadMask.destroy();
+ }
+ var c = this.container;
+ c.removeAllListeners();
+ this.view.destroy();
+ this.colModel.purgeListeners();
+ if(!keepListeners){
+ this.purgeListeners();
+ }
+ c.update("");
+ if(removeEl === true){
+ c.remove();
+ }
+ },
+
+ // private
+ processEvent : function(name, e){
+ // does this fire select???
+ //Roo.log('grid:processEvent ' + name);
+
+ if (name != 'touchstart' ) {
+ this.fireEvent(name, e);
+ }
+
+ var t = e.getTarget();
+ var v = this.view;
+ var header = v.findHeaderIndex(t);
+ if(header !== false){
+ var ename = name == 'touchstart' ? 'click' : name;
+
+ this.fireEvent("header" + ename, this, header, e);
+ }else{
+ var row = v.findRowIndex(t);
+ var cell = v.findCellIndex(t);
+ if (name == 'touchstart') {
+ // first touch is always a click.
+ // hopefull this happens after selection is updated.?
+ name = false;
+
+ if (typeof(this.selModel.getSelectedCell) != 'undefined') {
+ var cs = this.selModel.getSelectedCell();
+ if (row == cs[0] && cell == cs[1]){
+ name = 'dblclick';
+ }
+ }
+ if (typeof(this.selModel.getSelections) != 'undefined') {
+ var cs = this.selModel.getSelections();
+ var ds = this.dataSource;
+ if (cs.length == 1 && ds.getAt(row) == cs[0]){
+ name = 'dblclick';
+ }
+ }
+ if (!name) {
+ return;
+ }
+ }
+
+
+ if(row !== false){
+ this.fireEvent("row" + name, this, row, e);
+ if(cell !== false){
+ this.fireEvent("cell" + name, this, row, cell, e);
+ }
+ }
+ }
+ },
+
+ // private
+ onClick : function(e){
+ this.processEvent("click", e);
+ },
+ // private
+ onTouchStart : function(e){
+ this.processEvent("touchstart", e);
+ },
+
+ // private
+ onContextMenu : function(e, t){
+ this.processEvent("contextmenu", e);
+ },
+
+ // private
+ onDblClick : function(e){
+ this.processEvent("dblclick", e);
+ },
+
+ // private
+ walkCells : function(row, col, step, fn, scope){
+ var cm = this.colModel, clen = cm.getColumnCount();
+ var ds = this.dataSource, rlen = ds.getCount(), first = true;
+ if(step < 0){
+ if(col < 0){
+ row--;
+ first = false;
+ }
+ while(row >= 0){
+ if(!first){
+ col = clen-1;
+ }
+ first = false;
+ while(col >= 0){
+ if(fn.call(scope || this, row, col, cm) === true){
+ return [row, col];
+ }
+ col--;
+ }
+ row--;
+ }
+ } else {
+ if(col >= clen){
+ row++;
+ first = false;
+ }
+ while(row < rlen){
+ if(!first){
+ col = 0;
+ }
+ first = false;
+ while(col < clen){
+ if(fn.call(scope || this, row, col, cm) === true){
+ return [row, col];
+ }
+ col++;
+ }
+ row++;
+ }
+ }
+ return null;
+ },
+
+ // private
+ getSelections : function(){
+ return this.selModel.getSelections();
+ },
+
+ /**
+ * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
+ * but if manual update is required this method will initiate it.
+ */
+ autoSize : function(){
+ if(this.rendered){
+ this.view.layout();
+ if(this.view.adjustForScroll){
+ this.view.adjustForScroll();
+ }
+ }
+ },
+
+ /**
+ * Returns the grid's underlying element.
+ * @return {Element} The element
+ */
+ getGridEl : function(){
+ return this.container;
+ },
+
+ // private for compatibility, overridden by editor grid
+ stopEditing : function(){},
+
+ /**
+ * Returns the grid's SelectionModel.
+ * @return {SelectionModel}
+ */
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.grid.RowSelectionModel();
+ }
+ return this.selModel;
+ },
+
+ /**
+ * Returns the grid's DataSource.
+ * @return {DataSource}
+ */
+ getDataSource : function(){
+ return this.dataSource;
+ },
+
+ /**
+ * Returns the grid's ColumnModel.
+ * @return {ColumnModel}
+ */
+ getColumnModel : function(){
+ return this.colModel;
+ },
+
+ /**
+ * Returns the grid's GridView object.
+ * @return {GridView}
+ */
+ getView : function(){
+ if(!this.view){
+ this.view = new Roo.grid.GridView(this.viewConfig);
+ this.relayEvents(this.view, [
+ "beforerowremoved", "beforerowsinserted",
+ "beforerefresh", "rowremoved",
+ "rowsinserted", "rowupdated" ,"refresh"
+ ]);
+ }
+ return this.view;
+ },
+ /**
+ * Called to get grid's drag proxy text, by default returns this.ddText.
+ * Override this to put something different in the dragged text.
+ * @return {String}
+ */
+ getDragDropText : function(){
+ var count = this.selModel.getCount();
+ return String.format(this.ddText, count, count == 1 ? '' : 's');
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ /**
+ * @class Roo.grid.AbstractGridView
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid Views
+ * @constructor
+ */
+Roo.grid.AbstractGridView = function(){
+ this.grid = null;
+
+ this.events = {
+ "beforerowremoved" : true,
+ "beforerowsinserted" : true,
+ "beforerefresh" : true,
+ "rowremoved" : true,
+ "rowsinserted" : true,
+ "rowupdated" : true,
+ "refresh" : true
+ };
+ Roo.grid.AbstractGridView.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractGridView, Roo.util.Observable, {
+ rowClass : "x-grid-row",
+ cellClass : "x-grid-cell",
+ tdClass : "x-grid-td",
+ hdClass : "x-grid-hd",
+ splitClass : "x-grid-hd-split",
+
+ init: function(grid){
+ this.grid = grid;
+ var cid = this.grid.getGridEl().id;
+ this.colSelector = "#" + cid + " ." + this.cellClass + "-";
+ this.tdSelector = "#" + cid + " ." + this.tdClass + "-";
+ this.hdSelector = "#" + cid + " ." + this.hdClass + "-";
+ this.splitSelector = "#" + cid + " ." + this.splitClass + "-";
+ },
+
+ getColumnRenderers : function(){
+ var renderers = [];
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ for(var i = 0; i < colCount; i++){
+ renderers[i] = cm.getRenderer(i);
+ }
+ return renderers;
+ },
+
+ getColumnIds : function(){
+ var ids = [];
+ var cm = this.grid.colModel;
+ var colCount = cm.getColumnCount();
+ for(var i = 0; i < colCount; i++){
+ ids[i] = cm.getColumnId(i);
+ }
+ return ids;
+ },
+
+ getDataIndexes : function(){
+ if(!this.indexMap){
+ this.indexMap = this.buildIndexMap();
+ }
+ return this.indexMap.colToData;
+ },
+
+ getColumnIndexByDataIndex : function(dataIndex){
+ if(!this.indexMap){
+ this.indexMap = this.buildIndexMap();
+ }
+ return this.indexMap.dataToCol[dataIndex];
+ },
+
+ /**
+ * Set a css style for a column dynamically.
+ * @param {Number} colIndex The index of the column
+ * @param {String} name The css property name
+ * @param {String} value The css value
+ */
+ setCSSStyle : function(colIndex, name, value){
+ var selector = "#" + this.grid.id + " .x-grid-col-" + colIndex;
+ Roo.util.CSS.updateRule(selector, name, value);
+ },
+
+ generateRules : function(cm){
+ var ruleBuf = [], rulesId = this.grid.id + '-cssrules';
+ Roo.util.CSS.removeStyleSheet(rulesId);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var cid = cm.getColumnId(i);
+ ruleBuf.push(this.colSelector, cid, " {\n", cm.config[i].css, "}\n",
+ this.tdSelector, cid, " {\n}\n",
+ this.hdSelector, cid, " {\n}\n",
+ this.splitSelector, cid, " {\n}\n");
+ }
+ return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDragZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+ Roo.grid.HeaderDragZone.superclass.constructor.call(this, hd);
+ if(hd2){
+ this.setHandleElId(Roo.id(hd));
+ this.setOuterHandleElId(Roo.id(hd2));
+ }
+ this.scroll = false;
+};
+Roo.extend(Roo.grid.HeaderDragZone, Roo.dd.DragZone, {
+ maxDragWidth: 120,
+ getDragData : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var h = this.view.findHeaderCell(t);
+ if(h){
+ return {ddel: h.firstChild, header:h};
+ }
+ return false;
+ },
+
+ onInitDrag : function(e){
+ this.view.headersDisabled = true;
+ var clone = this.dragData.ddel.cloneNode(true);
+ clone.id = Roo.id();
+ clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px";
+ this.proxy.update(clone);
+ return true;
+ },
+
+ afterValidDrop : function(){
+ var v = this.view;
+ setTimeout(function(){
+ v.headersDisabled = false;
+ }, 50);
+ },
+
+ afterInvalidDrop : function(){
+ var v = this.view;
+ setTimeout(function(){
+ v.headersDisabled = false;
+ }, 50);
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.HeaderDropZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ // split the proxies so they don't interfere with mouse events
+ this.proxyTop = Roo.DomHelper.append(document.body, {
+ cls:"col-move-top", html:" "
+ }, true);
+ this.proxyBottom = Roo.DomHelper.append(document.body, {
+ cls:"col-move-bottom", html:" "
+ }, true);
+ this.proxyTop.hide = this.proxyBottom.hide = function(){
+ this.setLeftTop(-100,-100);
+ this.setStyle("visibility", "hidden");
+ };
+ this.ddGroup = "gridHeader" + this.grid.getGridEl().id;
+ // temporarily disabled
+ //Roo.dd.ScrollManager.register(this.view.scroller.dom);
+ Roo.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
+};
+Roo.extend(Roo.grid.HeaderDropZone, Roo.dd.DropZone, {
+ proxyOffsets : [-4, -9],
+ fly: Roo.Element.fly,
+
+ getTargetFromEvent : function(e){
+ var t = Roo.lib.Event.getTarget(e);
+ var cindex = this.view.findCellIndex(t);
+ if(cindex !== false){
+ return this.view.getHeaderCell(cindex);
+ }
+ return null;
+ },
+
+ nextVisible : function(h){
+ var v = this.view, cm = this.grid.colModel;
+ h = h.nextSibling;
+ while(h){
+ if(!cm.isHidden(v.getCellIndex(h))){
+ return h;
+ }
+ h = h.nextSibling;
+ }
+ return null;
+ },
+
+ prevVisible : function(h){
+ var v = this.view, cm = this.grid.colModel;
+ h = h.prevSibling;
+ while(h){
+ if(!cm.isHidden(v.getCellIndex(h))){
+ return h;
+ }
+ h = h.prevSibling;
+ }
+ return null;
+ },
+
+ positionIndicator : function(h, n, e){
+ var x = Roo.lib.Event.getPageX(e);
+ var r = Roo.lib.Dom.getRegion(n.firstChild);
+ var px, pt, py = r.top + this.proxyOffsets[1];
+ if((r.right - x) <= (r.right-r.left)/2){
+ px = r.right+this.view.borderWidth;
+ pt = "after";
+ }else{
+ px = r.left;
+ pt = "before";
+ }
+ var oldIndex = this.view.getCellIndex(h);
+ var newIndex = this.view.getCellIndex(n);
+
+ if(this.grid.colModel.isFixed(newIndex)){
+ return false;
+ }
+
+ var locked = this.grid.colModel.isLocked(newIndex);
+
+ if(pt == "after"){
+ newIndex++;
+ }
+ if(oldIndex < newIndex){
+ newIndex--;
+ }
+ if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
+ return false;
+ }
+ px += this.proxyOffsets[0];
+ this.proxyTop.setLeftTop(px, py);
+ this.proxyTop.show();
+ if(!this.bottomOffset){
+ this.bottomOffset = this.view.mainHd.getHeight();
+ }
+ this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset);
+ this.proxyBottom.show();
+ return pt;
+ },
+
+ onNodeEnter : function(n, dd, e, data){
+ if(data.header != n){
+ this.positionIndicator(data.header, n, e);
+ }
+ },
+
+ onNodeOver : function(n, dd, e, data){
+ var result = false;
+ if(data.header != n){
+ result = this.positionIndicator(data.header, n, e);
+ }
+ if(!result){
+ this.proxyTop.hide();
+ this.proxyBottom.hide();
+ }
+ return result ? this.dropAllowed : this.dropNotAllowed;
+ },
+
+ onNodeOut : function(n, dd, e, data){
+ this.proxyTop.hide();
+ this.proxyBottom.hide();
+ },
+
+ onNodeDrop : function(n, dd, e, data){
+ var h = data.header;
+ if(h != n){
+ var cm = this.grid.colModel;
+ var x = Roo.lib.Event.getPageX(e);
+ var r = Roo.lib.Dom.getRegion(n.firstChild);
+ var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
+ var oldIndex = this.view.getCellIndex(h);
+ var newIndex = this.view.getCellIndex(n);
+ var locked = cm.isLocked(newIndex);
+ if(pt == "after"){
+ newIndex++;
+ }
+ if(oldIndex < newIndex){
+ newIndex--;
+ }
+ if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
+ return false;
+ }
+ cm.setLocked(oldIndex, locked, true);
+ cm.moveColumn(oldIndex, newIndex);
+ this.grid.fireEvent("columnmove", oldIndex, newIndex);
+ return true;
+ }
+ return false;
+ }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.GridView
+ * @extends Roo.util.Observable
+ *
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.GridView = function(config){
+ Roo.grid.GridView.superclass.constructor.call(this);
+ this.el = null;
+
+ Roo.apply(this, config);
+};
+
+Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
+
+ unselectable : 'unselectable="on"',
+ unselectableCls : 'x-unselectable',
+
+
+ rowClass : "x-grid-row",
+
+ cellClass : "x-grid-col",
+
+ tdClass : "x-grid-td",
+
+ hdClass : "x-grid-hd",
+
+ splitClass : "x-grid-split",
+
+ sortClasses : ["sort-asc", "sort-desc"],
+
+ enableMoveAnim : false,
+
+ hlColor: "C3DAF9",
+
+ dh : Roo.DomHelper,
+
+ fly : Roo.Element.fly,
+
+ css : Roo.util.CSS,
+
+ borderWidth: 1,
+
+ splitOffset: 3,
+
+ scrollIncrement : 22,
+
+ cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
+
+ findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
+
+ bind : function(ds, cm){
+ if(this.ds){
+ this.ds.un("load", this.onLoad, this);
+ this.ds.un("datachanged", this.onDataChange, this);
+ this.ds.un("add", this.onAdd, this);
+ this.ds.un("remove", this.onRemove, this);
+ this.ds.un("update", this.onUpdate, this);
+ this.ds.un("clear", this.onClear, this);
+ }
+ if(ds){
+ ds.on("load", this.onLoad, this);
+ ds.on("datachanged", this.onDataChange, this);
+ ds.on("add", this.onAdd, this);
+ ds.on("remove", this.onRemove, this);
+ ds.on("update", this.onUpdate, this);
+ ds.on("clear", this.onClear, this);
+ }
+ this.ds = ds;
+
+ if(this.cm){
+ this.cm.un("widthchange", this.onColWidthChange, this);
+ this.cm.un("headerchange", this.onHeaderChange, this);
+ this.cm.un("hiddenchange", this.onHiddenChange, this);
+ this.cm.un("columnmoved", this.onColumnMove, this);
+ this.cm.un("columnlockchange", this.onColumnLock, this);
+ }
+ if(cm){
+ this.generateRules(cm);
+ cm.on("widthchange", this.onColWidthChange, this);
+ cm.on("headerchange", this.onHeaderChange, this);
+ cm.on("hiddenchange", this.onHiddenChange, this);
+ cm.on("columnmoved", this.onColumnMove, this);
+ cm.on("columnlockchange", this.onColumnLock, this);
+ }
+ this.cm = cm;
+ },
+
+ init: function(grid){
+ Roo.grid.GridView.superclass.init.call(this, grid);
+
+ this.bind(grid.dataSource, grid.colModel);
+
+ grid.on("headerclick", this.handleHeaderClick, this);
+
+ if(grid.trackMouseOver){
+ grid.on("mouseover", this.onRowOver, this);
+ grid.on("mouseout", this.onRowOut, this);
+ }
+ grid.cancelTextSelection = function(){};
+ this.gridId = grid.id;
+
+ var tpls = this.templates || {};
+
+ if(!tpls.master){
+ tpls.master = new Roo.Template(
+ '<div class="x-grid" hidefocus="true">',
+ '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
+ '<div class="x-grid-topbar"></div>',
+ '<div class="x-grid-scroller"><div></div></div>',
+ '<div class="x-grid-locked">',
+ '<div class="x-grid-header">{lockedHeader}</div>',
+ '<div class="x-grid-body">{lockedBody}</div>',
+ "</div>",
+ '<div class="x-grid-viewport">',
+ '<div class="x-grid-header">{header}</div>',
+ '<div class="x-grid-body">{body}</div>',
+ "</div>",
+ '<div class="x-grid-bottombar"></div>',
+
+ '<div class="x-grid-resize-proxy"> </div>',
+ "</div>"
+ );
+ tpls.master.disableformats = true;
+ }
+
+ if(!tpls.header){
+ tpls.header = new Roo.Template(
+ '<table border="0" cellspacing="0" cellpadding="0">',
+ '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
+ "</table>{splits}"
+ );
+ tpls.header.disableformats = true;
+ }
+ tpls.header.compile();
+
+ if(!tpls.hcell){
+ tpls.hcell = new Roo.Template(
+ '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
+ '<div class="x-grid-hd-text ' + this.unselectableCls + '" ' + this.unselectable +'>{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
+ "</div></td>"
+ );
+ tpls.hcell.disableFormats = true;
+ }
+ tpls.hcell.compile();
+
+ if(!tpls.hsplit){
+ tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style} ' +
+ this.unselectableCls + '" ' + this.unselectable +'> </div>');
+ tpls.hsplit.disableFormats = true;
+ }
+ tpls.hsplit.compile();
+
+ if(!tpls.body){
+ tpls.body = new Roo.Template(
+ '<table border="0" cellspacing="0" cellpadding="0">',
+ "<tbody>{rows}</tbody>",
+ "</table>"
+ );
+ tpls.body.disableFormats = true;
+ }
+ tpls.body.compile();
+
+ if(!tpls.row){
+ tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
+ tpls.row.disableFormats = true;
+ }
+ tpls.row.compile();
+
+ if(!tpls.cell){
+ tpls.cell = new Roo.Template(
+ '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
+ '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text ' +
+ this.unselectableCls + '" ' + this.unselectable +'" {attr}>{value}</div></div>',
+ "</td>"
+ );
+ tpls.cell.disableFormats = true;
+ }
+ tpls.cell.compile();
+
+ this.templates = tpls;
+ },
+
+ // remap these for backwards compat
+ onColWidthChange : function(){
+ this.updateColumns.apply(this, arguments);
+ },
+ onHeaderChange : function(){
+ this.updateHeaders.apply(this, arguments);
+ },
+ onHiddenChange : function(){
+ this.handleHiddenChange.apply(this, arguments);
+ },
+ onColumnMove : function(){
+ this.handleColumnMove.apply(this, arguments);
+ },
+ onColumnLock : function(){
+ this.handleLockChange.apply(this, arguments);
+ },
+
+ onDataChange : function(){
+ this.refresh();
+ this.updateHeaderSortState();
+ },
+
+ onClear : function(){
+ this.refresh();
+ },
+
+ onUpdate : function(ds, record){
+ this.refreshRow(record);
+ },
+
+ refreshRow : function(record){
+ var ds = this.ds, index;
+ if(typeof record == 'number'){
+ index = record;
+ record = ds.getAt(index);
+ }else{
+ index = ds.indexOf(record);
+ }
+ this.insertRows(ds, index, index, true);
+ this.onRemove(ds, record, index+1, true);
+ this.syncRowHeights(index, index);
+ this.layout();
+ this.fireEvent("rowupdated", this, index, record);
+ },
+
+ onAdd : function(ds, records, index){
+ this.insertRows(ds, index, index + (records.length-1));
+ },
+
+ onRemove : function(ds, record, index, isUpdate){
+ if(isUpdate !== true){
+ this.fireEvent("beforerowremoved", this, index, record);
+ }
+ var bt = this.getBodyTable(), lt = this.getLockedTable();
+ if(bt.rows[index]){
+ bt.firstChild.removeChild(bt.rows[index]);
+ }
+ if(lt.rows[index]){
+ lt.firstChild.removeChild(lt.rows[index]);
+ }
+ if(isUpdate !== true){
+ this.stripeRows(index);
+ this.syncRowHeights(index, index);
+ this.layout();
+ this.fireEvent("rowremoved", this, index, record);
+ }
+ },
+
+ onLoad : function(){
+ this.scrollToTop();
+ },
+
+ /**
+ * Scrolls the grid to the top
+ */
+ scrollToTop : function(){
+ if(this.scroller){
+ this.scroller.dom.scrollTop = 0;
+ this.syncScroll();
+ }
+ },
+
+ /**
+ * Gets a panel in the header of the grid that can be used for toolbars etc.
+ * After modifying the contents of this panel a call to grid.autoSize() may be
+ * required to register any changes in size.
+ * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
+ * @return Roo.Element
+ */
+ getHeaderPanel : function(doShow){
+ if(doShow){
+ this.headerPanel.show();
+ }
+ return this.headerPanel;
+ },
+
+ /**
+ * Gets a panel in the footer of the grid that can be used for toolbars etc.
+ * After modifying the contents of this panel a call to grid.autoSize() may be
+ * required to register any changes in size.
+ * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
+ * @return Roo.Element
+ */
+ getFooterPanel : function(doShow){
+ if(doShow){
+ this.footerPanel.show();
+ }
+ return this.footerPanel;
+ },
+
+ initElements : function(){
+ var E = Roo.Element;
+ var el = this.grid.getGridEl().dom.firstChild;
+ var cs = el.childNodes;
+
+ this.el = new E(el);
+
+ this.focusEl = new E(el.firstChild);
+ this.focusEl.swallowEvent("click", true);
+
+ this.headerPanel = new E(cs[1]);
+ this.headerPanel.enableDisplayMode("block");
+
+ this.scroller = new E(cs[2]);
+ this.scrollSizer = new E(this.scroller.dom.firstChild);
+
+ this.lockedWrap = new E(cs[3]);
+ this.lockedHd = new E(this.lockedWrap.dom.firstChild);
+ this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
+
+ this.mainWrap = new E(cs[4]);
+ this.mainHd = new E(this.mainWrap.dom.firstChild);
+ this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
+
+ this.footerPanel = new E(cs[5]);
+ this.footerPanel.enableDisplayMode("block");
+
+ this.resizeProxy = new E(cs[6]);
+
+ this.headerSelector = String.format(
+ '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
+ this.lockedHd.id, this.mainHd.id
+ );
+
+ this.splitterSelector = String.format(
+ '#{0} div.x-grid-split, #{1} div.x-grid-split',
+ this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
+ );
+ },
+ idToCssName : function(s)
+ {
+ return s.replace(/[^a-z0-9]+/ig, '-');
+ },
+
+ getHeaderCell : function(index){
+ return Roo.DomQuery.select(this.headerSelector)[index];
+ },
+
+ getHeaderCellMeasure : function(index){
+ return this.getHeaderCell(index).firstChild;
+ },
+
+ getHeaderCellText : function(index){
+ return this.getHeaderCell(index).firstChild.firstChild;
+ },
+
+ getLockedTable : function(){
+ return this.lockedBody.dom.firstChild;
+ },
+
+ getBodyTable : function(){
+ return this.mainBody.dom.firstChild;
+ },
+
+ getLockedRow : function(index){
+ return this.getLockedTable().rows[index];
+ },
+
+ getRow : function(index){
+ return this.getBodyTable().rows[index];
+ },
+
+ getRowComposite : function(index){
+ if(!this.rowEl){
+ this.rowEl = new Roo.CompositeElementLite();
+ }
+ var els = [], lrow, mrow;
+ if(lrow = this.getLockedRow(index)){
+ els.push(lrow);
+ }
+ if(mrow = this.getRow(index)){
+ els.push(mrow);
+ }
+ this.rowEl.elements = els;
+ return this.rowEl;
+ },
+ /**
+ * Gets the 'td' of the cell
+ *
+ * @param {Integer} rowIndex row to select
+ * @param {Integer} colIndex column to select
+ *
+ * @return {Object}
+ */
+ getCell : function(rowIndex, colIndex){
+ var locked = this.cm.getLockedCount();
+ var source;
+ if(colIndex < locked){
+ source = this.lockedBody.dom.firstChild;
+ }else{
+ source = this.mainBody.dom.firstChild;
+ colIndex -= locked;
+ }
+ return source.rows[rowIndex].childNodes[colIndex];
+ },
+
+ getCellText : function(rowIndex, colIndex){
+ return this.getCell(rowIndex, colIndex).firstChild.firstChild;
+ },
+
+ getCellBox : function(cell){
+ var b = this.fly(cell).getBox();
+ if(Roo.isOpera){ // opera fails to report the Y
+ b.y = cell.offsetTop + this.mainBody.getY();
+ }
+ return b;
+ },
+
+ getCellIndex : function(cell){
+ var id = String(cell.className).match(this.cellRE);
+ if(id){
+ return parseInt(id[1], 10);
+ }
+ return 0;
+ },
+
+ findHeaderIndex : function(n){
+ var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+ return r ? this.getCellIndex(r) : false;
+ },
+
+ findHeaderCell : function(n){
+ var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
+ return r ? r : false;
+ },
+
+ findRowIndex : function(n){
+ if(!n){
+ return false;
+ }
+ var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
+ return r ? r.rowIndex : false;
+ },
+
+ findCellIndex : function(node){
+ var stop = this.el.dom;
+ while(node && node != stop){
+ if(this.findRE.test(node.className)){
+ return this.getCellIndex(node);
+ }
+ node = node.parentNode;
+ }
+ return false;
+ },
+
+ getColumnId : function(index){
+ return this.cm.getColumnId(index);
+ },
+
+ getSplitters : function()
+ {
+ if(this.splitterSelector){
+ return Roo.DomQuery.select(this.splitterSelector);
+ }else{
+ return null;
+ }
+ },
+
+ getSplitter : function(index){
+ return this.getSplitters()[index];
+ },
+
+ onRowOver : function(e, t){
+ var row;
+ if((row = this.findRowIndex(t)) !== false){
+ this.getRowComposite(row).addClass("x-grid-row-over");
+ }
+ },
+
+ onRowOut : function(e, t){
+ var row;
+ if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
+ this.getRowComposite(row).removeClass("x-grid-row-over");
+ }
+ },
+
+ renderHeaders : function(){
+ var cm = this.cm;
+ var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
+ var cb = [], lb = [], sb = [], lsb = [], p = {};
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ p.cellId = "x-grid-hd-0-" + i;
+ p.splitId = "x-grid-csplit-0-" + i;
+ p.id = cm.getColumnId(i);
+ p.value = cm.getColumnHeader(i) || "";
+ p.title = cm.getColumnTooltip(i) || (''+p.value).match(/\</) ? '' : p.value || "";
+ p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
+ if(!cm.isLocked(i)){
+ cb[cb.length] = ct.apply(p);
+ sb[sb.length] = st.apply(p);
+ }else{
+ lb[lb.length] = ct.apply(p);
+ lsb[lsb.length] = st.apply(p);
+ }
+ }
+ return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
+ ht.apply({cells: cb.join(""), splits:sb.join("")})];
+ },
+
+ updateHeaders : function(){
+ var html = this.renderHeaders();
+ this.lockedHd.update(html[0]);
+ this.mainHd.update(html[1]);
+ },
+
+ /**
+ * Focuses the specified row.
+ * @param {Number} row The row index
+ */
+ focusRow : function(row)
+ {
+ //Roo.log('GridView.focusRow');
+ var x = this.scroller.dom.scrollLeft;
+ this.focusCell(row, 0, false);
+ this.scroller.dom.scrollLeft = x;
+ },
+
+ /**
+ * Focuses the specified cell.
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
+ */
+ focusCell : function(row, col, hscroll)
+ {
+ //Roo.log('GridView.focusCell');
+ var el = this.ensureVisible(row, col, hscroll);
+ this.focusEl.alignTo(el, "tl-tl");
+ if(Roo.isGecko){
+ this.focusEl.focus();
+ }else{
+ this.focusEl.focus.defer(1, this.focusEl);
+ }
+ },
+
+ /**
+ * Scrolls the specified cell into view
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
+ */
+ ensureVisible : function(row, col, hscroll)
+ {
+ //Roo.log('GridView.ensureVisible,' + row + ',' + col);
+ //return null; //disable for testing.
+ if(typeof row != "number"){
+ row = row.rowIndex;
+ }
+ if(row < 0 && row >= this.ds.getCount()){
+ return null;
+ }
+ col = (col !== undefined ? col : 0);
+ var cm = this.grid.colModel;
+ while(cm.isHidden(col)){
+ col++;
+ }
+
+ var el = this.getCell(row, col);
+ if(!el){
+ return null;
+ }
+ var c = this.scroller.dom;
+
+ var ctop = parseInt(el.offsetTop, 10);
+ var cleft = parseInt(el.offsetLeft, 10);
+ var cbot = ctop + el.offsetHeight;
+ var cright = cleft + el.offsetWidth;
+
+ var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
+ var stop = parseInt(c.scrollTop, 10);
+ var sleft = parseInt(c.scrollLeft, 10);
+ var sbot = stop + ch;
+ var sright = sleft + c.clientWidth;
+ /*
+ Roo.log('GridView.ensureVisible:' +
+ ' ctop:' + ctop +
+ ' c.clientHeight:' + c.clientHeight +
+ ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
+ ' stop:' + stop +
+ ' cbot:' + cbot +
+ ' sbot:' + sbot +
+ ' ch:' + ch
+ );
+ */
+ if(ctop < stop){
+ c.scrollTop = ctop;
+ //Roo.log("set scrolltop to ctop DISABLE?");
+ }else if(cbot > sbot){
+ //Roo.log("set scrolltop to cbot-ch");
+ c.scrollTop = cbot-ch;
+ }
+
+ if(hscroll !== false){
+ if(cleft < sleft){
+ c.scrollLeft = cleft;
+ }else if(cright > sright){
+ c.scrollLeft = cright-c.clientWidth;
+ }
+ }
+
+ return el;
+ },
+
+ updateColumns : function(){
+ this.grid.stopEditing();
+ var cm = this.grid.colModel, colIds = this.getColumnIds();
+ //var totalWidth = cm.getTotalWidth();
+ var pos = 0;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ //if(cm.isHidden(i)) continue;
+ var w = cm.getColumnWidth(i);
+ this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+ this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
+ }
+ this.updateSplitters();
+ },
+
+ generateRules : function(cm){
+ var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
+ Roo.util.CSS.removeStyleSheet(rulesId);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var cid = cm.getColumnId(i);
+ var align = '';
+ if(cm.config[i].align){
+ align = 'text-align:'+cm.config[i].align+';';
+ }
+ var hidden = '';
+ if(cm.isHidden(i)){
+ hidden = 'display:none;';
+ }
+ var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
+ ruleBuf.push(
+ this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
+ this.hdSelector, cid, " {\n", align, width, "}\n",
+ this.tdSelector, cid, " {\n",hidden,"\n}\n",
+ this.splitSelector, cid, " {\n", hidden , "\n}\n");
+ }
+ return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
+ },
+
+ updateSplitters : function(){
+ var cm = this.cm, s = this.getSplitters();
+ if(s){ // splitters not created yet
+ var pos = 0, locked = true;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ if(cm.isHidden(i)) {
+ continue;
+ }
+ var w = cm.getColumnWidth(i); // make sure it's a number
+ if(!cm.isLocked(i) && locked){
+ pos = 0;
+ locked = false;
+ }
+ pos += w;
+ s[i].style.left = (pos-this.splitOffset) + "px";
+ }
+ }
+ },
+
+ handleHiddenChange : function(colModel, colIndex, hidden){
+ if(hidden){
+ this.hideColumn(colIndex);
+ }else{
+ this.unhideColumn(colIndex);
+ }
+ },
+
+ hideColumn : function(colIndex){
+ var cid = this.getColumnId(colIndex);
+ this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
+ this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
+ if(Roo.isSafari){
+ this.updateHeaders();
+ }
+ this.updateSplitters();
+ this.layout();
+ },
+
+ unhideColumn : function(colIndex){
+ var cid = this.getColumnId(colIndex);
+ this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
+ this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
+
+ if(Roo.isSafari){
+ this.updateHeaders();
+ }
+ this.updateSplitters();
+ this.layout();
+ },
+
+ insertRows : function(dm, firstRow, lastRow, isUpdate){
+ if(firstRow == 0 && lastRow == dm.getCount()-1){
+ this.refresh();
+ }else{
+ if(!isUpdate){
+ this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
+ }
+ var s = this.getScrollState();
+ var markup = this.renderRows(firstRow, lastRow);
+ this.bufferRows(markup[0], this.getLockedTable(), firstRow);
+ this.bufferRows(markup[1], this.getBodyTable(), firstRow);
+ this.restoreScroll(s);
+ if(!isUpdate){
+ this.fireEvent("rowsinserted", this, firstRow, lastRow);
+ this.syncRowHeights(firstRow, lastRow);
+ this.stripeRows(firstRow);
+ this.layout();
+ }
+ }
+ },
+
+ bufferRows : function(markup, target, index){
+ var before = null, trows = target.rows, tbody = target.tBodies[0];
+ if(index < trows.length){
+ before = trows[index];
+ }
+ var b = document.createElement("div");
+ b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
+ var rows = b.firstChild.rows;
+ for(var i = 0, len = rows.length; i < len; i++){
+ if(before){
+ tbody.insertBefore(rows[0], before);
+ }else{
+ tbody.appendChild(rows[0]);
+ }
+ }
+ b.innerHTML = "";
+ b = null;
+ },
+
+ deleteRows : function(dm, firstRow, lastRow){
+ if(dm.getRowCount()<1){
+ this.fireEvent("beforerefresh", this);
+ this.mainBody.update("");
+ this.lockedBody.update("");
+ this.fireEvent("refresh", this);
+ }else{
+ this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
+ var bt = this.getBodyTable();
+ var tbody = bt.firstChild;
+ var rows = bt.rows;
+ for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
+ tbody.removeChild(rows[firstRow]);
+ }
+ this.stripeRows(firstRow);
+ this.fireEvent("rowsdeleted", this, firstRow, lastRow);
+ }
+ },
+
+ updateRows : function(dataSource, firstRow, lastRow){
+ var s = this.getScrollState();
+ this.refresh();
+ this.restoreScroll(s);
+ },
+
+ handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
+ if(!noRefresh){
+ this.refresh();
+ }
+ this.updateHeaderSortState();
+ },
+
+ getScrollState : function(){
+
+ var sb = this.scroller.dom;
+ return {left: sb.scrollLeft, top: sb.scrollTop};
+ },
+
+ stripeRows : function(startRow){
+ if(!this.grid.stripeRows || this.ds.getCount() < 1){
+ return;
+ }
+ startRow = startRow || 0;
+ var rows = this.getBodyTable().rows;
+ var lrows = this.getLockedTable().rows;
+ var cls = ' x-grid-row-alt ';
+ for(var i = startRow, len = rows.length; i < len; i++){
+ var row = rows[i], lrow = lrows[i];
+ var isAlt = ((i+1) % 2 == 0);
+ var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
+ if(isAlt == hasAlt){
+ continue;
+ }
+ if(isAlt){
+ row.className += " x-grid-row-alt";
+ }else{
+ row.className = row.className.replace("x-grid-row-alt", "");
+ }
+ if(lrow){
+ lrow.className = row.className;
+ }
+ }
+ },
+
+ restoreScroll : function(state){
+ //Roo.log('GridView.restoreScroll');
+ var sb = this.scroller.dom;
+ sb.scrollLeft = state.left;
+ sb.scrollTop = state.top;
+ this.syncScroll();
+ },
+
+ syncScroll : function(){
+ //Roo.log('GridView.syncScroll');
+ var sb = this.scroller.dom;
+ var sh = this.mainHd.dom;
+ var bs = this.mainBody.dom;
+ var lv = this.lockedBody.dom;
+ sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
+ lv.scrollTop = bs.scrollTop = sb.scrollTop;
+ },
+
+ handleScroll : function(e){
+ this.syncScroll();
+ var sb = this.scroller.dom;
+ this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
+ e.stopEvent();
+ },
+
+ handleWheel : function(e){
+ var d = e.getWheelDelta();
+ this.scroller.dom.scrollTop -= d*22;
+ // set this here to prevent jumpy scrolling on large tables
+ this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
+ e.stopEvent();
+ },
+
+ renderRows : function(startRow, endRow){
+ // pull in all the crap needed to render rows
+ var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
+ var colCount = cm.getColumnCount();
+
+ if(ds.getCount() < 1){
+ return ["", ""];
+ }
+
+ // build a map for all the columns
+ var cs = [];
+ for(var i = 0; i < colCount; i++){
+ var name = cm.getDataIndex(i);
+ cs[i] = {
+ name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
+ renderer : cm.getRenderer(i),
+ id : cm.getColumnId(i),
+ locked : cm.isLocked(i),
+ has_editor : cm.isCellEditable(i)
+ };
+ }
+
+ startRow = startRow || 0;
+ endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+
+ // records to render
+ var rs = ds.getRange(startRow, endRow);
+
+ return this.doRender(cs, rs, ds, startRow, colCount, stripe);