X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FViewPanel.js;h=7ca1e2ec45b37dc4b20c4b6f0825133b93974830;hb=0b69a11b1055a6d3a3fd0719bdd58b5a235de0e4;hp=7bacc02a2a87f5278a998eda3c780de75d790c77;hpb=43cc61a14db3b843c9668064469d6c0cdbdd8d8e;p=roojs1

diff --git a/Roo/ViewPanel.js b/Roo/ViewPanel.js
index 7bacc02a2a..7ca1e2ec45 100644
--- a/Roo/ViewPanel.js
+++ b/Roo/ViewPanel.js
@@ -8,250 +8,79 @@
  * Fork - LGPL
  * <script type="text/javascript">
  */
- 
+
 /**
- * @class Roo.grid.EditorGrid
- * @extends Roo.grid.Grid
- * Class for creating and editable grid.
- * @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} dataSource The data model to bind to
- * @param {Object} colModel The column model with info about this grid's columns
+ * @class Roo.GridPanel
+ * @extends Roo.ContentPanel
+ * @constructor
+ * Create a new GridPanel.
+ * @param {Roo.grid.Grid} grid The grid for this panel
+ * @param {String/Object} config A string to set only the panel's title, or a config object
  */
-Roo.ViewPanel = function(container, config){
-    Roo.ViewPanel.superclass.constructor.call(this, container, config);
-    this.getGridEl().addClass("xedit-grid");
-
-    if(!this.selModel){
-        this.selModel = new Roo.grid.CellSelectionModel();
-    }
-
-    this.activeEditor = null;
-
-	this.addEvents({
-	    /**
-	     * @event beforeedit
-	     * Fires before cell editing is triggered. The edit event object has the following properties <br />
-	     * <ul style="padding:5px;padding-left:16px;">
-	     * <li>grid - This grid</li>
-	     * <li>record - The record being edited</li>
-	     * <li>field - The field name being edited</li>
-	     * <li>value - The value for the field being edited.</li>
-	     * <li>row - The grid row index</li>
-	     * <li>column - The grid column index</li>
-	     * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
-	     * </ul>
-	     * @param {Object} e An edit event (see above for description)
-	     */
-	    "beforeedit" : true,
-	    /**
-	     * @event afteredit
-	     * Fires after a cell is edited. <br />
-	     * <ul style="padding:5px;padding-left:16px;">
-	     * <li>grid - This grid</li>
-	     * <li>record - The record being edited</li>
-	     * <li>field - The field name being edited</li>
-	     * <li>value - The value being set</li>
-	     * <li>originalValue - The original value for the field, before the edit.</li>
-	     * <li>row - The grid row index</li>
-	     * <li>column - The grid column index</li>
-	     * </ul>
-	     * @param {Object} e An edit event (see above for description)
-	     */
-	    "afteredit" : true,
-	    /**
-	     * @event validateedit
-	     * Fires after a cell is edited, but before the value is set in the record. 
-         * You can use this to modify the value being set in the field, Return false
-	     * to cancel the change. The edit event object has the following properties <br />
-	     * <ul style="padding:5px;padding-left:16px;">
-         * <li>editor - This editor</li>
-	     * <li>grid - This grid</li>
-	     * <li>record - The record being edited</li>
-	     * <li>field - The field name being edited</li>
-	     * <li>value - The value being set</li>
-	     * <li>originalValue - The original value for the field, before the edit.</li>
-	     * <li>row - The grid row index</li>
-	     * <li>column - The grid column index</li>
-	     * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
-	     * </ul>
-	     * @param {Object} e An edit event (see above for description)
-	     */
-	    "validateedit" : true
-	});
-    this.on("bodyscroll", this.stopEditing,  this);
-    this.on(this.clicksToEdit == 1 ? "cellclick" : "celldblclick", this.onCellDblClick,  this);
-};
-
-Roo.extend(Roo.ViewPanel, Roo.grid.Grid, {
-    /**
-     * @cfg {Number} clicksToEdit
-     * The number of clicks on a cell required to display the cell's editor (defaults to 2)
-     */
-    clicksToEdit: 2,
-
-    // private
-    isEditor : true,
-    // private
-    trackMouseOver: false, // causes very odd FF errors
-    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);
-
-        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));
-        }
+Roo.ViewPanel = function(el, config){
+     
+    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(el.dom);
+    
+    Roo.ViewPanel.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) {
         
-        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);
-        }
+        this.footer.container = this.wrapper.el; // this.getView().getFooterPanel(true);
+        this.footer.dataSource = this.view.store;
+        this.footer = Roo.factory(this.footer, Roo);
         
