/**
* @class Roo.bootstrap.Modal
* @extends Roo.bootstrap.Component
+ * @parent none builder
+ * @children Roo.bootstrap.Component
* 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. 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 {Roo.bootstrap.Button} buttons[] Array of buttons or standard button set..
* @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
* @cfg {Boolean} animate default true
* @cfg {Boolean} allow_close default true
* @cfg {Boolean} fitwindow default false
+ * @cfg {Boolean} bodyOverflow should the body element have overflow auto added default false
* @cfg {Number} width fixed width - usefull for chrome extension only really.
* @cfg {Number} height fixed height - usefull for chrome extension only really.
- * @cfg {String} size (sm|lg) default empty
+ * @cfg {String} size (sm|lg|xl) default empty
* @cfg {Number} max_width set the max width of modal
* @cfg {Boolean} editableTitle can the title be edited
{
// we will default to modal-body-overflow - might need to remove or make optional later.
var bdy = {
- cls : 'modal-body enable-modal-body-overflow ',
+ cls : 'modal-body ' + (this.bodyOverflow ? 'overflow-auto' : ''),
html : this.html || ''
};
var title = {
- tag: 'h4',
+ tag: 'h5',
cls : 'modal-title',
html : this.title
};
this.headerEditEl = this.headerEl.select('.form-control',true).first();
this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
this.headerEditEl.on('keyup', function(e) {
- if(e.isNavKeyPress()){
- this.toggleHeaderInput(false)
+ if([ e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
+ this.toggleHeaderInput(false)
}
}, this);
this.headerEditEl.on('blur', function(e) {
if (this.fitwindow) {
-
+ this.dialogEl.setStyle( { 'max-width' : '100%' });
this.setSize(
this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
if (!this.rendered) {
this.render();
}
-
+ this.toggleHeaderInput(false);
//this.el.setStyle('display', 'block');
this.el.removeClass('hideing');
this.el.dom.style.display='block';
},
toggleHeaderInput : function(is_edit)
{
-
+ if (!this.editableTitle) {
+ return; // not editable.
+ }
if (is_edit && this.is_header_editing) {
return; // already editing..
}