Roo.bootstrap.Component = function(config){
Roo.bootstrap.Component.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event childrenrendered
+ * Fires when the children have been rendered..
+ * @param {Roo.bootstrap.Component} this
+ */
+ "childrenrendered" : true
+
+
+
+ });
+
+
};
Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
}
var ret = false;
+ if (!build_from_html) {
+ return false;
+ }
+ // this i think handles overlaying multiple children of the same type
+ // with the sam eelement.. - which might be buggy..
while (true) {
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
// that match this xtype..
// note - when we render we create these as well..
// so we should check to see if body has xtype set.
- if (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
+ if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
var self_cntr_el = Roo.get(this[cntr](false));
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
-
-
+ if (echild) {
+ Roo.log(Roo.XComponent.build_from_html);
+ Roo.log("got echild:");
+ Roo.log(echild);
+ }
// there is a scenario where some of the child elements are flexy:if (and all of the same type)
// and are not displayed -this causes this to use up the wrong element when matching.
// at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
}
cn.items = nitems;
-
+
+ this.fireEvent('childrenrendered', this);
+
return cn;
- }
-
-
+ }
});
/**
* @event click
* When a butotn is pressed
+ * @param {Roo.bootstrap.Button} this
* @param {Roo.EventObject} e
*/
"click" : true,
getAutoCreate : function(){
+
+
var cfg = {
tag: 'h' + (1 *this.level),
- html: this.html || 'fill in html'
+ html: this.html || ''
} ;
return cfg;
/**
* @event click
* The raw click event for the entire grid.
+ * @param {Roo.bootstrap.MenuItem} this
* @param {Roo.EventObject} e
*/
"click" : true
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
+
+
this.bodyEl = this.el.select('.modal-body',true).first();
this.closeEl = this.el.select('.modal-header .close', true).first();
this.footerEl = this.el.select('.modal-footer',true).first();
this.titleEl = this.el.select('.modal-title',true).first();
-
+
this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
this.maskEl.enableDisplayMode("block");
this.maskEl.hide();
* @cfg {Boolean} preventDefault (true | false) default false
* @cfg {String} tabId the tab that this item activates.
* @cfg {String} tagtype (a|span) render as a href or span?
+ * @cfg {Boolean} animateRef (true|false) link to element default false
* @constructor
* Create a new Navbar Item
* @param {boolean} state the new state
*/
- 'changed': true
+ 'changed': true,
+ /**
+ * @event scrollto
+ * Fires when scroll to element
+ * @param {Roo.bootstrap.NavItem} this
+ * @param {Object} options
+ * @param {Roo.EventObject} e
+
+ */
+ 'scrollto': true
});
};
tabId : false,
tagtype : 'a',
disabled : false,
-
+ animateRef : false,
was_active : false,
getAutoCreate : function(){
onClick : function(e)
{
- if(this.preventDefault || this.href == '#'){
+ if(
+ this.preventDefault ||
+ this.href == '#' ||
+ (this.animateRef && this.href.charAt(0) == '#')
+ ){
e.preventDefault();
}
return;
}
+ if(this.animateRef && this.href.charAt(0) == '#'){
+ this.scrollToElement(e);
+ return;
+ }
+
var p = this.parent();
if (['tabs','pills'].indexOf(p.type)!==-1) {
if (typeof(p.setActiveItem) !== 'undefined') {
tooltipEl : function()
{
return this.el.select('' + this.tagtype + '', true).first();
+ },
+
+ scrollToElement : function(e)
+ {
+ var c = document.body;
+
+ var target = Roo.get(c).select('a[name=' + this.href.replace('#', '') +']', true).first();
+
+ if(!target){
+ return;
+ }
+
+ var o = target.calcOffsetsTo(c);
+
+ var options = {
+ target : target,
+ value : o[1]
+ }
+
+ this.fireEvent('scrollto', this, options, e);
+
+ Roo.get(c).scrollTo('top', options.value, true);
+
+ return;
}
});
return cfg;
+ },
+
+ getValue : function()
+ {
+ return this.el.dom.innerHTML;
+ },
+
+ setValue : function(value)
+ {
+ this.el.dom.innerHTML = value;
}
});
c.tooltip = config.tooltip;
}
+ if(typeof(config.colspan) != 'undefined'){
+ c.colspan = config.colspan;
+ }
+
if(typeof(config.hidden) != 'undefined' && config.hidden){
c.style += ' display:none;';
}
td.id = id;
}
+ if(typeof(config.colspan) != 'undefined'){
+ td.colspan = config.colspan;
+ }
+
if(typeof(config.hidden) != 'undefined' && config.hidden){
td.style += ' display:none;';
}
* Fires when the remove value from the combobox array
* @param {Roo.bootstrap.ComboBox} combo This combo box
*/
- 'remove' : true
+ 'remove' : true,
+ /**
+ * @event specialfilter
+ * Fires when specialfilter
+ * @param {Roo.bootstrap.ComboBox} combo This combo box
+ */
+ 'specialfilter' : true
});
* mode = 'remote' or 'text' if mode = 'local')
*/
displayField: undefined,
+
/**
* @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
* mode = 'remote' or 'value' if mode = 'local').
*/
validClass : "has-success",
+ /**
+ * @cfg {Boolean} specialFilter (true|false) special filter default false
+ */
+ specialFilter : false,
+
//private
addicon : false,
editicon: false,
cls : 'form-group roo-combobox-tickable' //input-group
};
-
var buttons = {
tag : 'div',
cls : 'tickable-buttons',
]
};
+ if(this.editable){
+ buttons.cn.unshift({
+ tag: 'input',
+ cls: 'select2-search-field-input'
+ });
+ }
+
var _this = this;
+
Roo.each(buttons.cn, function(c){
if (_this.size) {
c.cls += ' btn-' + _this.size;
this.store.on('load', this.onLoad, this);
this.store.on('loadexception', this.onLoadException, this);
-// this.keyNav = new Roo.KeyNav(this.inputEl(), {
-// "up" : function(e){
-// this.inKeyMode = true;
-// this.selectPrev();
-// },
-//
-// "down" : function(e){
-// if(!this.isExpanded()){
-// this.onTriggerClick();
-// }else{
-// this.inKeyMode = true;
-// this.selectNext();
-// }
-// },
-//
-// "enter" : function(e){
-//// this.onViewClick();
-// //return true;
-// this.collapse();
-//
-// if(this.fireEvent("specialkey", this, e)){
-// this.onViewClick(false);
-// }
-//
-// return true;
-// },
-//
-// "esc" : function(e){
-// this.collapse();
-// },
-//
-// "tab" : function(e){
-// this.collapse();
-//
-// if(this.fireEvent("specialkey", this, e)){
-// this.onViewClick(false);
-// }
-//
-// return true;
-// },
-//
-// scope : this,
-//
-// doRelay : function(foo, bar, hname){
-// if(hname == 'down' || this.scope.isExpanded()){
-// return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
-// }
-// return true;
-// },
-//
-// forceKeyDown: true
-// });
-
+ if(this.editable){
+ this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
+ "up" : function(e){
+ this.inKeyMode = true;
+ this.selectPrev();
+ },
+
+ "down" : function(e){
+ this.inKeyMode = true;
+ this.selectNext();
+ },
+
+ "enter" : function(e){
+ if(this.fireEvent("specialkey", this, e)){
+ this.onViewClick(false);
+ }
+
+ return true;
+ },
+
+ "esc" : function(e){
+ this.onTickableFooterButtonClick(e, false, false);
+ },
+
+ "tab" : function(e){
+ this.fireEvent("specialkey", this, e);
+
+ this.onTickableFooterButtonClick(e, false, false);
+
+ return true;
+ },
+
+ scope : this,
+
+ doRelay : function(e, fn, key){
+ if(this.scope.isExpanded()){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ }
+ return true;
+ },
+
+ forceKeyDown: true
+ });
+ }
this.queryDelay = Math.max(this.queryDelay || 10,
this.mode == 'local' ? 10 : 250);
this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
}
+ if(this.editable !== false){
+ this.tickableInputEl().on("keyup", this.onKeyUp, this);
+ }
+
},
onDestroy : function(){
if(typeof(this.loading) !== 'undefined' && this.loading !== null){
this.loading.hide();
}
-
+
if(this.store.getCount() > 0){
this.expand();
-// this.restrictHeight();
+ this.restrictHeight();
if(this.lastQuery == this.allQuery){
if(this.editable && !this.tickable){
this.inputEl().dom.select();
if(
!this.selectByValue(this.value, true) &&
- this.autoFocus && (typeof(this.store.lastOptions.add) == 'undefined' ||
- this.store.lastOptions.add != true)
+ this.autoFocus &&
+ (
+ !this.store.lastOptions ||
+ typeof(this.store.lastOptions.add) == 'undefined' ||
+ this.store.lastOptions.add != true
+ )
){
this.select(0, true);
}
this.loading.hide();
}
+ if(this.tickable && this.editable){
+ return;
+ }
+
this.collapse();
+
Roo.log(this.store.reader.jsonData);
if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
// fixme
// private
reset : function(){
// overridden so that last data is reset..
+
+ if(this.multiple){
+ this.clearItem();
+ return;
+ }
+
this.setValue(this.originalValue);
this.clearInvalid();
this.lastData = false;
if(this.tickable){
- if(e.getTarget().nodeName.toLowerCase() != 'input'){
+ if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
return;
}
if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
_this.tickItems.splice(k, 1);
+
+ if(typeof(e) == 'undefined' && view == false){
+ Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
+ }
+
rm = true;
return;
}
}
this.tickItems.push(r.data);
+
+ if(typeof(e) == 'undefined' && view == false){
+ Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
+ }
+
return;
}
// private
onEmptyResults : function(){
+
+ if(this.tickable && this.editable){
+ this.restrictHeight();
+ return;
+ }
+
this.collapse();
},
this.view.select(index);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
- if(el && !this.multiple && !this.tickable){
+ /*
+ * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
+ */
+ if(el){
this.list.scrollChildIntoView(el, false);
}
}
// private
initQuery : function(){
- this.doQuery(this.getRawValue());
+
+ var v = this.getRawValue();
+
+ if(this.tickable && this.editable){
+ v = this.tickableInputEl().getValue();
+ }
+
+ this.doQuery(v);
},
// private
if(forceAll){
this.store.clearFilter();
}else{
+
+ if(this.specialFilter){
+ this.fireEvent('specialfilter', this);
+ this.onLoad();
+ return;
+ }
+
this.store.filter(this.displayField, q);
}
this.onLoad();
}else{
+
this.store.baseParams[this.queryParam] = q;
var options = {params : this.getParams(q)};
}
this.store.load(options);
+
/*
* this code will make the page width larger, at the beginning, the list not align correctly,
* we should expand the list on onLoad
this.loadNext = false;
},
-
+
// private
getParams : function(q){
var p = {};
this.okBtn.hide();
this.cancelBtn.hide();
this.trigger.show();
+
+ if(this.editable){
+ this.tickableInputEl().dom.value = '';
+ this.tickableInputEl().blur();
+ }
+
}
Roo.get(document).un('mousedown', this.collapseIf, this);
this.cancelBtn.show();
this.trigger.hide();
+ if(this.editable){
+ this.tickableInputEl().focus();
+ }
+
}
Roo.get(document).on('mousedown', this.collapseIf, this);
this.markInvalid();
return false;
+ },
+
+ tickableInputEl : function()
+ {
+ if(!this.tickable || !this.editable){
+ return this.inputEl();
+ }
+
+ return this.inputEl().select('.select2-search-field-input', true).first();
}
* Bootstrap Column class
* @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
* @cfg {Boolean} carousel true to make the group behave like a carousel
+ * @cfg {Number} bullets show the panel pointer.. default 0
+ * @cfg {Boolena} autoslide (true|false) auto slide .. default false
+ * @cfg {Number} timer auto slide timer .. default 0 millisecond
*
* @constructor
* Create a new TabGroup
carousel : false,
transition : false,
-
+ bullets : 0,
+ timer : 0,
+ autoslide : false,
+ slideFn : false,
+
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
if (this.carousel) {
cfg.cls += ' carousel slide';
+
cfg.cn = [{
cls : 'carousel-inner'
- }]
- }
+ }];
+ if(this.bullets > 0){
+
+ var bullets = {
+ cls : 'carousel-bullets',
+ cn : []
+ };
+
+ for (var i = 0; i < this.bullets; i++){
+ bullets.cn.push({
+ cls : 'bullet bullet-' + i
+ });
+ }
+
+ bullets.cn.push({
+ cls : 'clear'
+ });
+
+ cfg.cn[0].cn = bullets;
+ }
+ }
return cfg;
},
+
+ initEvents: function()
+ {
+ Roo.log('-------- init events on tab group ---------');
+
+ var _this = this;
+
+ if(this.bullets > 0){
+
+ for (var i = 0; i < this.bullets; i++){
+ var bullet = this.el.select('.bullet-' + i, true).first();
+
+ if(!bullet){
+ continue;
+ }
+
+ bullet.on('click', (function(e, el, o, ii, t){
+
+ e.preventDefault();
+
+ _this.showPanel(ii);
+
+ }).createDelegate(this, [i, bullet], true));
+
+ }
+ }
+
+ if(this.autoslide){
+ this.slideFn = window.setInterval(function() {
+ _this.showPanelNext();
+ }, this.timer);
+ }
+ },
+
getChildContainer : function()
{
return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
*/
showPanel : function (pan)
{
+ if(this.transition){
+ Roo.log("waiting for the transitionend");
+ return;
+ }
if (typeof(pan) == 'number') {
pan = this.tabs[pan];
return false;
}
+ if(this.bullets > 0){
+ this.setActiveBullet(this.indexOfPanel(pan));
+ }
+
if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
this.transition = true;
_this.transition = false;
}, this, { single: true } );
+
return true;
}
cur.setActive(false);
pan.setActive(true);
+
return true;
},
showPanelNext : function()
{
var i = this.indexOfPanel(this.getActivePanel());
- if (i > this.tabs.length) {
+
+ if (i >= this.tabs.length - 1 && !this.autoslide) {
return;
}
+
+ if (i >= this.tabs.length - 1 && this.autoslide) {
+ i = -1;
+ }
+
this.showPanel(this.tabs[i+1]);
},
+
showPanelPrev : function()
{
var i = this.indexOfPanel(this.getActivePanel());
- if (i < 1) {
+
+ if (i < 1 && !this.autoslide) {
return;
}
+
+ if (i < 1 && this.autoslide) {
+ i = this.tabs.length;
+ }
+
this.showPanel(this.tabs[i-1]);
+ },
+
+ setActiveBullet : function(i)
+ {
+ Roo.each(this.el.select('.bullet', true).elements, function(el){
+ el.removeClass('selected');
+ });
+
+ var bullet = this.el.select('.bullet-' + i, true).first();
+
+ if(!bullet){
+ return;
+ }
+
+ bullet.addClass('selected');
}
var tg = Roo.bootstrap.TabGroup.get(this.navId);
Roo.log(['register', tg, this]);
tg.register(this);
+
+ var i = tg.tabs.length - 1;
+
+ if(this.active && tg.bullets > 0 && i < tg.bullets){
+ tg.setActiveBullet(i);
+ }
}
+
},
} else if (!this.el.hasClass('active')) {
this.el.addClass('active');
}
+
this.fireEvent('changed', this, state);
}
*/
markValid : function()
{
+ if(this.allowBlank){
+ return;
+ }
+
var _this = this;
this.fireEvent('valid', this);
*/
markInvalid : function(msg)
{
+ if(this.allowBlank){
+ return;
+ }
+
var _this = this;
this.fireEvent('invalid', this, msg);
enter : function(ev)
{
var dom = ev.getTarget();
+
//Roo.log(['enter',dom]);
var el = Roo.fly(dom);
if (this.currentEl) {
if (this.currentTip.el) {
this.currentTip.el.hide(); // force hiding...
}
- //Roo.log(el);
- if (!el.attr('tooltip')) { // parents who have tip?
- return;
+ //Roo.log(ev);
+ var bindEl = el;
+
+ // you can not look for children, as if el is the body.. then everythign is the child..
+ if (!el.attr('tooltip')) { //
+ if (!el.select("[tooltip]").elements.length) {
+ return;
+ }
+ // is the mouse over this child...?
+ bindEl = el.select("[tooltip]").first();
+ var xy = ev.getXY();
+ if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
+ //Roo.log("not in region.");
+ return;
+ }
+ //Roo.log("child element over..");
+
}
- this.currentEl = el;
- this.currentTip.bind(el);
+ this.currentEl = bindEl;
+ this.currentTip.bind(bindEl);
this.currentRegion = Roo.lib.Region.getRegion(dom);
this.currentTip.enter();
this.hoverState = 'out';
if (!this.delay || !this.delay.hide) {
this.hide();
- return
+ return;
}
var _t = this;
_t.hide();
Roo.bootstrap.Tooltip.currentEl = false;
}
- }, delay)
+ }, delay);
},
show : function ()
}
// set content.
//Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
- this.el.select('.tooltip-inner',true).first().dom.innerHTML = this.bindEl.attr('tooltip');
+
+ var tip = this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
+
+ this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
projects / roojs1 / blobdiff