Roo/bootstrap/Button.js

[roojs1] / Roo / bootstrap / Modal.js

diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js
index 46b311d..33b8585 100644 (file)
--- a/Roo/bootstrap/Modal.js
+++ b/Roo/bootstrap/Modal.js
@@ -1,29 +1,7 @@
 
 /*
-<div class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        <p>One fine body&hellip;</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
-      </div>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+* Licence: LGPL
 */
-/*
- * - LGPL
- *
- * page contgainer.
- * 
- */
 
 /**
  * @class Roo.bootstrap.Modal
@@ -31,7 +9,7 @@
  * Bootstrap Modal class
  * @cfg {String} title Title of dialog
  * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
- * @cfg {Roo.Template} tmpl - a template with variables.
+ * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method  adn 
  * @cfg {Boolean} specificTitle default false
  * @cfg {Array} buttons Array of buttons or standard button set..
  * @cfg {String} buttonPosition (left|right|center) default right
@@ -55,6 +33,11 @@ Roo.bootstrap.Modal = function(config){
         "btnclick" : true
     });
     this.buttons = this.buttons || [];
+     
+    if (this.tmpl) {
+        this.tmpl = Roo.factory(this.tmpl);
+    }
+    
 };
 
 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
@@ -64,8 +47,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     buttons : false,
     
     // set on load...
-    body:  false,
-    
+     
     html: false,
     
     tmp: false,
@@ -78,6 +60,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     
     animate : true,
     
+    
+     // private
+    bodyEl:  false,
+    footerEl:  false,
+    titleEl:  false,
+    closeEl:  false,
+    
+    
     onRender : function(ct, position)
     {
         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
@@ -101,12 +91,21 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         }
         //var type = this.el.dom.type;
         
+        
+        
+        
         if(this.tabIndex !== undefined){
             this.el.dom.setAttribute('tabIndex', this.tabIndex);
         }
         
         
+        this.bodyEl = this.el.select('.modal-body',true).first();
+        this.closeEl = this.el.select('.modal-header .close', true).first();
+        this.footerEl = this.el.select('.modal-footer',true).first();
+        this.titleEl = this.el.select('.modal-title',true).first();
+        
         
+         
         this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
         this.maskEl.enableDisplayMode("block");
         this.maskEl.hide();
@@ -114,7 +113,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     
         if (this.buttons.length) {
             Roo.each(this.buttons, function(bb) {
-                b = Roo.apply({}, bb);
+                var b = Roo.apply({}, bb);
                 b.xns = b.xns || Roo.bootstrap;
                 b.xtype = b.xtype || 'Button';
                 if (typeof(b.listeners) == 'undefined') {
@@ -141,13 +140,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         
         this.items = nitems;
         
-        this.body = this.el.select('.modal-body',true).first();
-        this.close = this.el.select('.modal-header .close', true).first();
-        this.footer = this.el.select('.modal-footer',true).first();
+        // where are these used - they used to be body/close/footer
+        
+       
         this.initEvents();
         //this.el.addClass([this.fieldClass, this.cls]);
         
     },
+    
     getAutoCreate : function(){
         
         
@@ -222,7 +222,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     },
     getChildContainer : function() {
          
-         return this.el.select('.modal-body',true).first();
+         return this.bodyEl;
         
     },
     getButtonContainer : function() {
@@ -231,10 +231,21 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     },
     initEvents : function()
     {
-        this.el.select('.modal-header .close').on('click', this.hide, this);
-//        
-//        this.addxtype(this);
+        if (this.allow_close) {
+            this.closeEl.on('click', this.hide, this);
+        }
+        
+        var _this = this;
+        
+        window.addEventListener("resize", function() { _this.resize(); } );
+
     },
+    
+    resize : function()
+    {
+        this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+    },
+    
     show : function() {
         
         if (!this.rendered) {
@@ -250,9 +261,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             this.el.addClass('in');
         }
         
-        if (this.tmpl) {
-            this.tmpl.apply(this.getChildContainer(), this);
-        }
+        // not sure how we can show data in here.. 
+        //if (this.tmpl) {
+        //    this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
+        //}
         
         Roo.get(document.body).addClass("x-body-masked");
         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
@@ -315,10 +327,33 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         //Roo.log([a,b,c]);
         this.fireEvent('btnclick', btn.name, e);
     },
+     /**
+     * Set the title of the Dialog
+     * @param {String} str new Title
+     */
     setTitle: function(str) {
-        this.el.select('.modal-title',true).first().dom.innerHTML = str;
-        
+        this.titleEl.dom.innerHTML = str;    
+    },
+    /**
+     * Set the body of the Dialog
+     * @param {String} str new Title
+     */
+    setBody: function(str) {
+        this.bodyEl.dom.innerHTML = str;    
+    },
+    /**
+     * Set the body of the Dialog using the template
+     * @param {Obj} data - apply this data to the template and replace the body contents.
+     */
+    applyBody: function(obj)
+    {
+        if (!this.tmpl) {
+            Roo.log("Error - using apply Body without a template");
+            //code
+        }
+        this.tmpl.overwrite(this.bodyEl, obj);
     }
+    
 });