Roo/Template.js

[roojs1] / Roo / View.js

diff --git a/Roo/View.js b/Roo/View.js
index 45f1cd2..375efce 100644 (file)
--- a/Roo/View.js
+++ b/Roo/View.js
@@ -18,12 +18,13 @@
  <pre><code>
  var store = new Roo.data.Store(...);
 
- var view = new Roo.View("my-element",
- '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
- {
- singleSelect: true,
- selectedClass: "ydataview-selected",
- store: store
+ var view = new Roo.View({
+    el : "my-element",
+    template : '&lt;div id="{0}"&gt;{2} - {1}&lt;/div&gt;', // auto create template
+ 
+    singleSelect: true,
+    selectedClass: "ydataview-selected",
+    store: store
  });
 
  // listen for node click?
@@ -38,38 +39,37 @@
  * <br><br>
  * <b>Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to
  * IE"s limited insertion support with tables and Opera"s faulty event bubbling.</b>
+ * 
+ * Note: old style constructor is still suported (container, template, config)
+ * 
  * @constructor
  * Create a new View
- * @param {String/HTMLElement/Element} container The container element where the view is to be rendered.
- * @param {String/DomHelper.Template} tpl The rendering template or a string to create a template with
  * @param {Object} config The config object
+ * 
  */
 Roo.View = function(config, depreciated_tpl, depreciated_config){
     
     if (typeof(depreciated_tpl) == 'undefined') {
-        config = depreciated_container;
-        depreciated_container = config.container;
-        depreciated_tpl = = config.template;
+        // new way.. - universal constructor.
+        Roo.apply(this, config);
+        this.el  = Roo.get(this.el);
+    } else {
+        // old format..
+        this.el  = Roo.get(config);
+        this.tpl = depreciated_tpl;
+        Roo.apply(this, depreciated_config);
+    }
+     
+    
+    if(typeof(this.tpl) == "string"){
+        this.tpl = new Roo.Template(this.tpl);
     } 
     
-    this.container = depreciated_container;
-    this.template = depreciated_tpl;
     
-    this.el = Roo.get(this.container);
-    if(typeof(this.template) == "string"){
-        this.tpl = new Roo.Template(this.template);
-    } else {
-        this.tpl = this.template;
-    }
     this.tpl.compile();
-    /**
-     * The template used by this View
-     * @type {Roo.DomHelper.Template}
-     */
-    //this.tpl = tpl;
-
-    Roo.apply(this, config);
+   
 
+     
     /** @private */
     this.addEvents({
     /**
@@ -145,29 +145,28 @@ Roo.View = function(config, depreciated_tpl, depreciated_config){
 
 Roo.extend(Roo.View, Roo.util.Observable, {
     
-    /**
-     * The container element.
-     * @cfg {String|Roo.Element}
+     /**
+     * @cfg {Roo.data.Store} store Data store to load data from.
      */
-    container : '',
+    store : false,
+    
     /**
-     * The template used by this View
-     * @cfg {String|Roo.DomHelper.Template}
+     * @cfg {String|Roo.Element} el The container element.
      */
-    template : '',
+    el : '',
     
     /**
-     * The template used by this View (after contruction)
-     * @type {Roo.DomHelper.Template}
+     * @cfg {String|Roo.Template} tpl The template used by this View 
      */
-    this.tpl : false,
+    tpl : false,
     
     /**
-     * The css class to add to selected nodes
-     * @type {Roo.DomHelper.Template}
+     * @cfg {String} selectedClass The css class to add to selected nodes
      */
     selectedClass : "x-view-selected",
-    
+     /**
+     * @cfg {String} emptyText The empty text to show when nothing is loaded.
+     */
     emptyText : "",
     /**
      * Returns the element this view is bound to.