* @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];
}
});
initEvents: function() {
- if(!this.href){
+ if(!this.href || this.preventDefault){
this.el.on('click', this.onClick, this);
}
},
* @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);
+ }
+ }
+
+
});
Roo.bootstrap.NavGroup = function(config){
Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
this.navItems = [];
+
Roo.bootstrap.NavGroup.register(this);
this.addEvents({
/**
navId : '',
// private
- navItems : false,
+ navItems : false,
getAutoCreate : function()
{
return cfg;
},
-
+ /**
+ * sets the active Navigation item
+ * @param {Roo.bootstrap.NavItem} the new current navitem
+ */
setActiveItem : function(item)
{
var prev = false;
},
+ /**
+ * gets the active Navigation item
+ * @return {Roo.bootstrap.NavItem} the current navitem
+ */
+ getActive : function()
+ {
+
+ var prev = false;
+ Roo.each(this.navItems, function(v){
+
+ if (v.isActive()) {
+ prev = v;
+
+ }
+
+ });
+ return prev;
+ },
+ indexOfNav : function()
+ {
+
+ var prev = false;
+ Roo.each(this.navItems, function(v,i){
+
+ if (v.isActive()) {
+ prev = i;
+
+ }
+
+ });
+ return prev;
+ },
+ /**
+ * adds a Navigation item
+ * @param {Roo.bootstrap.NavItem} the navitem to add
+ */
addItem : function(cfg)
{
var cn = new Roo.bootstrap.NavItem(cfg);
cn.onRender(this.el, null);
return cn;
},
-
+ /**
+ * register a Navigation item
+ * @param {Roo.bootstrap.NavItem} the navitem to add
+ */
register : function(item)
{
this.navItems.push( item);
item.navId = this.navId;
},
+
+
getNavItem: function(tabId)
{
var ret = false;
});
return ret;
- }
-
+ },
+ setActiveNext : function()
+ {
+ var i = this.indexOfNav(this.getActive());
+ if (i > this.navItems.length) {
+ return;
+ }
+ this.setActiveItem(this.navItems[i+1]);
+ },
+ setActivePrev : function()
+ {
+ var i = this.indexOfNav(this.getActive());
+ if (i < 1) {
+ return;
+ }
+ this.setActiveItem(this.navItems[i-1]);
+ },
+ clearWasActive : function(except) {
+ Roo.each(this.navItems, function(e) {
+ if (e.tabId != except.tabId && e.was_active) {
+ e.was_active = false;
+ return false;
+ }
+ return true;
+
+ });
+ },
+ getWasActive : function ()
+ {
+ var r = false;
+ Roo.each(this.navItems, function(e) {
+ if (e.was_active) {
+ r = e;
+ return false;
+ }
+ return true;
+
+ });
+ return r;
+ }
});
Roo.apply(Roo.bootstrap.NavGroup, {
groups: {},
-
+ /**
+ * register a Navigation Group
+ * @param {Roo.bootstrap.NavGroup} the navgroup to add
+ */
register : function(navgrp)
{
- this.groups[navgrp.navId] = navgrp;
+ this.groups[navgrp.navId] = navgrp;
},
+ /**
+ * fetch a Navigation Group based on the navigation ID
+ * @param {string} the navgroup to add
+ * @returns {Roo.bootstrap.NavGroup} the navgroup
+ */
get: function(navId) {
- return this.groups[navId];
+ if (typeof(this.groups[navId]) == 'undefined') {
+ return false;
+ //this.register(new Roo.bootstrap.NavGroup({ navId : navId }));
+ }
+ return this.groups[navId] ;
}
tagtype : 'a',
disabled : false,
+ was_active : false,
+
getAutoCreate : function(){
var cfg = {
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;
if (typeof(this.parent().setActiveItem) !== 'undefined') {
this.parent().setActiveItem(this);
}
-
-
-
}
},
isActive: function () {
return this.active
},
- setActive : function(state, fire)
+ setActive : function(state, fire, is_was_active)
{
+ if (this.active && !state & this.navId) {
+ this.was_active = true;
+ var nv = Roo.bootstrap.NavGroup.get(this.navId);
+ if (nv) {
+ nv.clearWasActive(this);
+ }
+
+ }
this.active = state;
+
if (!state ) {
this.el.removeClass('active');
} else if (!this.el.hasClass('active')) {
if (fire) {
this.fireEvent('changed', this, state);
}
-
+
+ // show a panel if it's registered and related..
+
+ if (!this.navId || !this.tabId || !state || is_was_active) {
+ return;
+ }
+
+ var tg = Roo.bootstrap.TabGroup.get(this.navId);
+ if (!tg) {
+ return;
+ }
+ var pan = tg.getPanelByName(this.tabId);
+ if (!pan) {
+ return;
+ }
+ // if we can not flip to new panel - go back to old nav highlight..
+ if (false == tg.showPanel(pan)) {
+ var nv = Roo.bootstrap.NavGroup.get(this.navId);
+ if (nv) {
+ var onav = nv.getWasActive();
+ if (onav) {
+ onav.setActive(true, false, true);
+ }
+ }
+
+ }
+
+
},
// this should not be here...
/**
* @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
* given the cell's data value. See {@link #setRenderer}. If not specified, the
- * default renderer uses the raw data value.
+ * default renderer uses the raw data value. If an object is returned (bootstrap only)
+ * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
*/
/**
* @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor
CellSelection : false,
layout : false,
+ // Roo.Element - the tbody
+ mainBody: false,
getAutoCreate : function(){
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
return;
}
- Roo.log('initEvents with ds!!!!');
+ //Roo.log('initEvents with ds!!!!');
+
+ this.mainBody = this.el.select('tbody', true).first();
+
var _this = this;
this.store.on('load', this.onLoad, this);
this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('update', this.onUpdate, this);
},
{
var cell = Roo.get(el);
+ if(!cell){
+ return;
+ }
+
if(e.getTarget().nodeName.toLowerCase() != 'td'){
cell = cell.findParent('td', false, true);
}
{
var cell = Roo.get(el);
+ if(!cell){
+ return;
+ }
+
if(e.getTarget().nodeName.toLowerCase() != 'td'){
cell = cell.findParent('td', false, true);
}
{
var cell = Roo.get(el);
+ if(!cell || (!this.CellSelection && !this.RowSelection)){
+ return;
+ }
+
+
if(e.getTarget().nodeName.toLowerCase() != 'td'){
cell = cell.findParent('td', false, true);
}
{
var cell = Roo.get(el);
+ if(!cell || (!this.CellSelection && !this.RowSelection)){
+ return;
+ }
+
if(e.getTarget().nodeName.toLowerCase() != 'td'){
cell = cell.findParent('td', false, true);
}
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
var config = cm.config[i];
-
- if(typeof(config.hidden) != 'undefined' && config.hidden){
- continue;
- }
var c = {
tag: 'th',
html: cm.getColumnHeader(i)
};
+ if(typeof(config.hidden) != 'undefined' && config.hidden){
+ c.style += ' display:none;';
+ }
+
if(typeof(config.dataIndex) != 'undefined'){
c.sort = config.dataIndex;
}
c.cls = 'sortable';
}
-// if(typeof(config.align) != 'undefined' && config.align.length){
-// c.style += ' text-align:' + config.align + ';';
-// }
+ if(typeof(config.align) != 'undefined' && config.align.length){
+ c.style += ' text-align:' + config.align + ';';
+ }
if(typeof(config.width) != 'undefined'){
c.style += ' width:' + config.width + 'px;';
return footer;
},
+
+
onLoad : function()
{
Roo.log('ds onload');
var _this = this;
var cm = this.cm;
+ var ds = this.store;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
e.removeClass(['glyphicon', 'glyphicon-arrow-up', 'glyphicon-arrow-down']);
}
});
- var tbody = this.el.select('tbody', true).first();
-
- var renders = [];
-
- if(this.store.getCount() > 0){
- this.store.data.each(function(d,rowIndex){
- var row = {
- tag : 'tr',
- cn : []
- };
-
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var config = cm.config[i];
-
- if(typeof(config.hidden) != 'undefined' && config.hidden){
- continue;
- }
-
- var renderer = cm.getRenderer(i);
- var value = '';
- var id = Roo.id();
-
- if(typeof(renderer) !== 'undefined'){
- value = renderer(d.data[cm.getDataIndex(i)], false, d);
- }
-
- if(typeof(value) === 'object'){
- renders.push({
- container : id,
- cfg : value
- })
- }
-
- var rowcfg = {
- record: d,
- rowIndex : rowIndex,
- colIndex : i,
- rowClass : ''
- }
-
- _this.fireEvent('rowclass', this, rowcfg);
-
- var td = {
- tag: 'td',
- id: id,
- cls : rowcfg.rowClass,
- style: '',
- html: (typeof(value) === 'object') ? '' : value
- };
-
- if(typeof(config.align) != 'undefined' && config.align.length){
- td.style += ' text-align:' + config.align + ';';
- }
-
- if(typeof(config.width) != 'undefined'){
- td.style += ' width:' + config.width + 'px;';
- }
-
-
- row.cn.push(td);
-
- }
+ var tbody = this.mainBody;
+
+ if(ds.getCount() > 0){
+ ds.data.each(function(d,rowIndex){
+ var row = this.renderRow(cm, ds, rowIndex);
tbody.createChild(row);
- });
- }
-
-
- if(renders.length){
- var _this = this;
- Roo.each(renders, function(r){
- _this.renderColumn(r);
- })
+ var _this = this;
+
+ if(row.cellObjects.length){
+ Roo.each(row.cellObjects, function(r){
+ _this.renderCellObject(r);
+ })
+ }
+
+ }, this);
}
Roo.each(this.el.select('tbody td', true).elements, function(e){
//}
},
- onBeforeLoad : function()
+
+ onUpdate : function(ds,record)
{
- //Roo.log('ds onBeforeLoad');
-
- //this.clear();
+ this.refreshRow(record);
+ },
+ onRemove : function(ds, record, index, isUpdate){
+ if(isUpdate !== true){
+ this.fireEvent("beforerowremoved", this, index, record);
+ }
+ var bt = this.mainBody.dom;
+ if(bt.rows[index]){
+ bt.removeChild(bt.rows[index]);
+ }
- //if(this.loadMask){
- // this.maskEl.show();
- //}
+ if(isUpdate !== true){
+ //this.stripeRows(index);
+ //this.syncRowHeights(index, index);
+ //this.layout();
+ this.fireEvent("rowremoved", this, index, record);
+ }
},
- clear : function()
- {
- this.el.select('tbody', true).first().dom.innerHTML = '';
- },
- getSelectionModel : function(){
- if(!this.selModel){
- this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
+ refreshRow : function(record){
+ var ds = this.store, index;
+ if(typeof record == 'number'){
+ index = record;
+ record = ds.getAt(index);
+ }else{
+ index = ds.indexOf(record);
}
- return this.selModel;
+ this.insertRow(ds, index, true);
+ this.onRemove(ds, record, index+1, true);
+ //this.syncRowHeights(index, index);
+ //this.layout();
+ this.fireEvent("rowupdated", this, index, record);
},
- renderColumn : function(r)
- {
- var _this = this;
+ insertRow : function(dm, rowIndex, isUpdate){
- var t = r.cfg.render(r.container);
+ if(!isUpdate){
+ this.fireEvent("beforerowsinserted", this, rowIndex);
+ }
+ //var s = this.getScrollState();
+ var row = this.renderRow(this.cm, this.store, rowIndex);
+ // insert before rowIndex..
+ var e = this.mainBody.createChild(row,this.getRowDom(rowIndex));
- if(r.cfg.cn){
- Roo.each(r.cfg.cn, function(c){
- var child = {
- container: t.getChildContainer(),
- cfg: c
- }
- _this.renderColumn(child);
+ var _this = this;
+
+ if(row.cellObjects.length){
+ Roo.each(row.cellObjects, function(r){
+ _this.renderCellObject(r);
})
}
- }
-
-});
-
-
+
+ if(!isUpdate){
+ this.fireEvent("rowsinserted", this, rowIndex);
+ //this.syncRowHeights(firstRow, lastRow);
+ //this.stripeRows(firstRow);
+ //this.layout();
+ }
+
+ },
+
+
+ getRowDom : function(rowIndex)
+ {
+ // not sure if I need to check this.. but let's do it anyway..
+ return (this.mainBody.dom.rows && (rowIndex-1) < this.mainBody.dom.rows.length ) ?
+ this.mainBody.dom.rows[rowIndex] : false
+ },
+ // returns the object tree for a tr..
+
+
+ renderRow : function(cm, ds, rowIndex) {
+
+ var d = ds.getAt(rowIndex);
+
+ var row = {
+ tag : 'tr',
+ cn : []
+ };
+
+ var cellObjects = [];
+
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var config = cm.config[i];
+
+ var renderer = cm.getRenderer(i);
+ var value = '';
+ var id = false;
+
+ if(typeof(renderer) !== 'undefined'){
+ value = renderer(d.data[cm.getDataIndex(i)], false, d);
+ }
+ // if object are returned, then they are expected to be Roo.bootstrap.Component instances
+ // and are rendered into the cells after the row is rendered - using the id for the element.
+
+ if(typeof(value) === 'object'){
+ id = Roo.id();
+ cellObjects.push({
+ container : id,
+ cfg : value
+ })
+ }
+
+ var rowcfg = {
+ record: d,
+ rowIndex : rowIndex,
+ colIndex : i,
+ rowClass : ''
+ }
- /*
- * - LGPL
- *
- * table cell
+ this.fireEvent('rowclass', this, rowcfg);
+
+ var td = {
+ tag: 'td',
+ cls : rowcfg.rowClass,
+ style: '',
+ html: (typeof(value) === 'object') ? '' : value
+ };
+
+ if (id) {
+ td.id = id;
+ }
+
+ if(typeof(config.hidden) != 'undefined' && config.hidden){
+ td.style += ' display:none;';
+ }
+
+ if(typeof(config.align) != 'undefined' && config.align.length){
+ td.style += ' text-align:' + config.align + ';';
+ }
+
+ if(typeof(config.width) != 'undefined'){
+ td.style += ' width:' + config.width + 'px;';
+ }
+
+ row.cn.push(td);
+
+ }
+
+ row.cellObjects = cellObjects;
+
+ return row;
+
+ },
+
+
+
+ onBeforeLoad : function()
+ {
+ //Roo.log('ds onBeforeLoad');
+
+ //this.clear();
+
+ //if(this.loadMask){
+ // this.maskEl.show();
+ //}
+ },
+
+ clear : function()
+ {
+ this.el.select('tbody', true).first().dom.innerHTML = '';
+ },
+
+ getSelectionModel : function(){
+ if(!this.selModel){
+ this.selModel = new Roo.bootstrap.Table.RowSelectionModel();
+ }
+ return this.selModel;
+ },
+ /*
+ * Render the Roo.bootstrap object from renderder
+ */
+ renderCellObject : function(r)
+ {
+ var _this = this;
+
+ var t = r.cfg.render(r.container);
+
+ if(r.cfg.cn){
+ Roo.each(r.cfg.cn, function(c){
+ var child = {
+ container: t.getChildContainer(),
+ cfg: c
+ }
+ _this.renderCellObject(child);
+ })
+ }
+ }
+
+});
+
+
+
+ /*
+ * - LGPL
+ *
+ * table cell
*
*/
initEvents : function()
{
this.el.on('submit', this.onSubmit, this);
+ // this was added as random key presses on the form where triggering form submit.
this.el.on('keypress', function(e) {
if (e.getCharCode() != 13) {
return true;
}
+ // we might need to allow it for textareas.. and some other items.
+ // check e.getTarget().
+
+ if(e.getTarget().nodeName.toLowerCase() === 'textarea'){
+ return true;
+ }
+
+ Roo.log("keypress blocked");
+
e.preventDefault();
return false;
});
labelAlign : false,
readOnly : false,
align : false,
+ formatedValue : false,
parentLabelAlign : function()
{
* @return {Mixed} value The field value
*/
getValue : function(){
- return this.inputEl().getValue();
+
+ var v = this.inputEl().getValue();
+
+ return v;
},
/**
* Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}.
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(){
* A combobox control with support for autocomplete, remote-loading, paging and many other features.
* @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} 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.
* @param {Object} config Configuration options
});
this.item = [];
+ this.tickItems = [];
this.selectedIndex = -1;
if(this.mode == 'local'){
append: false,
loadNext: false,
autoFocus : true,
-
+ tickable : false,
+ btnPosition : 'right',
+ triggerList : true,
+ showToggleBtn : true,
// element that contains real text value.. (when hidden is used..)
-
+
+ getAutoCreate : function()
+ {
+ var cfg = false;
+
+ /*
+ * Normal ComboBox
+ */
+ if(!this.tickable){
+ cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this);
+ return cfg;
+ }
+
+ /*
+ * ComboBox with tickable selections
+ */
+
+ var align = this.labelAlign || this.parentLabelAlign();
+
+ cfg = {
+ cls : 'form-group roo-combobox-tickable' //input-group
+ };
+
+
+ var buttons = {
+ tag : 'div',
+ cls : 'tickable-buttons',
+ cn : [
+ {
+ tag : 'button',
+ type : 'button',
+ cls : 'btn btn-link btn-edit pull-' + this.btnPosition,
+ html : 'Edit'
+ },
+ {
+ tag : 'button',
+ type : 'button',
+ name : 'ok',
+ cls : 'btn btn-link btn-ok pull-' + this.btnPosition,
+ html : 'Done'
+ },
+ {
+ tag : 'button',
+ type : 'button',
+ name : 'cancel',
+ cls : 'btn btn-link btn-cancel pull-' + this.btnPosition,
+ html : 'Cancel'
+ }
+ ]
+ };
+
+ var _this = this;
+ Roo.each(buttons.cn, function(c){
+ if (_this.size) {
+ c.cls += ' btn-' + _this.size;
+ }
+
+ if (_this.disabled) {
+ c.disabled = true;
+ }
+ });
+
+ var box = {
+ tag: 'div',
+ cn: [
+ {
+ tag: 'input',
+ type : 'hidden',
+ cls: 'form-hidden-field'
+ },
+ {
+ tag: 'ul',
+ cls: 'select2-choices',
+ cn:[
+ {
+ tag: 'li',
+ cls: 'select2-search-field',
+ cn: [
+
+ buttons
+ ]
+ }
+ ]
+ }
+ ]
+ }
+
+ 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;'
+// }
+ ]
+ };
+
+ if (align ==='left' && this.fieldLabel.length) {
+
+ Roo.log("left and has label");
+ cfg.cn = [
+
+ {
+ tag: 'label',
+ 'for' : id,
+ cls : 'control-label col-sm-' + this.labelWidth,
+ html : this.fieldLabel
+
+ },
+ {
+ cls : "col-sm-" + (12 - this.labelWidth),
+ cn: [
+ combobox
+ ]
+ }
+
+ ];
+ } else if ( this.fieldLabel.length) {
+ Roo.log(" label");
+ cfg.cn = [
+
+ {
+ tag: 'label',
+ //cls : 'input-group-addon',
+ html : this.fieldLabel
+
+ },
+
+ combobox
+
+ ];
+
+ } else {
+
+ Roo.log(" no label && no align");
+ cfg = combobox
+
+
+ }
+
+ var settings=this;
+ ['xs','sm','md','lg'].map(function(size){
+ if (settings[size]) {
+ cfg.cls += ' col-' + size + '-' + settings[size];
+ }
+ });
+
+ return cfg;
+
+ },
+
// private
- initEvents: function(){
+ initEvents: function()
+ {
if (!this.store) {
throw "can not find store for combo";
}
this.store = Roo.factory(this.store, Roo.data);
-
+ if(this.tickable){
+ 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
//});
- var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
- this.list.setWidth(lw);
+ var _this = this;
+
+ (function(){
+ var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
+ _this.list.setWidth(lw);
+ }).defer(100);
this.list.on('mouseover', this.onViewOver, this);
this.list.on('mousemove', this.onViewMove, this);
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);
this.searchField = this.el.select('ul li.select2-search-field', true).first();
}
},
+
+ initTickableEvents: function()
+ {
+ this.createList();
+
+ if(this.hiddenName){
+
+ this.hiddenField = this.el.select('input.form-hidden-field',true).first();
+
+ this.hiddenField.dom.value =
+ this.hiddenValue !== undefined ? this.hiddenValue :
+ this.value !== undefined ? this.value : '';
+
+ // prevent input submission
+ this.el.dom.removeAttribute('name');
+ this.hiddenField.dom.setAttribute('name', this.hiddenName);
+
+
+ }
+
+// 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.triggerList){
+ this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
+ }
+
+ this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
+ this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
+
+ this.okBtn = this.el.select('.tickable-buttons > .btn-ok', true).first();
+ this.cancelBtn = this.el.select('.tickable-buttons > .btn-cancel', true).first();
+
+ this.okBtn.on('click', this.onTickableFooterButtonClick, this, this.okBtn);
+ this.cancelBtn.on('click', this.onTickableFooterButtonClick, this, this.cancelBtn);
+
+ this.trigger.setVisibilityMode(Roo.Element.DISPLAY);
+ this.okBtn.setVisibilityMode(Roo.Element.DISPLAY);
+ this.cancelBtn.setVisibilityMode(Roo.Element.DISPLAY);
+
+ this.okBtn.hide();
+ this.cancelBtn.hide();
+
+ var _this = this;
+
+ (function(){
+ var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
+ _this.list.setWidth(lw);
+ }).defer(100);
+
+ this.list.on('mouseover', this.onViewOver, this);
+ this.list.on('mousemove', this.onViewMove, this);
+
+ this.list.on('scroll', this.onViewScroll, this);
+
+ if(!this.tpl){
+ 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.list, this.tpl, {
+ singleSelect:true, tickable:true, parent:this, store: this.store, selectedClass: this.selectedClass
+ });
+
+ //this.view.wrapEl.setDisplayed(false);
+ this.view.on('click', this.onViewClick, this);
+
+
+
+ this.store.on('beforeload', this.onBeforeLoad, this);
+ 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
+// });
+
+
+ this.queryDelay = Math.max(this.queryDelay || 10,
+ this.mode == 'local' ? 10 : 250);
+
+
+ this.dqTask = new Roo.util.DelayedTask(this.initQuery, this);
+
+ if(this.typeAhead){
+ this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
+ }
+ },
onDestroy : function(){
if(this.view){
if(this.list){
this.list.dom.innerHTML = '';
}
+
if(this.store){
this.store.un('beforeload', this.onBeforeLoad, this);
this.store.un('load', this.onLoad, this);
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){
+ if(this.editable && !this.tickable){
this.inputEl().dom.select();
}
if(!this.selectByValue(this.value, true) && this.autoFocus){
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;
}
return;
}
var item = this.view.findItemFromChild(t);
+
if(item){
var index = this.view.indexOf(item);
this.select(index, false);
},
// private
- onViewClick : function(doFocus)
+ onViewClick : function(view, doFocus, el, e)
{
var index = this.view.getSelectedIndexes()[0];
+
var r = this.store.getAt(index);
+
+ if(this.tickable){
+
+ if(e.getTarget().nodeName.toLowerCase() != 'input'){
+ return;
+ }
+
+ var rm = false;
+ var _this = this;
+
+ Roo.each(this.tickItems, function(v,k){
+
+ if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
+ _this.tickItems.splice(k, 1);
+ rm = true;
+ return;
+ }
+ })
+
+ if(rm){
+ return;
+ }
+
+ this.tickItems.push(r.data);
+ return;
+ }
+
if(r){
this.onSelect(r, index);
}
//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);
}
}
},
return;
}
+ this.hasFocus = false;
+
this.list.hide();
+
+ if(this.tickable){
+ this.okBtn.hide();
+ this.cancelBtn.hide();
+ this.trigger.show();
+ }
+
Roo.get(document).un('mousedown', this.collapseIf, this);
Roo.get(document).un('mousewheel', this.collapseIf, this);
if (!this.editable) {
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;
}
+
+ if(this.tickable){
+ this.onTickableFooterButtonClick(e, false, false);
+ }
this.collapse();
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);
+
+ this.okBtn.show();
+ this.cancelBtn.show();
+ this.trigger.hide();
+
+ }
+
Roo.get(document).on('mousedown', this.collapseIf, this);
Roo.get(document).on('mousewheel', this.collapseIf, this);
if (!this.editable) {
// private
// Implements the default empty TriggerField.onTriggerClick function
- onTriggerClick : function()
+ onTriggerClick : function(e)
{
Roo.log('trigger click');
- if(this.disabled){
+ if(this.disabled || !this.triggerList){
return;
}
}
}
},
+
+ onTickableTriggerClick : function(e)
+ {
+ if(this.disabled){
+ return;
+ }
+
+ this.page = 0;
+ this.loadNext = false;
+ this.hasFocus = true;
+
+ if(this.triggerAction == 'all') {
+ this.doQuery(this.allQuery, true);
+ } else {
+ this.doQuery(this.getRawValue());
+ }
+ },
+
+ onSearchFieldClick : function(e)
+ {
+ if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
+ return;
+ }
+
+ this.page = 0;
+ this.loadNext = false;
+ this.hasFocus = true;
+
+ if(this.triggerAction == 'all') {
+ this.doQuery(this.allQuery, true);
+ } else {
+ this.doQuery(this.getRawValue());
+ }
+ },
+
listKeyPress : function(e)
{
//Roo.log('listkeypress');
c.remove();
});
- this.syncValue();
+ this.syncValue();
+ },
+
+ inputEl: function ()
+ {
+ if(this.tickable){
+ return this.searchField;
+ }
+ return this.el.select('input.form-control',true).first();
+ },
+
+
+ onTickableFooterButtonClick : function(e, btn, el)
+ {
+ e.preventDefault();
+
+ if(btn && btn.name == 'cancel'){
+ this.tickItems = Roo.apply([], this.item);
+ this.collapse();
+ return;
+ }
+
+ this.clearItem();
+
+ var _this = this;
+
+ Roo.each(this.tickItems, function(o){
+ _this.addItem(o);
+ });
+
+ this.collapse();
+
}
+ /*
+ * - LGPL
+ *
+ * column
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.TabGroup
+ * @extends Roo.bootstrap.Column
+ * 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
+ *
+ * @constructor
+ * Create a new TabGroup
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.TabGroup = function(config){
+ Roo.bootstrap.TabGroup.superclass.constructor.call(this, config);
+ if (!this.navId) {
+ this.navId = Roo.id();
+ }
+ this.tabs = [];
+ Roo.bootstrap.TabGroup.register(this);
+
+};
+
+Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, {
+
+ carousel : false,
+ transition : false,
+
+ getAutoCreate : function()
+ {
+ var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
+
+ cfg.cls += ' tab-content';
+
+ if (this.carousel) {
+ cfg.cls += ' carousel slide';
+ cfg.cn = [{
+ cls : 'carousel-inner'
+ }]
+ }
+
+
+ return cfg;
+ },
+ getChildContainer : function()
+ {
+ return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
+ },
+
+ /**
+ * register a Navigation item
+ * @param {Roo.bootstrap.NavItem} the navitem to add
+ */
+ register : function(item)
+ {
+ this.tabs.push( item);
+ item.navId = this.navId; // not really needed..
+
+ },
+
+ getActivePanel : function()
+ {
+ var r = false;
+ Roo.each(this.tabs, function(t) {
+ if (t.active) {
+ r = t;
+ return false;
+ }
+ return null;
+ });
+ return r;
+
+ },
+ getPanelByName : function(n)
+ {
+ var r = false;
+ Roo.each(this.tabs, function(t) {
+ if (t.tabId == n) {
+ r = t;
+ return false;
+ }
+ return null;
+ });
+ return r;
+ },
+ indexOfPanel : function(p)
+ {
+ var r = false;
+ Roo.each(this.tabs, function(t,i) {
+ if (t.tabId == p.tabId) {
+ r = i;
+ return false;
+ }
+ return null;
+ });
+ return r;
+ },
+ /**
+ * show a specific panel
+ * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
+ * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
+ */
+ showPanel : function (pan)
+ {
+
+ if (typeof(pan) == 'number') {
+ pan = this.tabs[pan];
+ }
+ if (typeof(pan) == 'string') {
+ pan = this.getPanelByName(pan);
+ }
+ if (pan.tabId == this.getActivePanel().tabId) {
+ return true;
+ }
+ var cur = this.getActivePanel();
+
+ if (false === cur.fireEvent('beforedeactivate')) {
+ 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?");
+
+ pan.el.removeClass([lr,dir]);
+ pan.setActive(true);
+
+ cur.el.removeClass([lr]);
+ cur.setActive(false);
+
+ _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) {
+ return;
+ }
+ this.showPanel(this.tabs[i+1]);
+ },
+ showPanelPrev : function()
+ {
+ var i = this.indexOfPanel(this.getActivePanel());
+ if (i < 1) {
+ return;
+ }
+ this.showPanel(this.tabs[i-1]);
+ }
+
+
+
+});
+
+
+
+
+
+Roo.apply(Roo.bootstrap.TabGroup, {
+
+ groups: {},
+ /**
+ * register a Navigation Group
+ * @param {Roo.bootstrap.NavGroup} the navgroup to add
+ */
+ register : function(navgrp)
+ {
+ this.groups[navgrp.navId] = navgrp;
+
+ },
+ /**
+ * fetch a Navigation Group based on the navigation ID
+ * if one does not exist , it will get created.
+ * @param {string} the navgroup to add
+ * @returns {Roo.bootstrap.NavGroup} the navgroup
+ */
+ get: function(navId) {
+ if (typeof(this.groups[navId]) == 'undefined') {
+ this.register(new Roo.bootstrap.TabGroup({ navId : navId }));
+ }
+ return this.groups[navId] ;
+ }
+
+
+
+});
+
/*
* - LGPL
*
* Bootstrap TabPanel class
* @cfg {Boolean} active panel active
* @cfg {String} html panel content
- * @cfg {String} tabId tab relate id
+ * @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
* @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
*
*
Roo.bootstrap.TabPanel = function(config){
Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
- this.addEvents({
+ this.addEvents({
/**
* @event changed
* Fires when the active status changes
* @param {Boolean} state the new state
*/
- 'changed': true
+ 'changed': true,
+ /**
+ * @event beforedeactivate
+ * Fires before a tab is de-activated - can be used to do validation on a form.
+ * @param {Roo.bootstrap.TabPanel} this
+ * @return {Boolean} false if there is an error
+
+ */
+ 'beforedeactivate': true
});
+
+ this.tabId = this.tabId || Roo.id();
+
};
Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, {
getAutoCreate : function(){
var cfg = {
tag: 'div',
- cls: 'tab-pane',
+ // item is needed for carousel - not sure if it has any effect otherwise
+ cls: 'tab-pane item',
html: this.html || ''
};
cfg.tabId = this.tabId;
}
+
return cfg;
},
+
+ initEvents: function()
+ {
+ Roo.log('-------- init events on tab panel ---------');
+
+ var p = this.parent();
+ this.navId = this.navId || p.navId;
+
+ if (typeof(this.navId) != 'undefined') {
+ // not really needed.. but just in case.. parent should be a NavGroup.
+ var tg = Roo.bootstrap.TabGroup.get(this.navId);
+ Roo.log(['register', tg, this]);
+ tg.register(this);
+ }
+ },
+
+
onRender : function(ct, position)
{
// Roo.log("Call onRender: " + this.xtype);
Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
- if (this.navId && this.tabId) {
- var item = Roo.bootstrap.NavGroup.get(this.navId).getNavItem(this.tabId);
- if (!item) {
- Roo.log("could not find navID:" + this.navId + ", tabId: " + this.tabId);
- } else {
- item.on('changed', function(item, state) {
- this.setActive(state);
- }, this);
- }
- }
+
+
+
},
+
setActive: function(state)
{
Roo.log("panel - set active " + this.tabId + "=" + state);
},
- update: function(){
+ update: function()
+ {
this.date = (typeof(this.date) === 'undefined') ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
this.fill();
},
- fill: function() {
+ fill: function()
+ {
var d = new Date(this.viewDate),
year = d.getUTCFullYear(),
month = d.getUTCMonth(),
}
},
- showMode: function(dir) {
+ showMode: function(dir)
+ {
if (dir) {
this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
}
this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
},
- parseDate : function(value){
+ parseDate : function(value)
+ {
if(!value || value instanceof Date){
return value;
}
return v;
},
- formatDate : function(date, fmt){
+ formatDate : function(date, fmt)
+ {
return (!date || !(date instanceof Date)) ?
date : date.dateFormat(fmt || this.format);
},
onBlur : function()
{
Roo.bootstrap.DateField.superclass.onBlur.call(this);
+
+ var d = this.inputEl().getValue();
+
+ if(d && d.length){
+ this.setValue(d);
+ }
+
this.hide();
},
},
- onMousedown: function(e){
+ onMousedown: function(e)
+ {
e.stopPropagation();
e.preventDefault();
},
- keyup: function(e){
+ keyup: function(e)
+ {
Roo.bootstrap.DateField.superclass.keyup.call(this);
this.update();
-
},
- setValue: function(v){
+ setValue: function(v)
+ {
Roo.bootstrap.DateField.superclass.setValue.call(this, v);
+ var d = new Date(v);
+
+ if(isNaN(d.getTime())){
+ return;
+ }
+
+ this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
+
+ this.update();
+
this.fireEvent('select', this, this.date);
},
- fireKey: function(e){
+ getValue: function()
+ {
+ return this.formatDate(this.date);
+ },
+
+ fireKey: function(e)
+ {
if (!this.picker().isVisible()){
if (e.keyCode == 27) // allow escape to hide and re-show picker
this.show();
return;
}
+
var dateChanged = false,
dir, day, month,
newDate, newViewDate;
+
switch(e.keyCode){
case 27: // escape
this.hide();
this.date = newDate;
this.viewDate = newViewDate;
this.setValue(this.formatDate(this.date));
- this.update();
+// this.update();
e.preventDefault();
dateChanged = true;
}
this.date = newDate;
this.viewDate = newViewDate;
this.setValue(this.formatDate(this.date));
- this.update();
+// this.update();
e.preventDefault();
dateChanged = true;
}
this.setValue(this.formatDate(this.date));
this.hide();
break;
+ case 16: // shift
+ case 17: // ctrl
+ case 18: // alt
+ break;
+ default :
+ this.hide();
+
}
},
- onClick: function(e) {
+ onClick: function(e)
+ {
e.stopPropagation();
e.preventDefault();
case 'today':
var date = new Date();
this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
- this.fill()
+// this.fill()
this.setValue(this.formatDate(this.date));
+
this.hide();
break;
}
}
this.date = this.UTCDate(year, month, day,0,0,0,0);
this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
- this.fill();
+// this.fill();
this.setValue(this.formatDate(this.date));
this.hide();
}
}
},
- setStartDate: function(startDate){
+ setStartDate: function(startDate)
+ {
this.startDate = startDate || -Infinity;
if (this.startDate !== -Infinity) {
this.startDate = this.parseDate(this.startDate);
this.updateNavArrows();
},
- setEndDate: function(endDate){
+ setEndDate: function(endDate)
+ {
this.endDate = endDate || Infinity;
if (this.endDate !== Infinity) {
this.endDate = this.parseDate(this.endDate);
this.updateNavArrows();
},
- setDaysOfWeekDisabled: function(daysOfWeekDisabled){
+ setDaysOfWeekDisabled: function(daysOfWeekDisabled)
+ {
this.daysOfWeekDisabled = daysOfWeekDisabled || [];
if (typeof(this.daysOfWeekDisabled) !== 'object') {
this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
this.updateNavArrows();
},
- updateNavArrows: function() {
+ updateNavArrows: function()
+ {
var d = new Date(this.viewDate),
year = d.getUTCFullYear(),
month = d.getUTCMonth();
})
},
- moveMonth: function(date, dir){
+ moveMonth: function(date, dir)
+ {
if (!dir) return date;
var new_date = new Date(date.valueOf()),
day = new_date.getUTCDate(),
return new_date;
},
- moveYear: function(date, dir){
+ moveYear: function(date, dir)
+ {
return this.moveMonth(date, dir*12);
},
- dateWithinRange: function(date){
+ dateWithinRange: function(date)
+ {
return date >= this.startDate && date <= this.endDate;
},
- remove: function() {
+ remove: function()
+ {
this.picker().remove();
}
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
Roo.bootstrap.dash.TabBox = function(config){
Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
-
+ this.addEvents({
+ // raw events
+ /**
+ * @event addpane
+ * When a pane is added
+ * @param {Roo.bootstrap.dash.TabPane} pane
+ */
+ "addpane" : true
+
+ });
};
Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component, {
title : '',
icon : false,
+ showtabs : true,
getChildContainer : function()
{
return cfg;
},
-
+ initEvents : function()
+ {
+ //Roo.log('add add pane handler');
+ this.on('addpane', this.onAddPane, this);
+ },
+ /**
+ * Updates the box title
+ * @param {String} html to set the title to.
+ */
setTitle : function(value)
{
- this.el.select('.header', true).first().dom.innerHTML = value;
+ this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
+ },
+ onAddPane : function(pane)
+ {
+ //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();
+
+
+ var existing = ctr.select('.nav-tab',true);
+ var qty = existing.getCount();;
+
+
+ var tab = ctr.createChild({
+ tag : 'li',
+ cls : 'nav-tab' + (qty ? '' : ' active'),
+ cn : [
+ {
+ tag : 'a',
+ href:'#',
+ html : pane.title
+ }
+ ]
+ }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
+ pane.tab = tab;
+
+ tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
+ if (!qty) {
+ pane.el.addClass('active');
+ }
+
+
+ },
+ onTabClick : function(ev,un,ob,pane)
+ {
+ //Roo.log('tab - prev default');
+ ev.preventDefault();
+
+
+ this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
+ pane.tab.addClass('active');
+ //Roo.log(pane.title);
+ this.getChildContainer().select('.tab-pane',true).removeClass('active');
+ // technically we should have a deactivate event.. but maybe add later.
+ // and it should not de-activate the selected tab...
+
+ pane.el.addClass('active');
+ pane.fireEvent('activate');
+
+
}
+
});
* @extends Roo.bootstrap.Component
* Bootstrap TabPane class
* @cfg {Boolean} active (false | true) Default false
+ * @cfg {String} title title of panel
*
* @constructor
Roo.extend(Roo.bootstrap.dash.TabPane, Roo.bootstrap.Component, {
active : false,
-//
-// getBox : function()
-// {
-// return this.el.findParent('.nav-tabs-custom', false, true);
-// },
+ title : '',
+ // the tabBox that this is attached to.
+ tab : false,
+
getAutoCreate : function()
{
var cfg = {
}
return cfg;
+ },
+ initEvents : function()
+ {
+ //Roo.log('trigger add pane handler');
+ this.parent().fireEvent('addpane', this)
+ },
+
+ /**
+ * Updates the tab title
+ * @param {String} html to set the title to.
+ */
+ setTitle: function(str)
+ {
+ if (!this.tab) {
+ return;
+ }
+ this.title = str;
+ this.tab.select('a', true).first().dom.innerHTML = str;
+
}
+
});