X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=9e39fb86ca80ef3682e6b2aaa6f9e8c2b526ddf2;hb=5ba88dd4a3a3098a79287438e6aebe26b076010d;hp=34f9364960e459a256a96b11806b29047aae68f0;hpb=6cbe44662ecbba0cbd9f4e38d6f94158668f3942;p=roojs1
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 34f9364960..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){
@@ -3043,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
@@ -3059,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
});
};
@@ -3074,6 +3081,7 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
smUrl: '',
mdUrl: '',
lgUrl: '',
+ backgroundContain : false,
getAutoCreate : function()
{
@@ -3146,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;
@@ -3184,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);
+ }
},
@@ -3192,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
@@ -3202,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;
}
@@ -7305,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]);
+
}
/**
@@ -7470,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
*/
@@ -7796,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)
@@ -8257,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);
@@ -8432,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)
@@ -8488,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';
}
@@ -8521,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
@@ -8663,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']);
}
}
});
@@ -8869,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
@@ -9095,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)
@@ -20399,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)
@@ -20416,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
@@ -21915,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 {
@@ -29850,7 +29923,7 @@ 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} 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
@@ -29928,20 +30001,32 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
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.titleEl.dom.innerHTML = str;
},
-
- setText : function(str)
+
+ /**
+ * Set the Body Message HTML
+ * @param {String} html
+ */
+ setHtml : function(str)
{
- this.titleEl.dom.innerHTML = str;
+ this.htmlEl.dom.innerHTML = str;
},
+ /**
+ * Set the Weight of the alert
+ * @param {String} (success|info|warning|danger) weight
+ */
setWeight : function(weight)
{
@@ -29953,7 +30038,10 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
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){
@@ -29964,12 +30052,16 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
},
-
+ /**
+ * Hide the Alert
+ */
hide: function()
{
this.el.hide();
},
-
+ /**
+ * Show the Alert
+ */
show: function()
{
this.el.show();
@@ -40121,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
@@ -40132,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() {
@@ -40171,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);
@@ -40480,6 +40584,12 @@ layout.addxtype({
getChildContainer: function () {
return this.getEl();
+ },
+
+
+ onScroll : function(e)
+ {
+ this.fireEvent('scroll', this, e);
}