}
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.
/**
* @event click
* When a butotn is pressed
+ * @param {Roo.bootstrap.Button} this
* @param {Roo.EventObject} e
*/
"click" : true,
}
if(_e !== false){
this.fireEvent("beforeshow", this);
-
//xy = this.el.adjustForConstraints(xy);
}
- //this.el.setXY(xy);
+
//this.el.show();
this.hideMenuItems();
this.hidden = false;
this.triggerEl.addClass('open');
+
+ if(this.el.getWidth() + xy[0] > Roo.lib.Dom.getViewWidth()){
+ xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
+ }
+
+ this.el.setXY(xy);
this.focus();
this.fireEvent("show", this);
},
/**
* @event click
* The raw click event for the entire grid.
+ * @param {Roo.bootstrap.MenuItem} this
* @param {Roo.EventObject} e
*/
"click" : true
* @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 == '#'
+ ){
+
e.preventDefault();
}
return;
}
- Roo.log("fire event clicked");
+
+
+ //Roo.log("fire event clicked");
if(this.fireEvent('click', this, e) === false){
return;
};
return;
}
- var p = this.parent();
+ //Roo.log(this.href);
+ var ael = this.el.select('a',true).first();
+ //Roo.log(ael);
+
+ if(ael && this.animateRef && this.href.indexOf('#') > -1){
+ //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
+ if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
+ return; // ignore... - it's a 'hash' to another page.
+ }
+
+ e.preventDefault();
+ this.scrollToElement(e);
+ }
+
+
+ var p = this.parent();
+
if (['tabs','pills'].indexOf(p.type)!==-1) {
if (typeof(p.setActiveItem) !== 'undefined') {
p.setActiveItem(this);
}
}
- // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
- if (p.parentType == 'NavHeaderbar' && !this.menu) {
- // remove the collapsed menu expand...
- p.parent().el.select('.navbar-collapse',true).removeClass('in');
- }
-
},
isActive: function () {
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.split('#')[1] +']', 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;
}
});
* @cfg {String} html contents of the element
* @cfg {String} tag tag of the element
* @cfg {String} cls class of the element
+ * @cfg {Boolean} preventDefault (true|false) default false
+ * @cfg {Boolean} clickable (true|false) default false
*
* @constructor
* Create a new Element
Roo.bootstrap.Element = function(config){
Roo.bootstrap.Element.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * When a element is chick
+ * @param {Roo.bootstrap.Element} this
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
};
Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
tag: 'div',
cls: '',
html: '',
-
+ preventDefault: false,
+ clickable: false,
getAutoCreate : function(){
html: this.html
}
-
-
return cfg;
+ },
+
+ initEvents: function()
+ {
+ Roo.bootstrap.Element.superclass.initEvents.call(this);
+
+ if(this.clickable){
+ this.el.on('click', this.onClick, this);
+ }
+
+ },
+
+ onClick : function(e)
+ {
+ if(this.preventDefault){
+ e.preventDefault();
+ }
+
+ this.fireEvent('click', this, e);
+ },
+
+ getValue : function()
+ {
+ return this.el.dom.innerHTML;
+ },
+
+ setValue : function(value)
+ {
+ this.el.dom.innerHTML = value;
}
});
c.style += ' width:' + config.width + 'px;';
}
+ if(typeof(config.cls) != 'undefined'){
+ c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
+ }
+
header.cn.push(c)
}
if(typeof(config.cursor) != 'undefined'){
td.style += ' cursor:' + config.cursor + ';';
}
+
+ if(typeof(config.cls) != 'undefined'){
+ td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
+ }
row.cn.push(td);
var inputblock = input;
+ var feedback = {
+ tag: 'span',
+ cls: 'glyphicon form-control-feedback'
+ };
+
if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
- var feedback = {
- tag: 'span',
- cls: 'glyphicon form-control-feedback'
- };
-
inputblock = {
cls : 'has-feedback',
cn : [
]
};
}
-
-// var inputblock = input;
if (this.before || this.after) {
inputblock.cn.push(input);
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
- inputblock.cls += ' has-feedback';
- inputblock.cn.push(feedback);
- }
-
if (this.after && typeof(this.after) == 'string') {
inputblock.cn.push({
tag :'span',
(this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
});
}
+
+ if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ inputblock.cls += ' has-feedback';
+ inputblock.cn.push(feedback);
+ }
};
if (align ==='left' && this.fieldLabel.length) {
* 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,
if(this.editable){
buttons.cn.unshift({
tag: 'input',
- cls: 'select2-search-field-input',
- style: 'width:50%'
+ cls: 'select2-search-field-input'
});
}
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.onTickableFooterButtonClick(false, false, false);
+ if(this.tickable && this.editable){
+ return;
}
this.collapse();
// 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;
// private
onEmptyResults : function(){
- if(this.tickable){
- this.onTickableFooterButtonClick(false, false, false);
+ if(this.tickable && this.editable){
+ this.restrictHeight();
+ return;
}
this.collapse();
if(forceAll){
this.store.clearFilter();
}else{
+
+ if(this.specialFilter){
+ this.fireEvent('specialfilter', this);
+ this.onLoad();
+ return;
+ }
+
this.store.filter(this.displayField, q);
}
+
+ this.store.fireEvent("datachanged", this.store);
+
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 = {};
if(this.hiddenField){
this.hiddenField.dom.value = this.value;
}
+
+ this.store.fireEvent("datachanged", this.store);
},
clearItem : function()
onTickableFooterButtonClick : function(e, btn, el)
{
- if(e != false){
- e.preventDefault();
- }
+ e.preventDefault();
this.lastItem = Roo.apply([], this.item);
* 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));
cfg.cls += ' tab-content';
+ Roo.log('get auto create...............');
+
if (this.carousel) {
cfg.cls += ' carousel slide';
+
cfg.cn = [{
cls : 'carousel-inner'
- }]
- }
+ }];
+ if(this.bullets > 0){
+
+ var bullets = {
+ cls : 'carousel-bullets hidden-xs',
+ cn : []
+ };
+
+ if(this.bullets_cls){
+ bullets.cls = bullets.cls + ' ' + this.bullets_cls;
+ }
+
+ 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);
+
+ if(_this.autoslide && _this.slideFn){
+ clearInterval(_this.slideFn);
+ _this.slideFn = window.setInterval(function() {
+ _this.showPanelNext();
+ }, _this.timer);
+ }
+
+ }).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);
}
projects / roojs1 / blobdiff