/*
-<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">×</button>
- <h4 class="modal-title">Modal title</h4>
- </div>
- <div class="modal-body">
- <p>One fine body…</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
* @extends Roo.bootstrap.Component
* Bootstrap Modal class
* @cfg {String} title Title of dialog
- * @cfg {Boolean} specificTitle (true|false) default false
+ * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
+ * @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
- * @cfg {Boolean} animate (true | false) default true
+ * @cfg {Boolean} animate default true
+ * @cfg {Boolean} allow_close default true
*
* @constructor
* Create a new Modal Dialog
"btnclick" : true
});
this.buttons = this.buttons || [];
+
+ if (this.tmpl) {
+ this.tmpl = Roo.factory(this.tmpl);
+ }
+
};
Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, {
buttons : false,
// set on load...
- body: false,
+
+ html: false,
+
+ tmp: false,
specificTitle: false,
buttonPosition: 'right',
+ allow_close : true,
+
animate : true,
+
+ // private
+ bodyEl: false,
+ footerEl: false,
+ titleEl: false,
+ closeEl: false,
+
+
onRender : function(ct, position)
{
Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
}
//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();
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') {
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(){
if(this.specificTitle){
title = this.title;
+
};
+ var header = [];
+ if (this.allow_close) {
+ header.push({
+ tag: 'button',
+ cls : 'close',
+ html : '×'
+ });
+ }
+ header.push(title);
+
var modal = {
cls: "modal",
style : 'display: none',
cn : [
{
cls : 'modal-header',
- cn : [
- {
- tag: 'button',
- cls : 'close',
- html : '×'
- },
- title
- ]
+ cn : header
},
bdy,
{
},
getChildContainer : function() {
- return this.el.select('.modal-body',true).first();
+ return this.bodyEl;
},
getButtonContainer : function() {
},
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) {
this.el.addClass('in');
}
+ // 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));
this.maskEl.show();
this.el.setStyle('zIndex', '10001');
+
this.fireEvent('show', this);
//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);
}
+
});
}
]
});
+
\ No newline at end of file
projects / roojs1 / blobdiff