* @class Roo.bootstrap.Column
* @extends Roo.bootstrap.Component
* Bootstrap Column class
- * @cfg {Number} xs colspan out of 12 for mobile-sized screens
- * @cfg {Number} sm colspan out of 12 for tablet-sized screens
- * @cfg {Number} md colspan out of 12 for computer-sized screens
- * @cfg {Number} lg colspan out of 12 for large computer-sized screens
+ * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
+ * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
+ * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
+ * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
* @cfg {String} html content of column.
*
* @constructor
Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component, {
- xs: null,
- sm: null,
- md: null,
- lg: null,
+ xs: false,
+ sm: false,
+ md: false,
+ lg: false,
html: '',
offset: 0,
var settings=this;
['xs','sm','md','lg'].map(function(size){
- if (settings[size]) {
+ if (settings[size] !== false) {
+ if (!settings[size]) { // 0 = hidden
+ cfg.cls += ' hidden-' + size;
+ return;
+ }
cfg.cls += ' col-' + size + '-' + settings[size];
}
});
* @cfg {String} position (fixed-top|fixed-bottom|static-top) position
* @cfg {String} brand_href href of the brand
* @cfg {Boolean} srButton generate the sr-only button (true | false) default true
+ * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
*
* @constructor
* Create a new Sidebar
brand: '',
brand_href: false,
srButton : true,
-
+ autohide : false,
getAutoCreate : function(){
return cfg;
- }
-
+ },
+ initEvents : function()
+ {
+ Roo.bootstrap.NavHeaderbar.superclass.initEvents.call(this);
+
+ if (this.autohide) {
+
+ var prevScroll = 0;
+ var ft = this.el;
+
+ Roo.get(document).on('scroll',function(e) {
+ var ns = Roo.get(document).getScroll().top;
+ var os = prevScroll;
+ prevScroll = ns;
+
+ if(ns > os){
+ ft.removeClass('slideDown');
+ ft.addClass('slideUp');
+ return;
+ }
+ ft.removeClass('slideUp');
+ ft.addClass('slideDown');
+
+
+ },this);
+ }
+ }
+
+
});
if (this.disabled) {
return;
}
+
+ var tg = Roo.bootstrap.TabGroup.get(this.navId);
+ if (tg && tg.transition) {
+ Roo.log("waiting for the transitionend");
+ return;
+ }
+
Roo.log("fire event clicked");
if(this.fireEvent('click', this, e) === false){
return;
});
var tbody = this.mainBody;
-
- var renders = [];
-
+
if(ds.getCount() > 0){
ds.data.each(function(d,rowIndex){
var row = this.renderRow(cm, ds, rowIndex);
var row = this.renderRow(this.cm, this.store, rowIndex);
// insert before rowIndex..
var e = this.mainBody.createChild(row,this.getRowDom(rowIndex));
- Roo.log(e);
var _this = this;
getAutoCreate : function(){
- var parent = this.parent();
-
var align = this.labelAlign || this.parentLabelAlign();
var id = Roo.id();
var combobox = {
cls: 'select2-container input-group',
cn: [
- box,
- {
- tag: 'ul',
- cls: 'typeahead typeahead-long dropdown-menu',
- style: 'display:none'
- }
+ box
+// {
+// tag: 'ul',
+// cls: 'typeahead typeahead-long dropdown-menu',
+// style: 'display:none'
+// }
]
};
- if(!this.multiple){
+ if(!this.multiple && this.showToggleBtn){
combobox.cn.push({
tag :'span',
cls : 'input-group-addon btn dropdown-toggle',
// private
initEvents : function(){
+ this.createList();
+
Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
//this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
- if(!this.multiple){
+ if(!this.multiple && this.showToggleBtn){
this.trigger = this.el.select('span.dropdown-toggle',true).first();
if(this.hideTrigger){
this.trigger.setDisplayed(false);
// this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
//}
},
+
+ createList : function()
+ {
+ this.list = Roo.get(document.body).createChild({
+ tag: 'ul',
+ cls: 'typeahead typeahead-long dropdown-menu',
+ style: 'display:none'
+ });
+
+ this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
+
+ },
// private
initTrigger : function(){
* @cfg {Boolean} append (true|false) default false
* @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
* @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
- * @cfg {Boolean} editNotList allow text type,but not show pull down, default false
+ * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true
+ * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true
* @cfg {String} btnPosition set the position of the trigger button (left | right) default right
* @constructor
* Create a new ComboBox.
autoFocus : true,
tickable : false,
btnPosition : 'right',
- editNotList : false,
+ triggerList : true,
+ showToggleBtn : true,
// element that contains real text value.. (when hidden is used..)
getAutoCreate : function()
var combobox = {
cls: 'select2-container input-group select2-container-multi',
cn: [
- box,
- {
- tag: 'ul',
- cls: 'typeahead typeahead-long dropdown-menu',
- style: 'display:none; max-height:' + this.maxHeight + 'px;'
- }
+ box
+// {
+// tag: 'ul',
+// cls: 'typeahead typeahead-long dropdown-menu',
+// style: 'display:none; max-height:' + this.maxHeight + 'px;'
+// }
]
};
this.store = Roo.factory(this.store, Roo.data);
if(this.tickable){
- this.initTickableEvnets();
+ this.initTickableEvents();
return;
}
Roo.bootstrap.ComboBox.superclass.initEvents.call(this);
-
if(this.hiddenName){
this.hiddenField = this.el.select('input.form-hidden-field',true).first();
//if(Roo.isGecko){
// this.el.dom.setAttribute('autocomplete', 'off');
//}
-
+
var cls = 'x-combo-list';
- this.list = this.el.select('ul.dropdown-menu',true).first();
-
+
//this.list = new Roo.Layer({
// shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
//});
this.tpl = '<li><a href="#">{' + this.displayField + '}</a></li>';
}
- this.view = new Roo.View(this.el.select('ul.dropdown-menu',true).first(), this.tpl, {
+ this.view = new Roo.View(this.list, this.tpl, {
singleSelect:true, store: this.store, selectedClass: this.selectedClass
});
//this.view.wrapEl.setDisplayed(false);
}
},
- initTickableEvnets: function()
+ initTickableEvents: function()
{
+ this.createList();
+
if(this.hiddenName){
this.hiddenField = this.el.select('input.form-hidden-field',true).first();
}
- this.list = this.el.select('ul.dropdown-menu',true).first();
+// this.list = this.el.select('ul.dropdown-menu',true).first();
this.choices = this.el.select('ul.select2-choices', true).first();
this.searchField = this.el.select('ul li.select2-search-field', true).first();
- if(this.editNotList){
+ if(this.triggerList){
this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
}
this.tpl = '<li class="select2-result"><div class="checkbox"><input id="{roo-id}" type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></li>';
}
- this.view = new Roo.View(this.el.select('ul.dropdown-menu',true).first(), this.tpl, {
+ this.view = new Roo.View(this.list, this.tpl, {
singleSelect:true, tickable:true, parent:this, store: this.store, selectedClass: this.selectedClass
});
if (!opts.add) {
this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
}
- this.restrictHeight();
+// this.restrictHeight();
this.selectedIndex = -1;
},
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();
setFromData : function(o){
if(this.multiple){
+ if(typeof o.display_name !== 'string'){
+ for(var i=0;i<o.display_name.length;i++){
+ this.addItem({'id':o.id[i],'display_name':o.display_name[i]});
+ }
+ return;
+ }
this.addItem(o);
return;
}
//this.list.beginUpdate();
//this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
this.list.alignTo(this.inputEl(), this.listAlign);
+ this.list.alignTo(this.inputEl(), this.listAlign);
//this.list.endUpdate();
},
this.view.select(index);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
- if(el){
- //this.innerList.scrollChildIntoView(el, false);
-
+ if(el && !this.multiple && !this.tickable){
+ this.list.scrollChildIntoView(el, false);
}
}
},
collapseIf : function(e){
var in_combo = e.within(this.el);
var in_list = e.within(this.list);
+ var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
- if (in_combo || in_list) {
+ if (in_combo || in_list || is_list) {
//e.stopPropagation();
return;
}
return;
}
Roo.log('expand');
- this.list.alignTo(this.inputEl(), this.listAlign);
+
this.list.show();
+ this.restrictHeight();
+
if(this.tickable){
this.tickItems = Roo.apply([], this.item);
{
Roo.log('trigger click');
- if(this.disabled){
+ if(this.disabled || !this.triggerList){
return;
}
Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, {
carousel : false,
+ transition : false,
getAutoCreate : function()
{
showPanel : function (pan)
{
-
-
if (typeof(pan) == 'number') {
pan = this.tabs[pan];
}
return false;
}
-
-
if (this.carousel) {
+ this.transition = true;
var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
var lr = dir == 'next' ? 'left' : 'right';
pan.el.addClass(dir); // or prev
pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
cur.el.addClass(lr); // or right
pan.el.addClass(lr);
+
+ var _this = this;
cur.el.on('transitionend', function() {
Roo.log("trans end?");
cur.el.removeClass([lr]);
cur.setActive(false);
+ _this.transition = false;
}, this, { single: true } );
return true;
this.doc = iframe.contentWindow.document;
this.win = iframe.contentWindow;
} else {
- if (!Roo.get(this.frameId)) {
+// if (!Roo.get(this.frameId)) {
+// return;
+// }
+// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+// this.win = Roo.get(this.frameId).dom.contentWindow;
+
+ if (!Roo.get(this.frameId) && !iframe.contentDocument) {
return;
}
+
this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
- this.win = Roo.get(this.frameId).dom.contentWindow;
+ this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
}
},
* Bootstrap TabBox class
* @cfg {String} title Title of the TabBox
* @cfg {String} icon Icon of the TabBox
+ * @cfg {Boolean} showtabs (true|false) show the tabs default true
*
* @constructor
* Create a new TabBox
title : '',
icon : false,
+ showtabs : true,
getChildContainer : function()
{
//Roo.log('addpane');
//Roo.log(pane);
// tabs are rendere left to right..
+ if(!this.showtabs){
+ return;
+ }
+
var ctr = this.el.select('.nav-tabs', true).first();
return;
}
this.title = str;
- this.tab.select('a'.true).first().dom.innerHTML = str;
+ this.tab.select('a', true).first().dom.innerHTML = str;
}
projects / roojs1 / blobdiff