* @cfg {Boolean} allow_close default true
* @cfg {Boolean} fitwindow default false
* @cfg {String} size (sm|lg) default empty
+ * @cfg {Number} max_width set the max width of modal
*
*
* @constructor
* The raw btnclick event for the button
* @param {Roo.EventObject} e
*/
- "btnclick" : true
+ "btnclick" : true,
+ /**
+ * @event resize
+ * Fire when dialog resize
+ * @param {Roo.bootstrap.Modal} this
+ * @param {Roo.EventObject} e
+ */
+ "resize" : true
});
this.buttons = this.buttons || [];
closeEl: false,
size: '',
+
+ max_width: 0,
onRender : function(ct, position)
this.footerEl = this.el.select('.modal-footer',true).first();
this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
- this.maskEl.enableDisplayMode("block");
- this.maskEl.hide();
+
//this.el.addClass("x-dlg-modal");
if (this.buttons.length) {
},
- getAutoCreate : function(){
-
-
+ getAutoCreate : function()
+ {
var bdy = {
cls : 'modal-body',
html : this.html || ''
var modal = {
cls: "modal",
- style : 'display: none',
- cn : [
+ cn : [
{
cls: "modal-dialog " + size,
cn : [
resize : function()
{
this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
+
if (this.fitwindow) {
var w = this.width || Roo.lib.Dom.getViewportWidth(true) - 30;
var h = this.height || Roo.lib.Dom.getViewportHeight(true) - 60;
this.setSize(w,h);
}
+
+ if(!this.fitwindow && this.max_width !== 0){
+
+ var w = Math.min(this.max_width, Roo.lib.Dom.getViewportWidth(true) - 30);
+
+ Roo.log(this.height);
+
+ if(this.height) {
+ this.setSize(w, this.height);
+ return;
+ }
+
+ var view_height = Roo.lib.Dom.getViewportHeight(true) - 60;
+
+ var body_childs = this.bodyEl.dom.childNodes;
+ var body_height = 0;
+ for(var i = 0; i < body_childs.length; i++) {
+ body_height += body_childs[i].offsetHeight;
+ }
+
+ // this.setSize(w, this.height || view_height);
+
+
+
+ //
+ // if(
+ // (
+ // this.headerEl.getHeight() +
+ // this.bodyEl.getHeight() +
+ // this.footerEl.getHeight()
+ // ) > view_height) {
+ // } {
+ // this.setSize(w,view_height);
+ // }
+ }
+
},
setSize : function(w,h)
this.render();
}
- this.el.setStyle('display', 'block');
-
+ //this.el.setStyle('display', 'block');
+ this.el.removeClass('hideing');
+ this.el.addClass('show');
+
if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay?
var _this = this;
(function(){
}).defer(50, this);
}else{
this.el.addClass('in');
-
}
// not sure how we can show data in here..
this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
- this.maskEl.show();
- this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
-
+ this.maskEl.addClass('show');
+
+ this.resize();
+
this.fireEvent('show', this);
- this.resize();
+ // set zindex here - otherwise it appears to be ignored...
+ this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
(function () {
this.items.forEach( function(e) {
hide : function()
{
if(this.fireEvent("beforehide", this) !== false){
- this.maskEl.hide();
+ this.maskEl.removeClass('show');
Roo.get(document.body).removeClass("x-body-masked");
this.el.removeClass('in');
this.el.select('.modal-dialog', true).first().setStyle('transform','');
if(this.animate){ // why
- var _this = this;
- (function(){ _this.el.setStyle('display', 'none'); }).defer(150);
+ this.el.addClass('hideing');
+ (function(){
+ if (!this.el.hasClass('hideing')) {
+ return; // it's been shown again...
+ }
+ this.el.removeClass('show');
+ this.el.removeClass('hideing');
+ }).defer(150,this);
+
}else{
- this.el.setStyle('display', 'none');
+ this.el.removeClass('show');
}
this.fireEvent('hide', this);
}
},
+ isVisible : function()
+ {
+
+ return this.el.hasClass('show') && !this.el.hasClass('hideing');
+
+ },
addButton : function(str, cb)
{
this.bodyEl.setHeight(h-this.diff);
+ this.fireEvent('resize', this);
},
setContentSize : function(w, h)