var cfg = {
cls: 'btn-group',
html : null
- }
+ };
cfg.html = this.html || cfg.html;
cfg = {
cls: 'btn-toolbar',
html: null
- }
+ };
return cfg;
}
tag: 'div',
cls: 'roo-image-responsive-group',
cn: []
- }
+ };
var _this = this;
Roo.each(['xs', 'sm', 'md', 'lg'], function(size){
cls: (_this.imgResponsive) ? 'img-responsive' : '',
html: _this.html || cfg.html,
src: _this[size + 'Url']
- }
+ };
img.cls += ' roo-image-responsive-' + size;
cn: [
img
]
- }
+ };
if(this.target){
a.target = _this.target;
tag: 'img',
cls: (this.imgResponsive) ? 'img-responsive' : '',
html : null
- }
+ };
cfg.html = this.html || cfg.html;
tag: 'a',
href: this.href,
cn: [
- cfg
- ]
- }
+ cfg
+ ]
+ };
if(this.target){
a.target = this.target;
cls : 'dropdown-menu' ,
style : 'z-index:1000'
- }
+ };
if (this.type === 'submenu') {
cfg.cls = 'submenu active';
this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
this.triggerEl.addClass('dropdown-toggle');
- this.el.on(Roo.isTouch ? 'touchstart' : 'click' , this.onClick, this);
+
+
+
+
+ if (Roo.isTouch) {
+ this.el.on('touchstart' , this.onTouch, this);
+ }
+ this.el.on('click' , this.onClick, this);
this.el.on("mouseover", this.onMouseOver, this);
this.el.on("mouseout", this.onMouseOut, this);
return false;
},
+
+ onTouch : function(e) {
+ e.stopEvent();
+ this.onClick(e);
+ },
+
onClick : function(e){
Roo.log("menu.onClick");
var t = this.findTargetItem(e);
var mark = {
tag: "div",
cls:"x-dlg-mask"
- }
+ };
this.maskEl = Roo.DomHelper.append(this.el, mark, true);
cfg = {
tag : 'ul',
cls: 'nav'
- }
+ };
if (['tabs','pills'].indexOf(this.type)!==-1) {
cfg.cls += ' nav-' + this.type
cfg = {
tag: 'ul',
cls: 'dashboard-menu sidebar-menu'
- }
+ };
return cfg;
}
cfg = {
tag: 'form',
cls: 'navbar-form'
- }
+ };
if (this.align === 'right') {
cfg.cls += ' navbar-right';
tag: 'li',
cls: 'nav-item'
- }
+ };
+
if (this.active) {
cfg.cls = typeof(cfg.cls) == 'undefined' ? 'active' : cfg.cls + ' active';
}
var options = {
target : target,
value : o[1]
- }
+ };
this.fireEvent('scrollto', this, options, e);
* @class Roo.bootstrap.NavSidebarItem
* @extends Roo.bootstrap.NavItem
* Bootstrap Navbar.NavSidebarItem class
+ * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
* @constructor
* Create a new Navbar Button
* @param {Object} config The config object
Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, {
+ badgeWeight : 'default',
getAutoCreate : function(){
tag: 'li',
cls: '',
cn: [ a ]
- }
+ };
var span = {
tag: 'span',
html : this.html || ''
- }
+ };
if (this.active) {
cfg.cls += ' active';
}
+ if (this.disabled) {
+ cfg.cls += ' disabled';
+ }
+
// left icon..
if (this.glyphicon || this.icon) {
var c = this.glyphicon ? ('glyphicon glyphicon-'+this.glyphicon) : this.icon;
a.cn.push(span);
// then badge..
if (this.badge !== '') {
- a.cn.push({ tag: 'span', cls : 'badge pull-right ' + (this.badgecls || ''), html: this.badge });
+
+ a.cn.push({ tag: 'span', cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
}
// fi
if (this.menu) {
return cfg;
+ },
+
+ initEvents : function()
+ {
+ this.el.on('click', this.onClick, this);
+
+
+ if(this.badge !== ''){
+
+ this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
+ }
+
+ },
+
+ onClick : function(e)
+ {
+ if(this.disabled){
+ e.preventDefault();
+ return;
+ }
+
+ if(this.preventDefault){
+ e.preventDefault();
+ }
+
+ this.fireEvent('click', this);
+ },
+
+ disable : function()
+ {
+ this.setDisabled(true);
+ },
+
+ enable : function()
+ {
+ this.setDisabled(false);
+ },
+
+ setDisabled : function(state)
+ {
+ if(this.disabled == state){
+ return;
+ }
+
+ this.disabled = state;
+
+ if (state) {
+ this.el.addClass('disabled');
+ return;
+ }
+
+ this.el.removeClass('disabled');
+
+ return;
+ },
+
+ setActive : function(state)
+ {
+ if(this.active == state){
+ return;
+ }
+
+ this.active = state;
+
+ if (state) {
+ this.el.addClass('active');
+ return;
+ }
+
+ this.el.removeClass('active');
+
+ return;
+ },
+
+ isActive: function ()
+ {
+ return this.active;
+ },
+
+ setBadge : function(str)
+ {
+ if(!this.badgeEl){
+ return;
+ }
+
+ this.badgeEl.dom.innerHTML = str;
}
+
tag: this.tag,
cls: this.cls,
html: this.html
- }
+ };
return cfg;
},
cls: 'ui-slider-handle ui-state-default ui-corner-all'
}
]
- }
+ };
return cfg;
}
/**
* @cfg {String} tooltip (Optional)
*/
+ /**
+ * @cfg {Number} xs (Optional)
+ */
+ /**
+ * @cfg {Number} sm (Optional)
+ */
+ /**
+ * @cfg {Number} md (Optional)
+ */
+ /**
+ * @cfg {Number} lg (Optional)
+ */
/**
* Returns the id of the column at the specified index.
* @param {Number} index The column index
tag: 'table',
cls : 'table',
cn : []
- }
+ };
if (this.striped) {
cfg.cls += ' table-striped';
c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
}
+ ['xs','sm','md','lg'].map(function(size){
+
+ if(typeof(config[size]) == 'undefined'){
+ return;
+ }
+
+ if (!config[size]) { // 0 = hidden
+ cfg.cls += ' hidden-' + size;
+ return;
+ }
+
+ cfg.cls += ' col-' + size + '-' + config[size];
+
+ });
+
header.cn.push(c)
}
rowIndex : rowIndex,
colIndex : i,
rowClass : ''
- }
+ };
this.fireEvent('rowclass', this, rowcfg);
if(typeof(config.cls) != 'undefined'){
td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
}
+
+ ['xs','sm','md','lg'].map(function(size){
+
+ if(typeof(config[size]) == 'undefined'){
+ return;
+ }
+
+ if (!config[size]) { // 0 = hidden
+ td.cls += ' hidden-' + size;
+ return;
+ }
+
+ td.cls += ' col-' + size + '-' + config[size];
+
+ });
row.cn.push(td);
var child = {
container: t.getChildContainer(),
cfg: c
- }
+ };
_this.renderCellObject(child);
})
}
getAutoCreate : function(){
var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
- cfg = {
- tag: 'td'
- }
+ cfg = {
+ tag: 'td'
+ };
if(this.tag){
cfg.tag = this.tag;
cfg = {
tag: 'tr'
- }
+ };
if(this.cls){
cfg.cls = this.cls;
cfg = {
tag: 'tbody'
- }
+ };
if (this.cls) {
cfg.cls=this.cls
method : this.method || 'POST',
id : this.id || Roo.id(),
cls : ''
- }
+ };
if (this.parent().xtype.match(/^Nav/)) {
cfg.cls = 'navbar-form navbar-' + this.align;
* @extends Roo.bootstrap.Component
* Bootstrap Input class
* @cfg {Boolean} disabled is it disabled
- * @cfg {String} fieldLabel - the label associated
* @cfg {String} inputType button | checkbox | email | file | hidden | image | number | password | radio | range | reset | search | submit | text
* @cfg {String} name name of the input
* @cfg {string} fieldLabel - the label associated
- * @cfg {string} inputType - input / file submit ...
* @cfg {string} placeholder - placeholder to put in text.
* @cfg {string} before - input group add on before
* @cfg {string} after - input group add on after
}
this.el.removeClass(this.invalidClass);
+ if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+
+ var feedback = this.el.select('.form-control-feedback', true).first();
+
+ if(feedback){
+ this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
+ }
+
+ }
+
this.fireEvent('valid', this);
},
* Mark this field as invalid
* @param {String} msg The validation message
*/
- markInvalid : function(msg){
+ markInvalid : function(msg)
+ {
if(!this.el || this.preventMark){ // not rendered
return;
}
* @cfg {String} btnPosition set the position of the trigger button (left | right) default right
* @cfg {Boolean} animate default true
* @cfg {Boolean} emptyResultText only for touch device
+ * @cfg {String} triggerText multiple combobox trigger button text default 'Select'
* @constructor
* Create a new ComboBox.
* @param {Object} config Configuration options
showToggleBtn : true,
animate : true,
emptyResultText: 'Empty',
+ triggerText : 'Select',
+
// element that contains real text value.. (when hidden is used..)
getAutoCreate : function()
tag : 'button',
type : 'button',
cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
- html : 'Edit'
+ html : this.triggerText
},
{
tag : 'button',
]
}
]
- }
+ };
var combobox = {
cls: 'select2-container input-group select2-container-multi',
},
+ _initEventsCalled : false,
+
// private
initEvents: function()
{
+ if (this._initEventsCalled) { // as we call render... prevent looping...
+ return;
+ }
+ this._initEventsCalled = true;
+
if (!this.store) {
throw "can not find store for combo";
}
this.store = Roo.factory(this.store, Roo.data);
+ // if we are building from html. then this element is so complex, that we can not really
+ // use the rendered HTML.
+ // so we have to trash and replace the previous code.
+ if (Roo.XComponent.build_from_html) {
+
+ // remove this element....
+ var e = this.el.dom, k=0;
+ while (e ) { e = e.previousSibling; ++k;}
+
+ this.el.remove();
+
+ this.el=false;
+ this.rendered = false;
+
+ this.render(this.parent().getChildContainer(true), k);
+
+
+
+ }
+
+
/*
* Touch Devices
*/
var fctr = this.wrapEl.appendChild(document.createElement("div"));
- this.footer.dataSource = this.store
+ this.footer.dataSource = this.store;
this.footer.container = fctr;
this.footer = Roo.factory(this.footer, Roo);
fctr.insertFirst(this.el);
]
}
]
- }
+ };
this.maskEl = Roo.DomHelper.append(this.el.select('.fc-content', true).first(), mark, true);
var size = this.el.select('.fc-content', true).first().getSize();
var cfg = {
cls : 'fc-event-hori fc-event-draggable',
html : m.title
- }
+ };
var cg = ctr.createChild(cfg);
cg.on('click', _this.onEventClick, _this, m);
* @param {Roo.bootstrap.DateField} this
* @param {Mixed} date The date value
*/
- select : true
+ select : true,
+ /**
+ * @event beforeselect
+ * Fires when before select a date.
+ * @param {Roo.bootstrap.DateField} this
+ * @param {Mixed} date The date value
+ */
+ beforeselect : true
});
};
tag: 'span',
cls: 'month',
html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++]
- }
+ };
months.createChild(month);
}
setValue: function(v)
{
+ if(this.fireEvent('beforeselect', this, v) !== false){
+ var d = new Date(this.parseDate(v) ).clearTime();
- // v can be a string or a date..
-
-
- var d = new Date(this.parseDate(v) ).clearTime();
-
- if(isNaN(d.getTime())){
- this.date = this.viewDate = '';
- Roo.bootstrap.DateField.superclass.setValue.call(this, '');
- return;
- }
-
- v = this.formatDate(d);
-
- Roo.bootstrap.DateField.superclass.setValue.call(this, v);
-
- this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
-
- this.update();
+ if(isNaN(d.getTime())){
+ this.date = this.viewDate = '';
+ Roo.bootstrap.DateField.superclass.setValue.call(this, '');
+ return;
+ }
- this.fireEvent('select', this, this.date);
-
+ v = this.formatDate(d);
+
+ Roo.bootstrap.DateField.superclass.setValue.call(this, v);
+
+ this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
+
+ this.update();
+
+ this.fireEvent('select', this, this.date);
+ }
},
getValue: function()
tag: 'span',
cls: 'month',
html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
- }
+ };
months.createChild(month);
}
//'for': id, // box label is handled by onclick - so no for...
cls: 'box-label',
html: this.boxLabel
- }
+ };
if(this.tooltip){
boxLabelCfg.tooltip = this.tooltip;
html: this.html || ''
}
]
- }
+ };
if(this.fixed){
cfg.cls += ' alert-messages-fixed';
var cfg = {
tag: 'div',
html : null
- }
+ };
return cfg;
]
}
]
- }
+ };
if(this.icon){
cfg.cn.push({
]
}
]
- }
+ };
}
var cfg = {
cn: []
}
]
- }
+ };
return cfg;
},
var cfg = {
tag: 'div',
cls: 'tab-pane'
- }
+ };
if(this.active){
cfg.cls += ' active';
* Fires when OverlayView Draw
* @param {Roo.bootstrap.LocationPicker} this
*/
- OverlayViewHide : true
+ OverlayViewHide : true,
+ /**
+ * @event loadexception
+ * Fires when load google lib failed.
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ loadexception : true
});
};
initial: function()
{
+ if(typeof(google) == 'undefined' || typeof(google.maps) == 'undefined'){
+ this.fireEvent('loadexception', this);
+ return;
+ }
+
if(!this.mapTypeId){
this.mapTypeId = google.maps.MapTypeId.ROADMAP;
}
getGmapContext: function()
{
- return this.gMapContext
+ return (typeof(this.gMapContext) == 'undefined') ? false : this.gMapContext;
},
GMapContext: function()
this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]);
}
- this.faicon = icon
+ this.faicon = icon;
this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]);
},
* @cfg {String} url action url
* @cfg {String} paramName default 'imageUpload'
* @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
*
* @constructor
* Create a new UploadCropbox
isDocument : false,
method : 'POST',
paramName : 'imageUpload',
+ loadMask : true,
+ loadingText : 'Loading...',
+ maskEl : false,
getAutoCreate : function()
{
}, this);
}
+
+ if(this.loadMask){
+ this.maskEl = this.el;
+ }
},
initEvents : function()
this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
- this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl.hide();
this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
this.canvasLoaded = true;
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
},
setCanvasPosition : function()
process : function(file, crop)
{
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
this.xhr = new XMLHttpRequest();
file.xhr = this.xhr;
xhrOnLoad : function(xhr)
{
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
if (xhr.readyState !== 4) {
this.fireEvent('exception', this, xhr);
return;
xhrOnError : function()
{
+ if(this.loadMask){
+ this.maskEl.unmask();
+ }
+
Roo.log('xhr on error');
var response = Roo.decode(xhr.responseText);
prepare : function(file)
{
+ if(this.loadMask){
+ this.maskEl.mask(this.loadingText);
+ }
+
this.file = false;
this.exif = {};
editable : true,
delegates : [],
+
+ xhr : false,
+
getAutoCreate : function()
{
var managerWidget = {
this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
- this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl.hide();
if(this.multiple){
onUploaderClick : function(e)
{
e.preventDefault();
-
+
if(this.fireEvent('beforeselectfile', this) != false){
this.selectorEl.dom.click();
}
uploadCancel : function()
{
- this.xhr.abort();
+ if (this.xhr) {
+ this.xhr.abort();
+ }
+
this.delegates = [];
bullets : [],
barItems : [],
-
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
cfg = {
- tag : 'ul',
- cls: 'roo-navigation-bar'
- }
+ tag : 'div',
+ cls : 'roo-navigation-bar-group',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-navigation-top-bar'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-navigation-bullets-bar',
+ cn : [
+ {
+ tag : 'ul',
+ cls : 'roo-navigation-bar'
+ }
+ ]
+ },
+
+ {
+ tag : 'div',
+ cls : 'roo-navigation-bottom-bar'
+ }
+ ]
+
+ };
return cfg;
},
+ initEvents: function()
+ {
+
+ },
+
onRender : function(ct, position)
{
Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
}, this);
}
+ this.format();
+
},
addItem : function(cfg)
var item = new Roo.bootstrap.NavProgressItem(cfg);
item.parentId = this.id;
- item.render(this.el, null);
+ item.render(this.el.select('.roo-navigation-bar', true).first(), null);
- this.barItems.push(item);
+ if(cfg.html){
+ var top = new Roo.bootstrap.Element({
+ tag : 'div',
+ cls : 'roo-navigation-bar-text'
+ });
+
+ var bottom = new Roo.bootstrap.Element({
+ tag : 'div',
+ cls : 'roo-navigation-bar-text'
+ });
+
+ top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
+ bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
+
+ var topText = new Roo.bootstrap.Element({
+ tag : 'span',
+ html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
+ });
+
+ var bottomText = new Roo.bootstrap.Element({
+ tag : 'span',
+ html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
+ });
+
+ topText.onRender(top.el, null);
+ bottomText.onRender(bottom.el, null);
+
+ item.topEl = top;
+ item.bottomEl = bottom;
+ }
- this.formatBullets();
+ this.barItems.push(item);
return item;
},
this.setActiveItem(this.barItems[i-1]);
},
- formatBullets : function()
+ format : function()
{
if(!this.barItems.length){
return;
}
-
+
var width = 100 / this.barItems.length;
Roo.each(this.barItems, function(i){
i.el.setStyle('width', width + '%');
+ i.topEl.el.setStyle('width', width + '%');
+ i.bottomEl.el.setStyle('width', width + '%');
}, this);
+
}
});
* @cfg {String} html
* @cfg {String} position (top|bottom) text position default bottom
* @cfg {String} icon show icon instead of number
- * @cfg {Boolean} forceIcon (true|false) true to force show icon..if set to false, Roo.isTouch showing icon, otherwish number
*
* @constructor
* Create a new NavProgressItem
html : '',
position : 'bottom',
icon : false,
- forceIcon : false,
getAutoCreate : function()
{
var iconCls = 'roo-navigation-bar-item-icon';
- if((this.forceIcon && this.icon) || !this.forceIcon && Roo.isTouch){
- iconCls += ' ' + this.icon;
- }
+ iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
var cfg = {
tag: 'li',
{
tag : 'i',
cls : iconCls
- },
- {
- tag : 'span',
- cls : 'roo-navigation-bar-item-text ' + this.position,
- html : this.html
}
]
- }
+ };
if(this.active){
cfg.cls += ' active';
initEvents: function()
{
this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
- this.textEl = this.el.select('.roo-navigation-bar-item-text', true).first();
-
- if(Roo.isTouch){
- this.textEl.setVisibilityMode(Roo.Element.DISPLAY).hide();
- }
this.iconEl.on('click', this.onClick, this);
-
},
onClick : function(e)
projects / roojs1 / blobdiff