X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=9e39fb86ca80ef3682e6b2aaa6f9e8c2b526ddf2;hb=5a09638750d76b5c2f42753ab924401909761f61;hp=6bb9cd0c0926991cc86ca1e2dda62ee090617dda;hpb=50c57c8e8f83719c66c64a18f16f89cc1b79a466;p=roojs1
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 6bb9cd0c09..9e39fb86ca 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -330,11 +330,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
}
if (this.cls) {
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
}
if (this.style) { // fixme needs to support more complex style data.
- cfg.style = this.style;
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
}
if(this.name){
@@ -2867,7 +2867,7 @@ Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element, {
* @cfg {Number} errorTimeout default 3000
* @cfg {Array} images an array of ?? Img objects ??? when loading existing files..
* @cfg {Array} html The button text.
-
+ * @cfg {Boolean} multiple (default true) Should the upload allow multiple files to be uploaded.
*
* @constructor
* Create a new CardUploader
@@ -2911,22 +2911,25 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, {
fileCollection : false,
allowBlank : true,
+ multiple : true,
+
getAutoCreate : function()
{
-
+ var im = {
+ tag: 'input',
+ type : 'file',
+ cls : 'd-none roo-card-upload-selector'
+
+ };
+ if (this.multiple) {
+ im.multiple = 'multiple';
+ }
return {
cls :'div' ,
cn : [
Roo.bootstrap.Button.prototype.getAutoCreate.call(this),
- {
- tag: 'input',
- multiple : 'multiple',
- type : 'file',
- cls : 'd-none roo-card-upload-selector'
-
- }
-
+ im
]
};
@@ -2980,7 +2983,7 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, {
return;
}
var files = Array.prototype.slice.call(this.selectorEl.dom.files);
- this.selectorEl.dom.reset();
+ this.selectorEl.dom.value = '';// hopefully reset..
this.fireEvent('uploaded', this, files );
@@ -3040,6 +3043,7 @@ Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, {
* @cfg {String} smUrl sm image source
* @cfg {String} mdUrl md image source
* @cfg {String} lgUrl lg image source
+ * @cfg {Boolean} backgroundContain (use style background and contain image in content)
*
* @constructor
* Create a new Input
@@ -3056,7 +3060,13 @@ Roo.bootstrap.Img = function(config){
* The img click event for the img.
* @param {Roo.EventObject} e
*/
- "click" : true
+ "click" : true,
+ /**
+ * @event load
+ * The when any image loads
+ * @param {Roo.EventObject} e
+ */
+ "load" : true
});
};
@@ -3071,6 +3081,7 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
smUrl: '',
mdUrl: '',
lgUrl: '',
+ backgroundContain : false,
getAutoCreate : function()
{
@@ -3143,12 +3154,20 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
tag: 'img',
cls: (this.imgResponsive) ? 'img-responsive' : '',
html : null,
- src : 'about:blank' // just incase src get's set to undefined?!?
+ src : Roo.BLANK_IMAGE_URL // just incase src get's set to undefined?!?
};
+ if (this.backgroundContain) {
+ cfg.cls += ' background-contain';
+ }
+
cfg.html = this.html || cfg.html;
- cfg.src = this.src || cfg.src;
+ if (this.backgroundContain) {
+ cfg.style="background-image: url(" + this.src + ')';
+ } else {
+ cfg.src = this.src || cfg.src;
+ }
if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
cfg.cls += ' img-' + this.border;
@@ -3181,6 +3200,12 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
if(!this.href){
this.el.on('click', this.onClick, this);
}
+ if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+ this.el.on('load', this.onImageLoad, this);
+ } else {
+ // not sure if this works.. not tested
+ this.el.select('img', true).on('load', this.onImageLoad, this);
+ }
},
@@ -3189,6 +3214,12 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
Roo.log('img onclick');
this.fireEvent('click', this, e);
},
+ onImageLoad: function(e)
+ {
+ Roo.log('img load');
+ this.fireEvent('load', this, e);
+ },
+
/**
* Sets the url of the image - used to update it
* @param {String} url the url of the image
@@ -3199,7 +3230,11 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
this.src = url;
if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
- this.el.dom.src = url;
+ if (this.backgroundContain) {
+ this.el.dom.style.backgroundImage = 'url(' + url + ')';
+ } else {
+ this.el.dom.src = url;
+ }
return;
}
@@ -3576,8 +3611,9 @@ Roo.bootstrap.MenuMgr = function(){
* @cfg {bool} hidden if the menu should be hidden when rendered.
* @cfg {bool} stopEvent (true|false) Stop event after trigger press (default true)
* @cfg {bool} isLink (true|false) the menu has link disable auto expand and collaspe (default false)
- * @cfg {bool} hideTrigger (true|false) default false - hide the carret for trigger.
- *
+ * @cfg {bool} hideTrigger (true|false) default false - hide the carret for trigger.
+ * @cfg {String} align default tl-bl? == below - how the menu should be aligned.
+
* @constructor
* Create a new Menu
* @param {Object} config The config object
@@ -3585,6 +3621,13 @@ Roo.bootstrap.MenuMgr = function(){
Roo.bootstrap.Menu = function(config){
+
+ if (config.type == 'treeview') {
+ // normally menu's are drawn attached to the document to handle layering etc..
+ // however treeview (used by the docs menu is drawn into the parent element)
+ this.container_method = 'getChildContainer';
+ }
+
Roo.bootstrap.Menu.superclass.constructor.call(this, config);
if (this.registerMenu && this.type != 'treeview') {
Roo.bootstrap.MenuMgr.register(this);
@@ -3654,7 +3697,7 @@ Roo.bootstrap.Menu = function(config){
Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
/// html : false,
- //align : '',
+
triggerEl : false, // is this set by component builder? -- it should really be fetched from parent()???
type: false,
/**
@@ -3676,6 +3719,8 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
hideTrigger : false,
+ align : 'tl-bl?',
+
getChildContainer : function() {
return this.el;
@@ -3686,11 +3731,10 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
//if (['right'].indexOf(this.align)!==-1) {
// cfg.cn[1].cls += ' pull-right'
//}
-
-
+
var cfg = {
tag : 'ul',
- cls : 'dropdown-menu' ,
+ cls : 'dropdown-menu shadow' ,
style : 'z-index:1000'
};
@@ -3708,19 +3752,22 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
// Roo.log("ADD event");
// Roo.log(this.triggerEl.dom);
+ if (this.triggerEl) {
+
+ this.triggerEl.on('click', this.onTriggerClick, this);
+
+ this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
+
+ if (!this.hideTrigger) {
+ if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
+ // dropdown toggle on the 'a' in BS4?
+ this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
+ } else {
+ this.triggerEl.addClass('dropdown-toggle');
+ }
+ }
+ }
- this.triggerEl.on('click', this.onTriggerClick, this);
-
- this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
-
- if (!this.hideTrigger) {
- if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
- // dropdown toggle on the 'a' in BS4?
- this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
- } else {
- this.triggerEl.addClass('dropdown-toggle');
- }
- }
if (Roo.isTouch) {
this.el.on('touchstart' , this.onTouch, this);
}
@@ -3838,8 +3885,31 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
if(!this.el){
this.render();
}
+ this.el.addClass('show'); // show otherwise we do not know how big we are..
+
+ var xy = this.el.getAlignToXY(el, pos);
+
+ // bl-tl << left align below
+ // tl-bl << left align
+
+ if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
+ // if it goes to far to the right.. -> align left.
+ xy = this.el.getAlignToXY(el, this.align.replace('/l/g', 'r'))
+ }
+ if(xy[0] < 0){
+ // was left align - go right?
+ xy = this.el.getAlignToXY(el, this.align.replace('/r/g', 'l'))
+ }
+
+ // goes down the bottom
+ if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight() ||
+ xy[1] < 0 ){
+ var a = this.align.replace('?', '').split('-');
+ xy = this.el.getAlignToXY(el, a[1] + '-' + a[0] + '?')
+
+ }
- this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
+ this.showAt( xy , parentMenu, false);
},
/**
* Displays this menu at a specific xy position
@@ -3859,18 +3929,17 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
//this.el.show();
this.hideMenuItems();
this.hidden = false;
- this.triggerEl.addClass('open');
+ if (this.triggerEl) {
+ this.triggerEl.addClass('open');
+ }
+
this.el.addClass('show');
+
+
// reassign x when hitting right
- if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
- xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
- }
// reassign y when hitting bottom
- if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight()){
- xy[1] = xy[1] - this.el.getHeight() - this.triggerEl.getHeight();
- }
// but the list may align on trigger left or trigger top... should it be a properity?
@@ -3902,9 +3971,9 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
hide : function(deep)
{
if (false === this.fireEvent("beforehide", this)) {
- Roo.log("hide canceled");
- return;
- }
+ Roo.log("hide canceled");
+ return;
+ }
this.hideMenuItems();
if(this.el && this.isVisible()){
@@ -3912,8 +3981,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
this.activeItem.deactivate();
this.activeItem = null;
}
- this.triggerEl.removeClass('open');;
- this.el.removeClass('show');
+ if (this.triggerEl) {
+ this.triggerEl.removeClass('open');
+ }
+
+ this.el.removeClass('show');
this.hidden = true;
this.fireEvent("hide", this);
}
@@ -3958,7 +4030,8 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
this.hide();
} else {
Roo.log('show');
- this.show(this.triggerEl, '?', false);
+
+ this.show(this.triggerEl, this.align, false);
}
if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
@@ -7264,30 +7337,15 @@ Roo.grid.ColumnModel = function(config){
/**
* The config passed into the constructor
*/
- this.config = config;
+ this.config = []; //config;
this.lookup = {};
// if no id, create one
// if the column does not have a dataIndex mapping,
// map it to the order it is in the config
for(var i = 0, len = config.length; i < len; i++){
- var c = config[i];
- if(typeof c.dataIndex == "undefined"){
- c.dataIndex = i;
- }
- if(typeof c.renderer == "string"){
- c.renderer = Roo.util.Format[c.renderer];
- }
- if(typeof c.id == "undefined"){
- c.id = Roo.id();
- }
- if(c.editor && c.editor.xtype){
- c.editor = Roo.factory(c.editor, Roo.grid);
- }
- if(c.editor && c.editor.isFormField){
- c.editor = new Roo.grid.GridEditor(c.editor);
- }
- this.lookup[c.id] = c;
+ this.addColumn(config[i]);
+
}
/**
@@ -7429,7 +7487,7 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
/**
- * Returns the column for a specified dataIndex.
+ * Returns the column Object for a specified dataIndex.
* @param {String} dataIndex The column dataIndex
* @return {Object|Boolean} the column or false if not found
*/
@@ -7755,7 +7813,35 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
*/
setEditor : function(col, editor){
this.config[col].editor = editor;
+ },
+ /**
+ * Add a column (experimental...) - defaults to adding to the end..
+ * @param {Object} config
+ */
+ addColumn : function(c)
+ {
+
+ var i = this.config.length;
+ this.config[i] = c;
+
+ if(typeof c.dataIndex == "undefined"){
+ c.dataIndex = i;
+ }
+ if(typeof c.renderer == "string"){
+ c.renderer = Roo.util.Format[c.renderer];
+ }
+ if(typeof c.id == "undefined"){
+ c.id = Roo.id();
+ }
+ if(c.editor && c.editor.xtype){
+ c.editor = Roo.factory(c.editor, Roo.grid);
+ }
+ if(c.editor && c.editor.isFormField){
+ c.editor = new Roo.grid.GridEditor(c.editor);
+ }
+ this.lookup[c.id] = c;
}
+
});
Roo.grid.ColumnModel.defaultRenderer = function(value)
@@ -8216,11 +8302,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
- var _this = this;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
- e.on('click', _this.sort, _this);
- });
+ e.on('click', this.sort, this);
+ }, this);
this.mainBody.on("click", this.onClick, this);
this.mainBody.on("dblclick", this.onDblClick, this);
@@ -8391,15 +8476,14 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
var rowIndex = this.getRowIndex(row);
// why??? - should these not be based on SelectionModel?
- if(this.cellSelection){
+ //if(this.cellSelection){
this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
- }
+ //}
- if(this.rowSelection){
+ //if(this.rowSelection){
this.fireEvent('rowclick', this, row, rowIndex, e);
- }
-
-
+ //}
+
},
onDblClick : function(e,el)
@@ -8447,7 +8531,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
var sort = col.attr('sort');
var dir = 'ASC';
- if(col.select('i', true).first().hasClass('glyphicon-arrow-up')){
+ if(col.select('i', true).first().hasClass('fa-arrow-up')){
dir = 'DESC';
}
@@ -8480,14 +8564,21 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
tag: 'th',
cls : 'x-hcol-' + i,
style : '',
+
html: cm.getColumnHeader(i)
};
+ var tooltip = cm.getColumnTooltip(i);
+ if (tooltip) {
+ c.tooltip = tooltip;
+ }
+
+
var hh = '';
if(typeof(config.sortable) != 'undefined' && config.sortable){
c.cls = 'sortable';
- c.html = '' + c.html;
+ c.html = '' + c.html;
}
// could use BS4 hidden-..-down
@@ -8622,15 +8713,15 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
var ds = this.store;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
- e.select('i', true).removeClass(['glyphicon-arrow-up', 'glyphicon-arrow-down']);
+ e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']);
if (_this.store.sortInfo) {
if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
- e.select('i', true).addClass(['glyphicon-arrow-up']);
+ e.select('i', true).addClass(['fa-arrow-up']);
}
if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
- e.select('i', true).addClass(['glyphicon-arrow-down']);
+ e.select('i', true).addClass(['fa-arrow-down']);
}
}
});
@@ -8828,6 +8919,9 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
var td = {
tag: 'td',
+ // this might end up displaying HTML?
+ // this is too messy... - better to only do it on columsn you know are going to be too long
+ //tooltip : (typeof(value) === 'object') ? '' : value,
cls : rowcfg.rowClass + ' x-col-' + i,
style: '',
html: (typeof(value) === 'object') ? '' : value
@@ -9054,6 +9148,12 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
this.mainHead.remove();
this.mainHead = table.createChild(header, this.mainBody, false);
+
+ Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
+ e.on('click', this.sort, this);
+ }, this);
+
+
},
onHiddenChange : function(colModel, colIndex, hidden)
@@ -16342,7 +16442,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
this.inputEl().on('mousedown', this.onTriggerClick, this);
this.inputEl().addClass('x-combo-noedit');
}else{
- this.inputEl().dom.setAttribute('readOnly', false);
+ this.inputEl().dom.removeAttribute('readOnly');
this.inputEl().un('mousedown', this.onTriggerClick, this);
this.inputEl().removeClass('x-combo-noedit');
}
@@ -17540,16 +17640,21 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
combobox.cls += ' roo-select2-container-multi';
}
+ var required = this.allowBlank ? {
+ tag : 'i',
+ style: 'display: none'
+ } : {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ };
+
var align = this.labelAlign || this.parentLabelAlign();
if (align ==='left' && this.fieldLabel.length) {
cfg.cn = [
- {
- tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ required,
{
tag: 'label',
cls : 'control-label col-form-label',
@@ -17579,11 +17684,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
tag : 'span',
html : this.fieldLabel
},
- {
- tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- }
+ required
]
},
{
@@ -17632,11 +17733,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
} else if ( this.fieldLabel.length) {
cfg.cn = [
- {
- tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ required,
{
tag: 'label',
cls : 'control-label',
@@ -17658,11 +17755,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
cls : 'control-label',
html : this.fieldLabel,
cn : [
- {
- tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- }
+ required
]
},
{
@@ -20197,7 +20290,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, {
if (this.parent() && (this.over == 'parent' || (this.over === false))) {
on_el = this.parent().el;
} else if (this.over) {
- Roo.get(this.over);
+ on_el = Roo.get(this.over);
}
}
@@ -20365,15 +20458,18 @@ Roo.apply(Roo.bootstrap.Popover, {
clickHander : false,
+
onMouseDown : function(e)
{
- if (!e.getTarget(".roo-popover")) {
+ if (this.popups.length && !e.getTarget(".roo-popover")) {
+ /// what is nothing is showing..
this.hideAll();
}
},
+
popups : [],
register : function(popup)
@@ -20382,15 +20478,23 @@ Roo.apply(Roo.bootstrap.Popover, {
Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover);
}
// hide other popups.
- this.hideAll();
- this.popups.push(popup);
+ popup.on('show', Roo.bootstrap.Popover.onShow, popup);
+ popup.on('hide', Roo.bootstrap.Popover.onHide, popup);
+ this.hideAll(); //<< why?
+ //this.popups.push(popup);
},
hideAll : function()
{
this.popups.forEach(function(p) {
p.hide();
});
- }
+ },
+ onShow : function() {
+ Roo.bootstrap.Popover.popups.push(this);
+ },
+ onHide : function() {
+ Roo.bootstrap.Popover.popups.remove(this);
+ }
});/*
* - LGPL
@@ -21881,7 +21985,10 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, {
break;
case 'span':
if (className.indexOf('disabled') < 0) {
- this.viewDate.setUTCDate(1);
+ if (!this.viewDate) {
+ this.viewDate = new Date();
+ }
+ this.viewDate.setUTCDate(1);
if (className.indexOf('month') > -1) {
this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
} else {
@@ -29055,10 +29162,19 @@ Roo.apply(Roo.bootstrap.Tooltip, {
return;
}
- var bindEl = el;
+ var bindEl = el;
+ var pel = false;
+ if (!el.attr('tooltip')) {
+ pel = el.findParent("[tooltip]");
+ if (pel) {
+ bindEl = Roo.get(pel);
+ }
+ }
+
+
// you can not look for children, as if el is the body.. then everythign is the child..
- if (!el.attr('tooltip')) { //
+ if (!pel && !el.attr('tooltip')) { //
if (!el.select("[tooltip]").elements.length) {
return;
}
@@ -29072,7 +29188,7 @@ Roo.apply(Roo.bootstrap.Tooltip, {
//Roo.log("child element over..");
}
- this.currentEl = bindEl;
+ this.currentEl = el;
this.currentTip.bind(bindEl);
this.currentRegion = Roo.lib.Region.getRegion(dom);
this.currentTip.enter();
@@ -29264,6 +29380,22 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, {
}
+ var elems = document.getElementsByTagName('div');
+ var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
+ for (var i = 0; i < elems.length; i++) {
+ var zindex = Number.parseInt(
+ document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
+ 10
+ );
+ if (zindex > highest) {
+ highest = zindex;
+ }
+ }
+
+
+
+ this.el.dom.style.zIndex = highest;
+
this.el.alignTo(this.bindEl, align[0],align[1]);
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
@@ -29791,8 +29923,11 @@ Roo.apply(Roo.bootstrap.LocationPicker, {
* @licence LGPL
* @cfg {String} title The title of alert
* @cfg {String} html The content of alert
- * @cfg {String} weight ( success | info | warning | danger )
- * @cfg {String} faicon font-awesomeicon
+ * @cfg {String} weight (success|info|warning|danger) Weight of the message
+ * @cfg {String} fa font-awesomeicon
+ * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.)
+ * @cfg {Boolean} close true to show a x closer
+ *
*
* @constructor
* Create a new alert
@@ -29810,7 +29945,10 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
title: '',
html: '',
weight: false,
- faicon: false,
+ fa: false,
+ faicon: false, // BC
+ close : false,
+
getAutoCreate : function()
{
@@ -29819,6 +29957,13 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
tag : 'div',
cls : 'alert',
cn : [
+ {
+ tag: 'button',
+ type : "button",
+ cls: "close",
+ html : 'Ã',
+ style : this.close ? '' : 'display:none'
+ },
{
tag : 'i',
cls : 'roo-alert-icon'
@@ -29840,6 +29985,9 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
if(this.faicon){
cfg.cn[0].cls += ' fa ' + this.faicon;
}
+ if(this.fa){
+ cfg.cn[0].cls += ' fa ' + this.fa;
+ }
if(this.weight){
cfg.cls += ' alert-' + this.weight;
@@ -29851,45 +29999,69 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
initEvents: function()
{
this.el.setVisibilityMode(Roo.Element.DISPLAY);
+ this.titleEl = this.el.select('.roo-alert-title',true).first();
+ this.iconEl = this.el.select('.roo-alert-icon',true).first();
+ this.htmlEl = this.el.select('.roo-alert-text',true).first();
+ if (this.seconds > 0) {
+ this.hide.defer(this.seconds, this);
+ }
},
-
+ /**
+ * Set the Title Message HTML
+ * @param {String} html
+ */
setTitle : function(str)
{
- this.el.select('.roo-alert-title',true).first().dom.innerHTML = str;
+ this.titleEl.dom.innerHTML = str;
},
-
- setText : function(str)
+
+ /**
+ * Set the Body Message HTML
+ * @param {String} html
+ */
+ setHtml : function(str)
{
- this.el.select('.roo-alert-text',true).first().dom.innerHTML = str;
+ this.htmlEl.dom.innerHTML = str;
},
+ /**
+ * Set the Weight of the alert
+ * @param {String} (success|info|warning|danger) weight
+ */
setWeight : function(weight)
{
if(this.weight){
- this.el.select('.alert',true).first().removeClass('alert-' + this.weight);
+ this.el.removeClass('alert-' + this.weight);
}
this.weight = weight;
- this.el.select('.alert',true).first().addClass('alert-' + this.weight);
+ this.el.addClass('alert-' + this.weight);
},
-
+ /**
+ * Set the Icon of the alert
+ * @param {String} see fontawsome names (name without the 'fa-' bit)
+ */
setIcon : function(icon)
{
if(this.faicon){
- this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]);
+ this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
}
this.faicon = icon;
- this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]);
+ this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
},
-
+ /**
+ * Hide the Alert
+ */
hide: function()
{
this.el.hide();
},
-
+ /**
+ * Show the Alert
+ */
show: function()
{
this.el.show();
@@ -40041,7 +40213,15 @@ Roo.bootstrap.panel.Content = function( config){
* Fires when this tab is created
* @param {Roo.ContentPanel} this
*/
- "render" : true
+ "render" : true,
+
+ /**
+ * @event scroll
+ * Fires when this content is scrolled
+ * @param {Roo.ContentPanel} this
+ * @param {Event} scrollEvent
+ */
+ "scroll" : true
@@ -40052,6 +40232,7 @@ Roo.bootstrap.panel.Content = function( config){
if(this.autoScroll && !this.iframe){
this.resizeEl.setStyle("overflow", "auto");
+ this.resizeEl.on('scroll', this.onScroll, this);
} else {
// fix randome scrolling
//this.el.on('scroll', function() {
@@ -40091,6 +40272,9 @@ Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, {
iframe : false,
iframeEl : false,
+ /* Resize Element - use this to work out scroll etc. */
+ resizeEl : false,
+
setRegion : function(region){
this.region = region;
this.setActiveClass(region && !this.background);
@@ -40400,6 +40584,12 @@ layout.addxtype({
getChildContainer: function () {
return this.getEl();
+ },
+
+
+ onScroll : function(e)
+ {
+ this.fireEvent('scroll', this, e);
}