-        this.rendered = true;
-        this.fireEvent('render', this);
-        return this;
-    },
-    onCellDblClick : function(g, row, col){
-        this.startEditing(row, col);
-    },
+    }
+    //??? create teh view???
+    
+    //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");
+};
 
-    onEditComplete : function(ed, value, startValue){
-        this.editing = false;
-        this.activeEditor = null;
-        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
-        var r = ed.record;
-        var field = this.colModel.getDataIndex(ed.col);
-        var e = {
-            grid: this,
-            record: r,
-            field: field,
-            originalValue: startValue,
-            value: value,
-            row: ed.row,
-            column: ed.col,
-            cancel:false,
-            editor: ed
-        };
-        var cell = Roo.get(this.view.getCell(ed.row,ed.col))
-        cell.show();
-          
-        if(String(value) !== String(startValue)){
-            
-            if(this.fireEvent("validateedit", e) !== false && !e.cancel){
-                r.set(field, e.value);
-                // if we are dealing with a combo box..
-                // then we also set the 'name' colum to be the displayField
-                if (ed.field.displayField && ed.field.name) {
-                    r.set(ed.field.name, ed.field.el.dom.value);
-                }
-                
-                delete e.cancel; //?? why!!!
-                this.fireEvent("afteredit", e);
-            }
-        } else {
-            this.fireEvent("afteredit", e); // always fire it!
-        }
-        this.view.focusCell(ed.row, ed.col);
+Roo.extend(Roo.ViewPanel, Roo.ContentPanel, {
+    
+    autoCreate : true,
+    getId : function(){
+        return this.view.id;
     },
-
+    
     /**
-     * Starts editing the specified for the specified row/column
-     * @param {Number} rowIndex
-     * @param {Number} colIndex
+     * Returns the grid for this panel
+     * @return {Roo.grid.Grid} 
      */
-    startEditing : function(row, col){
-        this.stopEditing();
-        if(this.colModel.isCellEditable(col, row)){
-            this.view.ensureVisible(row, col, true);
-          
-            var r = this.dataSource.getAt(row);
-            var field = this.colModel.getDataIndex(col);
-            var cell = Roo.get(this.view.getCell(row,col));
-            var e = {
-                grid: this,
-                record: r,
-                field: field,
-                value: r.data[field],
-                row: row,
-                column: col,
-                cancel:false 
-            };
-            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
-                this.editing = true;
-                var ed = this.colModel.getCellEditor(col, row);
-                
-                if (!ed) {
-                    return;
-                }
-                if(!ed.rendered){
-                    ed.render(ed.parentEl || document.body);
-                }
-                ed.field.reset();
-               
-                cell.hide();
-                
-                (function(){ // complex but required for focus issues in safari, ie and opera
-                    ed.row = row;
-                    ed.col = col;
-                    ed.record = r;
-                    ed.on("complete",   this.onEditComplete,        this,       {single: true});
-                    ed.on("specialkey", this.selModel.onEditorKey,  this.selModel);
-                    this.activeEditor = ed;
-                    var v = r.data[field];
-                    ed.startEdit(this.view.getCell(row, col), v);
-                    // combo's with 'displayField and name set
-                    if (ed.field.displayField && ed.field.name) {
-                        ed.field.el.dom.value = r.data[ed.field.name];
-                    }
-                    
-                    
-                }).defer(50, this);
-            }
-        }
+    getGrid : function(){
+        return this.view;    
     },
-        
-    /**
-     * Stops any active editing
-     */
-    stopEditing : function(){
-        if(this.activeEditor){
-            this.activeEditor.completeEdit();
+    
+    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();
         }
-        this.activeEditor = null;
     },
-	
-	 /**
-     * Called to get grid's drag proxy text, by default returns this.ddText.
-     * @return {String}
-     */
-    getDragDropText : function(){
-        var count = this.selModel.getSelectedCell() ? 1 : 0;
-        return String.format(this.ddText, count, count == 1 ? '' : 's');
+    
+    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); 
     }
-	
 });
\ No newline at end of file