Roo.Element.prototype.visibilityMode = Roo.Element.DISPLAY;
}
return ret;
-})(); /*
+})(); Roo.bootstrap.menu = Roo.bootstrap.menu || {};
+Roo.bootstrap.nav = {};
+
+Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* frame: Shadow displays equally on all four sides<br />
* drop: Traditional bottom-right drop shadow (default)
*/
+ mode: false,
/**
* @cfg {String} offset
* The number of pixels to offset the shadow from the element (defaults to 4)
/**
* @class Roo.bootstrap.Component
* @extends Roo.Component
+ * @abstract
+ * @children Roo.bootstrap.Component
* Bootstrap Component base class
* @cfg {String} cls css class
* @cfg {String} style any extra css
}
if (this.cls) {
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
}
if (this.style) { // fixme needs to support more complex style data.
- cfg.style = this.style;
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
}
if(this.name){
{
return this.el;
},
+ getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work
+ {
+ return Roo.get(document.body);
+ },
+
/**
* Fetch the element to display the tooltip on.
* @return {Roo.Element} defaults to this.el
/**
* @class Roo.bootstrap.Element
* @extends Roo.bootstrap.Component
- * Bootstrap Element class
+ * @children Roo.bootstrap.Component
+ * Bootstrap Element class (basically a DIV used to make random stuff )
+ *
* @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
+ * @cfg {String} role default blank - set to button to force cursor pointer
+
*
* @constructor
* Create a new Element
* @param {Roo.bootstrap.Element} this
* @param {Roo.EventObject} e
*/
- "click" : true
+ "click" : true
+
+
});
};
html: '',
preventDefault: false,
clickable: false,
+ tapedTwice : false,
+ role : false,
getAutoCreate : function(){
// cls: this.cls, double assign in parent class Component.js :: onRender
html: this.html
};
+ if (this.role !== false) {
+ cfg.role = this.role;
+ }
return cfg;
},
this.el.on('click', this.onClick, this);
}
+
},
onClick : function(e)
e.preventDefault();
}
- this.fireEvent('click', this, e);
+ this.fireEvent('click', this, e); // why was this double click before?
},
+
+
+
+
+
getValue : function()
{
return this.el.dom.innerHTML;
/**
* @class Roo.bootstrap.Body
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent none builder
* Bootstrap Body class
*
* @constructor
* @class Roo.bootstrap.ButtonGroup
* @extends Roo.bootstrap.Component
* Bootstrap ButtonGroup class
+ * @children Roo.bootstrap.Button Roo.bootstrap.form.Form
+ *
* @cfg {String} size lg | sm | xs (default empty normal)
* @cfg {String} align vertical | justified (default none)
* @cfg {String} direction up | down (default down)
* @cfg {Boolean} removeClass remove the standard class..
* @cfg {String} target (_self|_blank|_parent|_top|other) target for a href.
* @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
- *
+ * @cfg {Roo.bootstrap.menu.Menu} menu a Menu
+
* @constructor
* Create a new button
* @param {Object} config The config object
/**
* @class Roo.bootstrap.Column
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Column class
* @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
/**
* @class Roo.bootstrap.Container
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent builder
* Bootstrap Container class
* @cfg {Boolean} jumbotron is it a jumbotron element
* @cfg {String} html content of element
}
});
- /*
- * - LGPL
- *
- * This is BS4's Card element.. - similar to our containers probably..
- *
- */
-/**
+ /**
* @class Roo.bootstrap.Card
* @extends Roo.bootstrap.Component
- * Bootstrap Card class
+ * @children Roo.bootstrap.Component
+ * @licence LGPL
+ * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
*
*
* possible... may not be implemented..
/**
* @event rotate
* When a element a card is rotate
- * @param {Roo.bootstrap.Element} this
+ * @param {Roo.bootstrap.Card} this
* @param {Roo.Element} n the node being dropped?
* @param {Boolean} rotate status
*/
- 'rotate' : true
-
+ 'rotate' : true,
+ /**
+ * @event cardover
+ * When a card element is dragged over ready to drop (return false to block dropable)
+ * @param {Roo.bootstrap.Card} this
+ * @param {Object} data from dragdrop
+ */
+ 'cardover' : true
+
});
};
headerEl : false,
header_imageEl : false,
+
layoutCls : function()
{
var cls = '';
if (this.rotateable) {
this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
}
- this.collapsableEl = this.el.select('.roo-collapsable').first();
+ this.collapsableEl = this.el.select('.roo-collapsable',true).first();
- this.footerEl = this.el.select('.card-footer').first();
- this.collapsableToggleEl = this.el.select('.roo-collapse-toggle');
- this.headerContainerEl = this.el.select('.roo-card-header-ctr').first();
+ this.footerEl = this.el.select('.card-footer',true).first();
+ this.collapsableToggleEl = this.el.select('.roo-collapse-toggle',true).first();
+ this.headerContainerEl = this.el.select('.roo-card-header-ctr',true).first();
this.headerEl = this.el.select('.card-header',true).first();
if (this.rotated) {
/**
* Part of the Roo.dd.DropZone interface. If no target node is found, the
* whole Element becomes the target, and this causes the drop gesture to append.
+ *
+ * Returns an object:
+ * {
+
+ position : 'below' or 'above'
+ card : relateive to card OBJECT (or true for no cards listed)
+ items_n : relative to nth item in list
+ card_n : relative to nth card in list
+ }
+ *
+ *
*/
getTargetFromEvent : function(e, dragged_card_el)
{
}
Roo.log(['getTargetFromEvent', target_info ]);
-
+
+ if (this.fireEvent('cardover', this, [ data ]) === false) {
+ return false;
+ }
+
this.dropPlaceHolder('show', target_info,data);
return false;
}
this.dropPlaceHolder('hide');
-
-
-
+
this.acceptCard(data.source, info.position, info.card, info.items_n);
return true;
/**
* @class Roo.bootstrap.CardHeader
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardHeader class
* @constructor
* Create a new Card Header - that you can embed children into
/**
* @class Roo.bootstrap.CardFooter
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardFooter class
+ *
* @constructor
* Create a new Card Footer - that you can embed children into
* @param {Object} config The config object
/**
* @class Roo.bootstrap.CardImageTop
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardImageTop class
+ *
* @constructor
* Create a new Card Image Top container
* @param {Object} config The config object
+
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.bootstrap.ButtonUploader
+ * @extends Roo.bootstrap.Button
+ * Bootstrap Button Uploader class - it's a button which when you add files to it
+ *
+ *
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Array} images an array of ?? Img objects ??? when loading existing files..
+ * @cfg {Array} html The button text.
+ * @cfg {Boolean} multiple (default true) Should the upload allow multiple files to be uploaded.
+ *
+ * @constructor
+ * Create a new CardUploader
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.ButtonUploader = function(config){
+
+
+
+ Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config);
+
+
+ this.addEvents({
+ // raw events
+ /**
+ * @event beforeselect
+ * When button is pressed, before show upload files dialog is shown
+ * @param {Roo.bootstrap.UploaderButton} this
+ *
+ */
+ 'beforeselect' : true,
+ /**
+ * @event fired when files have been selected,
+ * When a the download link is clicked
+ * @param {Roo.bootstrap.UploaderButton} this
+ * @param {Array} Array of files that have been uploaded
+ */
+ 'uploaded' : true
+
+ });
+};
+
+Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, {
+
+
+ errorTimeout : 3000,
+
+ images : false,
+
+ fileCollection : false,
+ allowBlank : true,
+
+ multiple : true,
+
+ getAutoCreate : function()
+ {
+ var im = {
+ tag: 'input',
+ type : 'file',
+ cls : 'd-none roo-card-upload-selector'
+
+ };
+ if (this.multiple) {
+ im.multiple = 'multiple';
+ }
+
+ return {
+ cls :'div' ,
+ cn : [
+ Roo.bootstrap.Button.prototype.getAutoCreate.call(this),
+ im
+
+ ]
+ };
+
+
+ },
+
+
+ initEvents : function()
+ {
+
+ Roo.bootstrap.Button.prototype.initEvents.call(this);
+
+
+
+
+
+ this.urlAPI = (window.createObjectURL && window) ||
+ (window.URL && URL.revokeObjectURL && URL) ||
+ (window.webkitURL && webkitURL);
+
+
+
+
+ this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
+
+ this.selectorEl.on('change', this.onFileSelected, this);
+
+
+
+ },
+
+
+ onClick : function(e)
+ {
+ e.preventDefault();
+
+ if ( this.fireEvent('beforeselect', this) === false) {
+ return;
+ }
+
+ this.selectorEl.dom.click();
+
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+ var files = Array.prototype.slice.call(this.selectorEl.dom.files);
+ this.selectorEl.dom.value = '';// hopefully reset..
+
+ this.fireEvent('uploaded', this, files );
+
+ },
+
+
+
+
+ /**
+ * addCard - add an Attachment to the uploader
+ * @param data - the data about the image to upload
+ *
+ * {
+ id : 123
+ title : "Title of file",
+ is_uploaded : false,
+ src : "http://.....",
+ srcfile : { the File upload object },
+ mimetype : file.type,
+ preview : false,
+ is_deleted : 0
+ .. any other data...
+ }
+ *
+ *
+ */
+
+ reset: function()
+ {
+
+ this.selectorEl
+ }
+
+
+
+
+});
/*
* - LGPL
*
* @cfg {String} smUrl sm image source
* @cfg {String} mdUrl md image source
* @cfg {String} lgUrl lg image source
+ * @cfg {Boolean} backgroundContain (use style background and contain image in content)
*
* @constructor
* Create a new Input
* The img click event for the img.
* @param {Roo.EventObject} e
*/
- "click" : true
+ "click" : true,
+ /**
+ * @event load
+ * The when any image loads
+ * @param {Roo.EventObject} e
+ */
+ "load" : true
});
};
smUrl: '',
mdUrl: '',
lgUrl: '',
+ backgroundContain : false,
getAutoCreate : function()
{
tag: 'img',
cls: (this.imgResponsive) ? 'img-responsive' : '',
html : null,
- src : 'about:blank' // just incase src get's set to undefined?!?
+ src : Roo.BLANK_IMAGE_URL // just incase src get's set to undefined?!?
};
+ if (this.backgroundContain) {
+ cfg.cls += ' background-contain';
+ }
+
cfg.html = this.html || cfg.html;
- cfg.src = this.src || cfg.src;
+ if (this.backgroundContain) {
+ cfg.style="background-image: url(" + this.src + ')';
+ } else {
+ cfg.src = this.src || cfg.src;
+ }
if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
cfg.cls += ' img-' + this.border;
if(!this.href){
this.el.on('click', this.onClick, this);
}
+ if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+ this.el.on('load', this.onImageLoad, this);
+ } else {
+ // not sure if this works.. not tested
+ this.el.select('img', true).on('load', this.onImageLoad, this);
+ }
},
Roo.log('img onclick');
this.fireEvent('click', this, e);
},
+ onImageLoad: function(e)
+ {
+ Roo.log('img load');
+ this.fireEvent('load', this, e);
+ },
+
/**
* Sets the url of the image - used to update it
* @param {String} url the url of the image
this.src = url;
if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
- this.el.dom.src = url;
+ if (this.backgroundContain) {
+ this.el.dom.style.backgroundImage = 'url(' + url + ')';
+ } else {
+ this.el.dom.src = url;
+ }
return;
}
/**
* @class Roo.bootstrap.Link
* @extends Roo.bootstrap.Component
- * Bootstrap Link Class
+ * @children Roo.bootstrap.Component
+ * Bootstrap Link Class (eg. '<a href>')
+
* @cfg {String} alt image alternative text
* @cfg {String} href a tag href
* @cfg {String} target (_self|_blank|_parent|_top) target for a href.
/**
* @class Roo.bootstrap.Header
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Header class
+ *
+ *
* @cfg {String} html content of header
* @cfg {Number} level (1|2|3|4|5|6) default 1
*
- /*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
+ /**
* @class Roo.bootstrap.MenuMgr
+ * @licence LGPL
* Provides a common registry of all menu items on a page so that they can be easily accessed by id.
- * @singleton
+ * @static
*/
-Roo.bootstrap.MenuMgr = function(){
+Roo.bootstrap.menu.Manager = function(){
var menus, active, groups = {}, attached = false, lastShow = new Date();
// private - called when first menu is created
}
}
};
-}();/*
- * - LGPL
- *
- * menu
- *
- */
-
+}();
/**
- * @class Roo.bootstrap.Menu
+ * @class Roo.bootstrap.menu.Menu
* @extends Roo.bootstrap.Component
- * Bootstrap Menu class - container for MenuItems
+ * @licence LGPL
+ * @children Roo.bootstrap.menu.Item
+ * @parent none
+ * Bootstrap Menu class - container for MenuItems - normally has to be added to a object that supports the menu property
+ *
* @cfg {String} type (dropdown|treeview|submenu) type of menu
* @cfg {bool} hidden if the menu should be hidden when rendered.
* @cfg {bool} stopEvent (true|false) Stop event after trigger press (default true)
* @cfg {bool} isLink (true|false) the menu has link disable auto expand and collaspe (default false)
- *
+ * @cfg {bool} hideTrigger (true|false) default false - hide the carret for trigger.
+ * @cfg {String} align default tl-bl? == below - how the menu should be aligned.
+
* @constructor
* Create a new Menu
- * @param {Object} config The config object
+ * @param {Object} config The config objectQ
*/
-Roo.bootstrap.Menu = function(config){
- Roo.bootstrap.Menu.superclass.constructor.call(this, config);
+Roo.bootstrap.menu.Menu = function(config){
+
+ if (config.type == 'treeview') {
+ // normally menu's are drawn attached to the document to handle layering etc..
+ // however treeview (used by the docs menu is drawn into the parent element)
+ this.container_method = 'getChildContainer';
+ }
+
+ Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
if (this.registerMenu && this.type != 'treeview') {
- Roo.bootstrap.MenuMgr.register(this);
+ Roo.bootstrap.menu.Manager.register(this);
}
this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
};
-Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component, {
/// html : false,
- //align : '',
+
triggerEl : false, // is this set by component builder? -- it should really be fetched from parent()???
type: false,
/**
isLink : false,
+ container_method : 'getDocumentBody', // so the menu is rendered on the body and zIndex works.
+
+ hideTrigger : false,
+
+ align : 'tl-bl?',
+
+
getChildContainer : function() {
return this.el;
},
//if (['right'].indexOf(this.align)!==-1) {
// cfg.cn[1].cls += ' pull-right'
//}
-
-
+
var cfg = {
tag : 'ul',
- cls : 'dropdown-menu' ,
+ cls : 'dropdown-menu shadow' ,
style : 'z-index:1000'
};
// Roo.log("ADD event");
// Roo.log(this.triggerEl.dom);
+ if (this.triggerEl) {
+
+ this.triggerEl.on('click', this.onTriggerClick, this);
+
+ this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
+
+ if (!this.hideTrigger) {
+ if (this.triggerEl.hasClass('nav-item') && this.triggerEl.select('.nav-link',true).length) {
+ // dropdown toggle on the 'a' in BS4?
+ this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
+ } else {
+ this.triggerEl.addClass('dropdown-toggle');
+ }
+ }
+ }
- this.triggerEl.on('click', this.onTriggerClick, this);
-
- this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
-
-
- if (this.triggerEl.hasClass('nav-item')) {
- // dropdown toggle on the 'a' in BS4?
- this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
- } else {
- this.triggerEl.addClass('dropdown-toggle');
- }
if (Roo.isTouch) {
this.el.on('touchstart' , this.onTouch, this);
}
if(!this.el){
this.render();
}
+ this.el.addClass('show'); // show otherwise we do not know how big we are..
+
+ var xy = this.el.getAlignToXY(el, pos);
+
+ // bl-tl << left align below
+ // tl-bl << left align
+
+ if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
+ // if it goes to far to the right.. -> align left.
+ xy = this.el.getAlignToXY(el, this.align.replace('/l/g', 'r'))
+ }
+ if(xy[0] < 0){
+ // was left align - go right?
+ xy = this.el.getAlignToXY(el, this.align.replace('/r/g', 'l'))
+ }
+
+ // goes down the bottom
+ if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight() ||
+ xy[1] < 0 ){
+ var a = this.align.replace('?', '').split('-');
+ xy = this.el.getAlignToXY(el, a[1] + '-' + a[0] + '?')
+
+ }
- this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
+ this.showAt( xy , parentMenu, false);
},
/**
* Displays this menu at a specific xy position
//this.el.show();
this.hideMenuItems();
this.hidden = false;
- this.triggerEl.addClass('open');
+ if (this.triggerEl) {
+ this.triggerEl.addClass('open');
+ }
+
this.el.addClass('show');
+
+
// reassign x when hitting right
- if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
- xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
- }
// reassign y when hitting bottom
- if(this.el.getHeight() + xy[1] >= Roo.lib.Dom.getViewHeight()){
- xy[1] = xy[1] - this.el.getHeight() - this.triggerEl.getHeight();
- }
// but the list may align on trigger left or trigger top... should it be a properity?
hide : function(deep)
{
if (false === this.fireEvent("beforehide", this)) {
- Roo.log("hide canceled");
- return;
- }
+ Roo.log("hide canceled");
+ return;
+ }
this.hideMenuItems();
if(this.el && this.isVisible()){
this.activeItem.deactivate();
this.activeItem = null;
}
- this.triggerEl.removeClass('open');;
- this.el.removeClass('show');
+ if (this.triggerEl) {
+ this.triggerEl.removeClass('open');
+ }
+
+ this.el.removeClass('show');
this.hidden = true;
this.fireEvent("hide", this);
}
this.hide();
} else {
Roo.log('show');
- this.show(this.triggerEl, '?', false);
+
+ this.show(this.triggerEl, this.align, false);
}
if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
});
},
addxtypeChild : function (tree, cntr) {
- var comp= Roo.bootstrap.Menu.superclass.addxtypeChild.call(this, tree, cntr);
+ var comp= Roo.bootstrap.menu.Menu.superclass.addxtypeChild.call(this, tree, cntr);
this.menuitems.add(comp);
return comp;
});
- /*
- * - LGPL
- *
- * menu item
- *
- */
-
-
-/**
- * @class Roo.bootstrap.MenuItem
+ /**
+ * @class Roo.bootstrap.menu.Item
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Button Roo.bootstrap.ButtonUploader Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Container
+ * @parent Roo.bootstrap.menu.Menu
+ * @licence LGPL
* Bootstrap MenuItem class
+ *
* @cfg {String} html the menu label
* @cfg {String} href the link
* @cfg {Boolean} preventDefault do not trigger A href on clicks (default false).
*/
-Roo.bootstrap.MenuItem = function(config){
- Roo.bootstrap.MenuItem.superclass.constructor.call(this, config);
+Roo.bootstrap.menu.Item = function(config){
+ Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
this.addEvents({
// raw events
/**
* @event click
* The raw click event for the entire grid.
- * @param {Roo.bootstrap.MenuItem} this
+ * @param {Roo.bootstrap.menu.Item} this
* @param {Roo.EventObject} e
*/
"click" : true
});
};
-Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component, {
href : false,
html : false,
- /*
- * - LGPL
- *
- * menu separator
- *
- */
-
+
+
/**
- * @class Roo.bootstrap.MenuSeparator
+ * @class Roo.bootstrap.menu.Separator
* @extends Roo.bootstrap.Component
- * Bootstrap MenuSeparator class
+ * @licence LGPL
+ * @parent Roo.bootstrap.menu.Menu
+ * Bootstrap Separator class
*
* @constructor
- * Create a new MenuItem
+ * Create a new Separator
* @param {Object} config The config object
*/
-Roo.bootstrap.MenuSeparator = function(config){
- Roo.bootstrap.MenuSeparator.superclass.constructor.call(this, config);
+Roo.bootstrap.menu.Separator = function(config){
+ Roo.bootstrap.menu.Separator.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.menu.Separator, Roo.bootstrap.Component, {
getAutoCreate : function(){
var cfg = {
- cls: 'divider',
- tag : 'li'
+ tag : 'li',
+ cls: 'dropdown-divider divider'
};
return cfg;
/**
* @class Roo.bootstrap.Modal
* @extends Roo.bootstrap.Component
+ * @parent none builder
+ * @children Roo.bootstrap.Component
* Bootstrap Modal class
* @cfg {String} title Title of dialog
* @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
* @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn
* @cfg {Boolean} specificTitle default false
- * @cfg {Array} buttons Array of buttons or standard button set..
+ * @cfg {Roo.bootstrap.Button} buttons[] Array of buttons or standard button set..
* @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
* @cfg {Boolean} animate default true
* @cfg {Boolean} allow_close default true
animEl: 'elId'
});
</code></pre>
- * @singleton
+ * @static
*/
Roo.bootstrap.MessageBox = function(){
var dlg, opt, mask, waitTimer;
*/
/**
- * @class Roo.bootstrap.Navbar
+ * @class Roo.bootstrap.nav.Bar
* @extends Roo.bootstrap.Component
+ * @abstract
* Bootstrap Navbar class
* @constructor
*/
-Roo.bootstrap.Navbar = function(config){
- Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
+Roo.bootstrap.nav.Bar = function(config){
+ Roo.bootstrap.nav.Bar.superclass.constructor.call(this, config);
this.addEvents({
// raw events
/**
});
};
-Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.nav.Bar, Roo.bootstrap.Component, {
*/
/**
- * @class Roo.bootstrap.NavSimplebar
- * @extends Roo.bootstrap.Navbar
+ * @class Roo.bootstrap.nav.Simplebar
+ * @extends Roo.bootstrap.nav.Bar
+ * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
* Bootstrap Sidebar class
*
* @cfg {Boolean} inverse is inverted color
*/
-Roo.bootstrap.NavSimplebar = function(config){
- Roo.bootstrap.NavSimplebar.superclass.constructor.call(this, config);
+Roo.bootstrap.nav.Simplebar = function(config){
+ Roo.bootstrap.nav.Simplebar.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, {
+Roo.extend(Roo.bootstrap.nav.Simplebar, Roo.bootstrap.nav.Bar, {
inverse: false,
*/
/**
- * @class Roo.bootstrap.NavHeaderbar
- * @extends Roo.bootstrap.NavSimplebar
+ * @class Roo.bootstrap.nav.Headerbar
+ * @extends Roo.bootstrap.nav.Simplebar
+ * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
* Bootstrap Sidebar class
*
* @cfg {String} brand what is brand
*/
-Roo.bootstrap.NavHeaderbar = function(config){
- Roo.bootstrap.NavHeaderbar.superclass.constructor.call(this, config);
+Roo.bootstrap.nav.Headerbar = function(config){
+ Roo.bootstrap.nav.Headerbar.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, {
+Roo.extend(Roo.bootstrap.nav.Headerbar, Roo.bootstrap.nav.Simplebar, {
position: '',
brand: '',
initEvents : function()
{
- Roo.bootstrap.NavHeaderbar.superclass.initEvents.call(this);
+ Roo.bootstrap.nav.Headerbar.superclass.initEvents.call(this);
if (this.autohide) {
*/
/**
- * @class Roo.bootstrap.NavSidebar
- * @extends Roo.bootstrap.Navbar
+ * @class Roo.bootstrap.nav.Sidebar
+ * @extends Roo.bootstrap.nav.Bar
+ * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
* Bootstrap Sidebar class
*
* @constructor
*/
-Roo.bootstrap.NavSidebar = function(config){
- Roo.bootstrap.NavSidebar.superclass.constructor.call(this, config);
+Roo.bootstrap.nav.Sidebar = function(config){
+ Roo.bootstrap.nav.Sidebar.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.NavSidebar, Roo.bootstrap.Navbar, {
+Roo.extend(Roo.bootstrap.nav.Sidebar, Roo.bootstrap.nav.Bar, {
sidebar : true, // used by Navbar Item and NavbarGroup at present...
*/
/**
- * @class Roo.bootstrap.NavGroup
+ * @class Roo.bootstrap.nav.Group
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.nav.Item
* Bootstrap NavGroup class
* @cfg {String} align (left|right)
* @cfg {Boolean} inverse
* @param {Object} config The config object
*/
-Roo.bootstrap.NavGroup = function(config){
- Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
+Roo.bootstrap.nav.Group = function(config){
+ Roo.bootstrap.nav.Group.superclass.constructor.call(this, config);
this.navItems = [];
- Roo.bootstrap.NavGroup.register(this);
+ Roo.bootstrap.nav.Group.register(this);
this.addEvents({
/**
* @event changed
* Fires when the active item changes
- * @param {Roo.bootstrap.NavGroup} this
+ * @param {Roo.bootstrap.nav.Group} this
* @param {Roo.bootstrap.Navbar.Item} selected The item selected
* @param {Roo.bootstrap.Navbar.Item} prev The previously selected item
*/
};
-Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.nav.Group, Roo.bootstrap.Component, {
align: '',
inverse: false,
getAutoCreate : function()
{
- var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
+ var cfg = Roo.apply({}, Roo.bootstrap.nav.Group.superclass.getAutoCreate.call(this));
cfg = {
tag : 'ul',
},
/**
* sets the active Navigation item
- * @param {Roo.bootstrap.NavItem} the new current navitem
+ * @param {Roo.bootstrap.nav.Item} the new current navitem
*/
setActiveItem : function(item)
{
},
/**
* gets the active Navigation item
- * @return {Roo.bootstrap.NavItem} the current navitem
+ * @return {Roo.bootstrap.nav.Item} the current navitem
*/
getActive : function()
{
},
/**
* adds a Navigation item
- * @param {Roo.bootstrap.NavItem} the navitem to add
+ * @param {Roo.bootstrap.nav.Item} the navitem to add
*/
addItem : function(cfg)
{
if (this.form && Roo.bootstrap.version == 4) {
cfg.tag = 'div';
}
- var cn = new Roo.bootstrap.NavItem(cfg);
+ var cn = new Roo.bootstrap.nav.Item(cfg);
this.register(cn);
cn.parentId = this.id;
cn.onRender(this.el, null);
},
/**
* register a Navigation item
- * @param {Roo.bootstrap.NavItem} the navitem to add
+ * @param {Roo.bootstrap.nav.Item} the navitem to add
*/
register : function(item)
{
});
-Roo.apply(Roo.bootstrap.NavGroup, {
+Roo.apply(Roo.bootstrap.nav.Group, {
groups: {},
/**
* register a Navigation Group
- * @param {Roo.bootstrap.NavGroup} the navgroup to add
+ * @param {Roo.bootstrap.nav.Group} the navgroup to add
*/
register : function(navgrp)
{
/**
* fetch a Navigation Group based on the navigation ID
* @param {string} the navgroup to add
- * @returns {Roo.bootstrap.NavGroup} the navgroup
+ * @returns {Roo.bootstrap.nav.Group} the navgroup
*/
get: function(navId) {
if (typeof(this.groups[navId]) == 'undefined') {
return false;
- //this.register(new Roo.bootstrap.NavGroup({ navId : navId }));
+ //this.register(new Roo.bootstrap.nav.Group({ navId : navId }));
}
return this.groups[navId] ;
}
});
- /*
- * - LGPL
- *
- * row
- *
- */
-
-/**
- * @class Roo.bootstrap.NavItem
+ /**
+ * @class Roo.bootstrap.nav.Item
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Container Roo.bootstrap.Button
+ * @parent Roo.bootstrap.nav.Group
+ * @licence LGPL
* Bootstrap Navbar.NavItem class
+ *
* @cfg {String} href link to
* @cfg {String} button_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default none
* @cfg {Boolean} button_outline show and outlined button
* @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
+ * @cfg {Roo.bootstrap.menu.Menu} menu a Menu
* @constructor
* Create a new Navbar Item
* @param {Object} config The config object
*/
-Roo.bootstrap.NavItem = function(config){
- Roo.bootstrap.NavItem.superclass.constructor.call(this, config);
+Roo.bootstrap.nav.Item = function(config){
+ Roo.bootstrap.nav.Item.superclass.constructor.call(this, config);
this.addEvents({
// raw events
/**
/**
* @event changed
* Fires when the active item active state changes
- * @param {Roo.bootstrap.NavItem} this
+ * @param {Roo.bootstrap.nav.Item} this
* @param {boolean} state the new state
*/
/**
* @event scrollto
* Fires when scroll to element
- * @param {Roo.bootstrap.NavItem} this
+ * @param {Roo.bootstrap.nav.Item} this
* @param {Object} options
* @param {Roo.EventObject} e
};
-Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.nav.Item, Roo.bootstrap.Component, {
href: false,
html: '',
cfg.href = this.href;
}
if (this.fa) {
- cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + this.html + '</span>';
- }
+ cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + this.html + '</span>';
+ } else {
+ cfg.cls += " nav-html";
+ }
// menu .. should add dropdown-menu class - so no need for carat..
{
tag: this.tagtype,
href : this.href || "#",
- html: this.html || ''
+ html: this.html || '',
+ cls : ''
}
];
if (this.tagtype == 'a') {
}
if (this.icon) {
- cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>';
- }
- if (this.fa) {
- cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>';
- }
- if(this.glyphicon) {
+ cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
+ } else if (this.fa) {
+ cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
+ } else if(this.glyphicon) {
cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
- }
+ } else {
+ cfg.cn[0].cls += " nav-html";
+ }
if (this.menu) {
-
cfg.cn[0].html += " <span class='caret'></span>";
}
if (this.badge !== '') {
-
cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
}
}
this.tag = 'div';
}
- var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
+ var ret = Roo.bootstrap.nav.Item.superclass.onRender.call(this, ct, position);
this.navLink = this.el.select('.nav-link',true).first();
+ this.htmlEl = this.el.hasClass('nav-html') ? this.el : this.el.select('.nav-html',true).first();
return ret;
},
{
if (this.active && !state && this.navId) {
this.was_active = true;
- var nv = Roo.bootstrap.NavGroup.get(this.navId);
+ var nv = Roo.bootstrap.nav.Group.get(this.navId);
if (nv) {
nv.clearWasActive(this);
}
}
// 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);
+ var nv = Roo.bootstrap.nav.Group.get(this.navId);
if (nv) {
var onav = nv.getWasActive();
if (onav) {
Roo.get(c).scrollTo('top', options.value, true);
return;
- }
+ },
+ /**
+ * Set the HTML (text content) of the item
+ * @param {string} html content for the nav item
+ */
+ setHtml : function(html)
+ {
+ this.html = html;
+ this.htmlEl.dom.innerHTML = html;
+
+ }
});
*/
/**
- * @class Roo.bootstrap.NavSidebarItem
- * @extends Roo.bootstrap.NavItem
+ * @class Roo.bootstrap.nav.SidebarItem
+ * @extends Roo.bootstrap.nav.Item
* Bootstrap Navbar.NavSidebarItem class
+ *
* {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
* {Boolean} open is the menu open
* {Boolean} buttonView use button as the tigger el rather that a (default false)
* Create a new Navbar Button
* @param {Object} config The config object
*/
-Roo.bootstrap.NavSidebarItem = function(config){
- Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this, config);
+Roo.bootstrap.nav.SidebarItem = function(config){
+ Roo.bootstrap.nav.SidebarItem.superclass.constructor.call(this, config);
this.addEvents({
// raw events
/**
/**
* @event changed
* Fires when the active item active state changes
- * @param {Roo.bootstrap.NavSidebarItem} this
+ * @param {Roo.bootstrap.nav.SidebarItem} this
* @param {boolean} state the new state
*/
};
-Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, {
+Roo.extend(Roo.bootstrap.nav.SidebarItem, Roo.bootstrap.nav.Item, {
badgeWeight : 'default',
+});
+
+
+ /*
+ * - LGPL
+ *
+ * nav progress bar
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.nav.ProgressBar
+ * @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.nav.ProgressBarItem
+ * Bootstrap NavProgressBar class
+ *
+ * @constructor
+ * Create a new nav progress bar - a bar indicating step along a process
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.nav.ProgressBar = function(config){
+ Roo.bootstrap.nav.ProgressBar.superclass.constructor.call(this, config);
+
+ this.bullets = this.bullets || [];
+
+// Roo.bootstrap.nav.ProgressBar.register(this);
+ this.addEvents({
+ /**
+ * @event changed
+ * Fires when the active item changes
+ * @param {Roo.bootstrap.nav.ProgressBar} this
+ * @param {Roo.bootstrap.nav.ProgressItem} selected The item selected
+ * @param {Roo.bootstrap.nav.ProgressItem} prev The previously selected item
+ */
+ 'changed': true
+ });
+
+};
+
+Roo.extend(Roo.bootstrap.nav.ProgressBar, Roo.bootstrap.Component, {
+ /**
+ * @cfg {Roo.bootstrap.nav.ProgressItem} NavProgressBar:bullets[]
+ * Bullets for the Nav Progress bar for the toolbar
+ */
+ bullets : [],
+ barItems : [],
+
+ getAutoCreate : function()
+ {
+ var cfg = Roo.apply({}, Roo.bootstrap.nav.ProgressBar.superclass.getAutoCreate.call(this));
+
+ cfg = {
+ 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.nav.ProgressBar.superclass.onRender.call(this, ct, position);
+
+ if(this.bullets.length){
+ Roo.each(this.bullets, function(b){
+ this.addItem(b);
+ }, this);
+ }
+
+ this.format();
+
+ },
+
+ addItem : function(cfg)
+ {
+ var item = new Roo.bootstrap.nav.ProgressItem(cfg);
+
+ item.parentId = this.id;
+ item.render(this.el.select('.roo-navigation-bar', true).first(), null);
+
+ 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.barItems.push(item);
+
+ return item;
+ },
+
+ getActive : function()
+ {
+ var active = false;
+
+ Roo.each(this.barItems, function(v){
+
+ if (!v.isActive()) {
+ return;
+ }
+
+ active = v;
+ return false;
+
+ });
+
+ return active;
+ },
+
+ setActiveItem : function(item)
+ {
+ var prev = false;
+
+ Roo.each(this.barItems, function(v){
+ if (v.rid == item.rid) {
+ return ;
+ }
+
+ if (v.isActive()) {
+ v.setActive(false);
+ prev = v;
+ }
+ });
+
+ item.setActive(true);
+
+ this.fireEvent('changed', this, item, prev);
+ },
+
+ getBarItem: function(rid)
+ {
+ var ret = false;
+
+ Roo.each(this.barItems, function(e) {
+ if (e.rid != rid) {
+ return;
+ }
+
+ ret = e;
+ return false;
+ });
+
+ return ret;
+ },
+
+ indexOfItem : function(item)
+ {
+ var index = false;
+
+ Roo.each(this.barItems, function(v, i){
+
+ if (v.rid != item.rid) {
+ return;
+ }
+
+ index = i;
+ return false
+ });
+
+ return index;
+ },
+
+ setActiveNext : function()
+ {
+ var i = this.indexOfItem(this.getActive());
+
+ if (i > this.barItems.length) {
+ return;
+ }
+
+ this.setActiveItem(this.barItems[i+1]);
+ },
+
+ setActivePrev : function()
+ {
+ var i = this.indexOfItem(this.getActive());
+
+ if (i < 1) {
+ return;
+ }
+
+ this.setActiveItem(this.barItems[i-1]);
+ },
+
+ 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);
+
+ }
+
+});
+/*
+ * - LGPL
+ *
+ * Nav Progress Item
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.nav.ProgressBarItem
+ * @extends Roo.bootstrap.Component
+ * Bootstrap NavProgressBarItem class
+ * @cfg {String} rid the reference id
+ * @cfg {Boolean} active (true|false) Is item active default false
+ * @cfg {Boolean} disabled (true|false) Is item active default false
+ * @cfg {String} html
+ * @cfg {String} position (top|bottom) text position default bottom
+ * @cfg {String} icon show icon instead of number
+ *
+ * @constructor
+ * Create a new NavProgressBarItem
+ * @param {Object} config The config object
+ */
+Roo.bootstrap.nav.ProgressBarItem = function(config){
+ Roo.bootstrap.nav.ProgressBarItem.superclass.constructor.call(this, config);
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * The raw click event for the entire grid.
+ * @param {Roo.bootstrap.nav.ProgressBarItem} this
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
+
+};
+
+Roo.extend(Roo.bootstrap.nav.ProgressBarItem, Roo.bootstrap.Component, {
+
+ rid : '',
+ active : false,
+ disabled : false,
+ html : '',
+ position : 'bottom',
+ icon : false,
+
+ getAutoCreate : function()
+ {
+ var iconCls = 'roo-navigation-bar-item-icon';
+
+ iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
+
+ var cfg = {
+ tag: 'li',
+ cls: 'roo-navigation-bar-item',
+ cn : [
+ {
+ tag : 'i',
+ cls : iconCls
+ }
+ ]
+ };
+
+ if(this.active){
+ cfg.cls += ' active';
+ }
+ if(this.disabled){
+ cfg.cls += ' disabled';
+ }
+
+ return cfg;
+ },
+
+ disable : function()
+ {
+ this.setDisabled(true);
+ },
+
+ enable : function()
+ {
+ this.setDisabled(false);
+ },
+
+ initEvents: function()
+ {
+ this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
+
+ this.iconEl.on('click', this.onClick, this);
+ },
+
+ onClick : function(e)
+ {
+ e.preventDefault();
+
+ if(this.disabled){
+ return;
+ }
+
+ if(this.fireEvent('click', this, e) === false){
+ return;
+ };
+
+ this.parent().setActiveItem(this);
+ },
+
+ isActive: function ()
+ {
+ return this.active;
+ },
+
+ setActive : function(state)
+ {
+ if(this.active == state){
+ return;
+ }
+
+ this.active = state;
+
+ if (state) {
+ this.el.addClass('active');
+ return;
+ }
+
+ this.el.removeClass('active');
+
+ return;
+ },
+
+ setDisabled : function(state)
+ {
+ if(this.disabled == state){
+ return;
+ }
+
+ this.disabled = state;
+
+ if (state) {
+ this.el.addClass('disabled');
+ return;
+ }
+
+ this.el.removeClass('disabled');
+ },
+
+ tooltipEl : function()
+ {
+ return this.el.select('.roo-navigation-bar-item-icon', true).first();;
+ }
});
/**
* @class Roo.bootstrap.breadcrumb.Nav
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent Roo.bootstrap.breadcrumb.Nav
* Bootstrap Breadcrumb Nav Class
*
- * @children Roo.bootstrap.breadcrumb.Component
+ *
* @cfg {String} html the content of the link.
* @cfg {String} href where it links to if '#' is used the link will be handled by onClick.
* @cfg {Boolean} active is it active
/**
* @class Roo.bootstrap.Row
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Row class (contains columns...)
*
* @constructor
/**
* @class Roo.bootstrap.Pagination
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Pagination
* Bootstrap Pagination class
- * @cfg {String} size xs | sm | md | lg
- * @cfg {Boolean} inverse false | true
+ *
+ * @cfg {String} size (xs|sm|md|lg|xl)
+ * @cfg {Boolean} inverse
*
* @constructor
* Create a new Pagination
* Fork - LGPL
* <script type="text/javascript">
*/
+ /**
+ * @extends Roo.dd.DDProxy
+ * @class Roo.grid.SplitDragZone
+ * Support for Column Header resizing
+ * @constructor
+ * @param {Object} config
+ */
+// private
+// This is a support class used internally by the Grid components
+Roo.grid.SplitDragZone = function(grid, hd, hd2){
+ this.grid = grid;
+ this.view = grid.getView();
+ this.proxy = this.view.resizeProxy;
+ Roo.grid.SplitDragZone.superclass.constructor.call(
+ this,
+ hd, // ID
+ "gridSplitters" + this.grid.getGridEl().id, // SGROUP
+ { // CONFIG
+ dragElId : Roo.id(this.proxy.dom),
+ resizeFrame:false
+ }
+ );
+
+ this.setHandleElId(Roo.id(hd));
+ if (hd2 !== false) {
+ this.setOuterHandleElId(Roo.id(hd2));
+ }
+
+ this.scroll = false;
+};
+Roo.extend(Roo.grid.SplitDragZone, Roo.dd.DDProxy, {
+ fly: Roo.Element.fly,
+
+ b4StartDrag : function(x, y){
+ this.view.headersDisabled = true;
+ var h = this.view.mainWrap ? this.view.mainWrap.getHeight() : (
+ this.view.headEl.getHeight() + this.view.bodyEl.getHeight()
+ );
+ this.proxy.setHeight(h);
+
+ // for old system colWidth really stored the actual width?
+ // in bootstrap we tried using xs/ms/etc.. to do % sizing?
+ // which in reality did not work.. - it worked only for fixed sizes
+ // for resizable we need to use actual sizes.
+ var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ // bootstrap.
+ w = this.view.getHeaderIndex(this.cellIndex).getWidth();
+ }
+
+
+
+ // this was w-this.grid.minColumnWidth;
+ // doesnt really make sense? - w = thie curren width or the rendered one?
+ var minw = Math.max(w-this.grid.minColumnWidth, 0);
+ this.resetConstraints();
+ this.setXConstraint(minw, 1000);
+ this.setYConstraint(0, 0);
+ this.minX = x - minw;
+ this.maxX = x + 1000;
+ this.startPos = x;
+ if (!this.view.mainWrap) { // this is Bootstrap code..
+ this.getDragEl().style.display='block';
+ }
+
+ Roo.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
+ },
+
+
+ handleMouseDown : function(e){
+ ev = Roo.EventObject.setEvent(e);
+ var t = this.fly(ev.getTarget());
+ if(t.hasClass("x-grid-split")){
+ this.cellIndex = this.view.getCellIndex(t.dom);
+ this.split = t.dom;
+ this.cm = this.grid.colModel;
+ if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){
+ Roo.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments);
+ }
+ }
+ },
+
+ endDrag : function(e){
+ this.view.headersDisabled = false;
+ var endX = Math.max(this.minX, Roo.lib.Event.getPageX(e));
+ var diff = endX - this.startPos;
+ //
+ var w = this.cm.getColumnWidth(this.cellIndex);
+ if (!this.view.mainWrap) {
+ w = 0;
+ }
+ this.view.onColumnSplitterMoved(this.cellIndex, w+diff);
+ },
+
+ autoOffset : function(){
+ this.setDelta(0,0);
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+/**
+ * @class Roo.grid.AbstractSelectionModel
+ * @extends Roo.util.Observable
+ * @abstract
+ * Abstract base class for grid SelectionModels. It provides the interface that should be
+ * implemented by descendant classes. This class should not be directly instantiated.
+ * @constructor
+ */
+Roo.grid.AbstractSelectionModel = function(){
+ this.locked = false;
+ Roo.grid.AbstractSelectionModel.superclass.constructor.call(this);
+};
+
+Roo.extend(Roo.grid.AbstractSelectionModel, Roo.util.Observable, {
+ /** @ignore Called by the grid automatically. Do not call directly. */
+ init : function(grid){
+ this.grid = grid;
+ this.initEvents();
+ },
+
+ /**
+ * Locks the selections.
+ */
+ lock : function(){
+ this.locked = true;
+ },
+
+ /**
+ * Unlocks the selections.
+ */
+ unlock : function(){
+ this.locked = false;
+ },
+
+ /**
+ * Returns true if the selections are locked.
+ * @return {Boolean}
+ */
+ isLocked : function(){
+ return this.locked;
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @extends Roo.grid.AbstractSelectionModel
+ * @class Roo.grid.RowSelectionModel
+ * The default SelectionModel used by {@link Roo.grid.Grid}.
+ * It supports multiple selections and keyboard selection/navigation.
+ * @constructor
+ * @param {Object} config
+ */
+Roo.grid.RowSelectionModel = function(config){
+ Roo.apply(this, config);
+ this.selections = new Roo.util.MixedCollection(false, function(o){
+ return o.id;
+ });
+
+ this.last = false;
+ this.lastActive = false;
+
+ this.addEvents({
+ /**
+ * @event selectionchange
+ * Fires when the selection changes
+ * @param {SelectionModel} this
+ */
+ "selectionchange" : true,
+ /**
+ * @event afterselectionchange
+ * Fires after the selection changes (eg. by key press or clicking)
+ * @param {SelectionModel} this
+ */
+ "afterselectionchange" : true,
+ /**
+ * @event beforerowselect
+ * Fires when a row is selected being selected, return false to cancel.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Boolean} keepExisting False if other selections will be cleared
+ */
+ "beforerowselect" : true,
+ /**
+ * @event rowselect
+ * Fires when a row is selected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ * @param {Roo.data.Record} r The record
+ */
+ "rowselect" : true,
+ /**
+ * @event rowdeselect
+ * Fires when a row is deselected.
+ * @param {SelectionModel} this
+ * @param {Number} rowIndex The selected index
+ */
+ "rowdeselect" : true
+ });
+ Roo.grid.RowSelectionModel.superclass.constructor.call(this);
+ this.locked = false;
+};
+
+Roo.extend(Roo.grid.RowSelectionModel, Roo.grid.AbstractSelectionModel, {
+ /**
+ * @cfg {Boolean} singleSelect
+ * True to allow selection of only one row at a time (defaults to false)
+ */
+ singleSelect : false,
+
+ // private
+ initEvents : function(){
+
+ if(!this.grid.enableDragDrop && !this.grid.enableDrag){
+ this.grid.on("mousedown", this.handleMouseDown, this);
+ }else{ // allow click to work like normal
+ this.grid.on("rowclick", this.handleDragableRowClick, this);
+ }
+ // bootstrap does not have a view..
+ var view = this.grid.view ? this.grid.view : this.grid;
+ this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
+ "up" : function(e){
+ if(!e.shiftKey){
+ this.selectPrevious(e.shiftKey);
+ }else if(this.last !== false && this.lastActive !== false){
+ var last = this.last;
+ this.selectRange(this.last, this.lastActive-1);
+ view.focusRow(this.lastActive);
+ if(last !== false){
+ this.last = last;
+ }
+ }else{
+ this.selectFirstRow();
+ }
+ this.fireEvent("afterselectionchange", this);
+ },
+ "down" : function(e){
+ if(!e.shiftKey){
+ this.selectNext(e.shiftKey);
+ }else if(this.last !== false && this.lastActive !== false){
+ var last = this.last;
+ this.selectRange(this.last, this.lastActive+1);
+ view.focusRow(this.lastActive);
+ if(last !== false){
+ this.last = last;
+ }
+ }else{
+ this.selectFirstRow();
+ }
+ this.fireEvent("afterselectionchange", this);
+ },
+ scope: this
+ });
+
+
+ view.on("refresh", this.onRefresh, this);
+ view.on("rowupdated", this.onRowUpdated, this);
+ view.on("rowremoved", this.onRemove, this);
+ },
+
+ // private
+ onRefresh : function(){
+ var ds = this.grid.ds, i, v = this.grid.view;
+ var s = this.selections;
+ s.each(function(r){
+ if((i = ds.indexOfId(r.id)) != -1){
+ v.onRowSelect(i);
+ s.add(ds.getAt(i)); // updating the selection relate data
+ }else{
+ s.remove(r);
+ }
+ });
+ },
+
+ // private
+ onRemove : function(v, index, r){
+ this.selections.remove(r);
+ },
+
+ // private
+ onRowUpdated : function(v, index, r){
+ if(this.isSelected(r)){
+ v.onRowSelect(index);
+ }
+ },
+
+ /**
+ * Select records.
+ * @param {Array} records The records to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectRecords : function(records, keepExisting){
+ if(!keepExisting){
+ this.clearSelections();
+ }
+ var ds = this.grid.ds;
+ for(var i = 0, len = records.length; i < len; i++){
+ this.selectRow(ds.indexOf(records[i]), true);
+ }
+ },
+
+ /**
+ * Gets the number of selected rows.
+ * @return {Number}
+ */
+ getCount : function(){
+ return this.selections.length;
+ },
+
+ /**
+ * Selects the first row in the grid.
+ */
+ selectFirstRow : function(){
+ this.selectRow(0);
+ },
+
+ /**
+ * Select the last row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectLastRow : function(keepExisting){
+ this.selectRow(this.grid.ds.getCount() - 1, keepExisting);
+ },
+
+ /**
+ * Selects the row immediately following the last selected row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectNext : function(keepExisting){
+ if(this.last !== false && (this.last+1) < this.grid.ds.getCount()){
+ this.selectRow(this.last+1, keepExisting);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
+ }
+ },
+
+ /**
+ * Selects the row that precedes the last selected row.
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectPrevious : function(keepExisting){
+ if(this.last){
+ this.selectRow(this.last-1, keepExisting);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(this.last);
+ }
+ },
+
+ /**
+ * Returns the selected records
+ * @return {Array} Array of selected records
+ */
+ getSelections : function(){
+ return [].concat(this.selections.items);
+ },
+
+ /**
+ * Returns the first selected record.
+ * @return {Record}
+ */
+ getSelected : function(){
+ return this.selections.itemAt(0);
+ },
+
+
+ /**
+ * Clears all selections.
+ */
+ clearSelections : function(fast){
+ if(this.locked) {
+ return;
+ }
+ if(fast !== true){
+ var ds = this.grid.ds;
+ var s = this.selections;
+ s.each(function(r){
+ this.deselectRow(ds.indexOfId(r.id));
+ }, this);
+ s.clear();
+ }else{
+ this.selections.clear();
+ }
+ this.last = false;
+ },
+
+
+ /**
+ * Selects all rows.
+ */
+ selectAll : function(){
+ if(this.locked) {
+ return;
+ }
+ this.selections.clear();
+ for(var i = 0, len = this.grid.ds.getCount(); i < len; i++){
+ this.selectRow(i, true);
+ }
+ },
+
+ /**
+ * Returns True if there is a selection.
+ * @return {Boolean}
+ */
+ hasSelection : function(){
+ return this.selections.length > 0;
+ },
+
+ /**
+ * Returns True if the specified row is selected.
+ * @param {Number/Record} record The record or index of the record to check
+ * @return {Boolean}
+ */
+ isSelected : function(index){
+ var r = typeof index == "number" ? this.grid.ds.getAt(index) : index;
+ return (r && this.selections.key(r.id) ? true : false);
+ },
+
+ /**
+ * Returns True if the specified record id is selected.
+ * @param {String} id The id of record to check
+ * @return {Boolean}
+ */
+ isIdSelected : function(id){
+ return (this.selections.key(id) ? true : false);
+ },
+
+ // private
+ handleMouseDown : function(e, t)
+ {
+ var view = this.grid.view ? this.grid.view : this.grid;
+ var rowIndex;
+ if(this.isLocked() || (rowIndex = view.findRowIndex(t)) === false){
+ return;
+ };
+ if(e.shiftKey && this.last !== false){
+ var last = this.last;
+ this.selectRange(last, rowIndex, e.ctrlKey);
+ this.last = last; // reset the last
+ view.focusRow(rowIndex);
+ }else{
+ var isSelected = this.isSelected(rowIndex);
+ if(e.button !== 0 && isSelected){
+ view.focusRow(rowIndex);
+ }else if(e.ctrlKey && isSelected){
+ this.deselectRow(rowIndex);
+ }else if(!isSelected){
+ this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
+ view.focusRow(rowIndex);
+ }
+ }
+ this.fireEvent("afterselectionchange", this);
+ },
+ // private
+ handleDragableRowClick : function(grid, rowIndex, e)
+ {
+ if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
+ this.selectRow(rowIndex, false);
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.focusRow(rowIndex);
+ this.fireEvent("afterselectionchange", this);
+ }
+ },
+
+ /**
+ * Selects multiple rows.
+ * @param {Array} rows Array of the indexes of the row to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectRows : function(rows, keepExisting){
+ if(!keepExisting){
+ this.clearSelections();
+ }
+ for(var i = 0, len = rows.length; i < len; i++){
+ this.selectRow(rows[i], true);
+ }
+ },
+
+ /**
+ * Selects a range of rows. All rows in between startRow and endRow are also selected.
+ * @param {Number} startRow The index of the first row in the range
+ * @param {Number} endRow The index of the last row in the range
+ * @param {Boolean} keepExisting (optional) True to retain existing selections
+ */
+ selectRange : function(startRow, endRow, keepExisting){
+ if(this.locked) {
+ return;
+ }
+ if(!keepExisting){
+ this.clearSelections();
+ }
+ if(startRow <= endRow){
+ for(var i = startRow; i <= endRow; i++){
+ this.selectRow(i, true);
+ }
+ }else{
+ for(var i = startRow; i >= endRow; i--){
+ this.selectRow(i, true);
+ }
+ }
+ },
+
+ /**
+ * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
+ * @param {Number} startRow The index of the first row in the range
+ * @param {Number} endRow The index of the last row in the range
+ */
+ deselectRange : function(startRow, endRow, preventViewNotify){
+ if(this.locked) {
+ return;
+ }
+ for(var i = startRow; i <= endRow; i++){
+ this.deselectRow(i, preventViewNotify);
+ }
+ },
+
+ /**
+ * Selects a row.
+ * @param {Number} row The index of the row to select
+ * @param {Boolean} keepExisting (optional) True to keep existing selections
+ */
+ selectRow : function(index, keepExisting, preventViewNotify){
+ if(this.locked || (index < 0 || index >= this.grid.ds.getCount())) {
+ return;
+ }
+ if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
+ if(!keepExisting || this.singleSelect){
+ this.clearSelections();
+ }
+ var r = this.grid.ds.getAt(index);
+ this.selections.add(r);
+ this.last = this.lastActive = index;
+ if(!preventViewNotify){
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowSelect(index);
+ }
+ this.fireEvent("rowselect", this, index, r);
+ this.fireEvent("selectionchange", this);
+ }
+ },
+
+ /**
+ * Deselects a row.
+ * @param {Number} row The index of the row to deselect
+ */
+ deselectRow : function(index, preventViewNotify){
+ if(this.locked) {
+ return;
+ }
+ if(this.last == index){
+ this.last = false;
+ }
+ if(this.lastActive == index){
+ this.lastActive = false;
+ }
+ var r = this.grid.ds.getAt(index);
+ this.selections.remove(r);
+ if(!preventViewNotify){
+ var view = this.grid.view ? this.grid.view : this.grid;
+ view.onRowDeselect(index);
+ }
+ this.fireEvent("rowdeselect", this, index);
+ this.fireEvent("selectionchange", this);
+ },
+
+ // private
+ restoreLast : function(){
+ if(this._last){
+ this.last = this._last;
+ }
+ },
+
+ // private
+ acceptsNav : function(row, col, cm){
+ return !cm.isHidden(col) && cm.isCellEditable(col, row);
+ },
+
+ // private
+ onEditorKey : function(field, e){
+ var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
+ if(k == e.TAB){
+ e.stopEvent();
+ ed.completeEdit();
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
+ }
+ }else if(k == e.ENTER && !e.ctrlKey){
+ e.stopEvent();
+ ed.completeEdit();
+ if(e.shiftKey){
+ newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
+ }else{
+ newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
+ }
+ }else if(k == e.ESC){
+ ed.cancelEdit();
+ }
+ if(newCell){
+ g.startEditing(newCell[0], newCell[1]);
+ }
+ }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
/**
/**
* The config passed into the constructor
*/
- this.config = config;
+ this.config = []; //config;
this.lookup = {};
// if no id, create one
// if the column does not have a dataIndex mapping,
// map it to the order it is in the config
for(var i = 0, len = config.length; i < len; i++){
- var c = config[i];
- if(typeof c.dataIndex == "undefined"){
- c.dataIndex = i;
- }
- if(typeof c.renderer == "string"){
- c.renderer = Roo.util.Format[c.renderer];
- }
- if(typeof c.id == "undefined"){
- c.id = Roo.id();
- }
- if(c.editor && c.editor.xtype){
- c.editor = Roo.factory(c.editor, Roo.grid);
- }
- if(c.editor && c.editor.isFormField){
- c.editor = new Roo.grid.GridEditor(c.editor);
- }
- this.lookup[c.id] = c;
+ this.addColumn(config[i]);
+
}
/**
Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
/**
* @cfg {String} header The header text to display in the Grid view.
+ */
+ /**
+ * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
+ */
+ /**
+ * @cfg {String} smHeader Header at Bootsrap Small width
+ */
+ /**
+ * @cfg {String} mdHeader Header at Bootsrap Medium width
+ */
+ /**
+ * @cfg {String} lgHeader Header at Bootsrap Large width
+ */
+ /**
+ * @cfg {String} xlHeader Header at Bootsrap extra Large width
*/
/**
* @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
* @cfg {String} tooltip (Optional)
*/
/**
- * @cfg {Number} xs (Optional)
+ * @cfg {Number} xs (Optional) can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} sm (Optional)
+ * @cfg {Number} sm (Optional) can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} md (Optional)
+ * @cfg {Number} md (Optional) can be '0' for hidden at this size (number less than 12)
*/
/**
- * @cfg {Number} lg (Optional)
+ * @cfg {Number} lg (Optional) can be '0' for hidden at this size (number less than 12)
+ */
+ /**
+ * @cfg {Number} xl (Optional) can be '0' for hidden at this size (number less than 12)
*/
/**
* Returns the id of the column at the specified index.
/**
- * Returns the column for a specified dataIndex.
+ * Returns the column Object for a specified dataIndex.
* @param {String} dataIndex The column dataIndex
* @return {Object|Boolean} the column or false if not found
*/
/**
* Returns the width for the specified column.
* @param {Number} col The column index
+ * @param (optional) {String} gridSize bootstrap width size.
* @return {Number}
*/
- getColumnWidth : function(col){
- return this.config[col].width * 1 || this.defaultWidth;
+ getColumnWidth : function(col, gridSize)
+ {
+ var cfg = this.config[col];
+
+ if (typeof(gridSize) == 'undefined') {
+ return cfg.width * 1 || this.defaultWidth;
+ }
+ if (gridSize === false) { // if we set it..
+ return cfg.width || false;
+ }
+ var sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+
+ for(var i = sizes.indexOf(gridSize); i < sizes.length; i++) {
+ if (typeof(cfg[ sizes[i] ] ) == 'undefined') {
+ continue;
+ }
+ return cfg[ sizes[i] ];
+ }
+ return 1;
+
},
/**
*/
setEditor : function(col, editor){
this.config[col].editor = editor;
+ },
+ /**
+ * Add a column (experimental...) - defaults to adding to the end..
+ * @param {Object} config
+ */
+ addColumn : function(c)
+ {
+
+ var i = this.config.length;
+ this.config[i] = c;
+
+ if(typeof c.dataIndex == "undefined"){
+ c.dataIndex = i;
+ }
+ if(typeof c.renderer == "string"){
+ c.renderer = Roo.util.Format[c.renderer];
+ }
+ if(typeof c.id == "undefined"){
+ c.id = Roo.id();
+ }
+ if(c.editor && c.editor.xtype){
+ c.editor = Roo.factory(c.editor, Roo.grid);
+ }
+ if(c.editor && c.editor.isFormField){
+ c.editor = new Roo.grid.GridEditor(c.editor);
+ }
+ this.lookup[c.id] = c;
}
+
});
Roo.grid.ColumnModel.defaultRenderer = function(value)
* True to create a single-use mask that is automatically destroyed after loading (useful for page loads),
* False to persist the mask element reference for multiple uses (e.g., for paged data widgets). Defaults to false.
*/
+ removeMask : false,
/**
* @cfg {String} msg
* The text to display in a centered loading message box (defaults to 'Loading...')
um.un('failure', this.onLoad, this);
}
}
-};/*
- * - LGPL
- *
- * table
- *
- */
-
-/**
+};/**
* @class Roo.bootstrap.Table
+ * @licence LGBL
* @extends Roo.bootstrap.Component
- * Bootstrap Table class
- * @cfg {String} cls table class
- * @cfg {String} align (left|center|right) Specifies the alignment of a table according to surrounding text
- * @cfg {String} bgcolor Specifies the background color for a table
- * @cfg {Number} border Specifies whether the table cells should have borders or not
- * @cfg {Number} cellpadding Specifies the space between the cell wall and the cell content
- * @cfg {Number} cellspacing Specifies the space between cells
- * @cfg {String} frame Specifies which parts of the outside borders that should be visible
- * @cfg {String} rules Specifies which parts of the inside borders that should be visible
- * @cfg {String} sortable Specifies that the table should be sortable
- * @cfg {String} summary Specifies a summary of the content of a table
- * @cfg {Number} width Specifies the width of a table
- * @cfg {String} layout table layout (auto | fixed | initial | inherit)
+ * @children Roo.bootstrap.TableBody
+ * Bootstrap Table class. This class represents the primary interface of a component based grid control.
+ * Similar to Roo.grid.Grid
+ * <pre><code>
+ var table = Roo.factory({
+ xtype : 'Table',
+ xns : Roo.bootstrap,
+ autoSizeColumns: true,
+
+
+ store : {
+ xtype : 'Store',
+ xns : Roo.data,
+ remoteSort : true,
+ sortInfo : { direction : 'ASC', field: 'name' },
+ proxy : {
+ xtype : 'HttpProxy',
+ xns : Roo.data,
+ method : 'GET',
+ url : 'https://example.com/some.data.url.json'
+ },
+ reader : {
+ xtype : 'JsonReader',
+ xns : Roo.data,
+ fields : [ 'id', 'name', whatever' ],
+ id : 'id',
+ root : 'data'
+ }
+ },
+ cm : [
+ {
+ xtype : 'ColumnModel',
+ xns : Roo.grid,
+ align : 'center',
+ cursor : 'pointer',
+ dataIndex : 'is_in_group',
+ header : "Name",
+ sortable : true,
+ renderer : function(v, x , r) {
+
+ return String.format("{0}", v)
+ }
+ width : 3
+ } // more columns..
+ ],
+ selModel : {
+ xtype : 'RowSelectionModel',
+ xns : Roo.bootstrap.Table
+ // you can add listeners to catch selection change here....
+ }
+
+
+ });
+ // set any options
+ grid.render(Roo.get("some-div"));
+</code></pre>
+
+Currently the Table uses multiple headers to try and handle XL / Medium etc... styling
+
+
+
+ *
+ * @cfg {Roo.grid.AbstractSelectionModel} sm The selection model to use (cell selection is not supported yet)
+ * @cfg {Roo.data.Store} store The data store to use
+ * @cfg {Roo.grid.ColumnModel} cm[] A column for the grid.
*
+ * @cfg {String} cls table class
+ *
+ *
+ * @cfg {string} empty_results Text to display for no results
* @cfg {boolean} striped Should the rows be alternative striped
* @cfg {boolean} bordered Add borders to the table
* @cfg {boolean} hover Add hover highlighting
* @cfg {boolean} condensed Format condensed
- * @cfg {boolean} responsive Format condensed
+ * @cfg {boolean} responsive default false - if this is on, columns are rendered with col-xs-4 etc. classes, otherwise columns will be sized by CSS,
+ * also adds table-responsive (see bootstrap docs for details)
* @cfg {Boolean} loadMask (true|false) default false
* @cfg {Boolean} footerShow (true|false) generate tfoot, default true
* @cfg {Boolean} headerShow (true|false) generate thead, default true
* @cfg {Boolean} rowSelection (true|false) default false
* @cfg {Boolean} cellSelection (true|false) default false
- * @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header
+ * @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header (with resizable columns)
* @cfg {Roo.bootstrap.PagingToolbar} footer a paging toolbar
* @cfg {Boolean} lazyLoad auto load data while scrolling to the end (default false)
* @cfg {Boolean} auto_hide_footer auto hide footer if only one page (default false)
-
+ * @cfg {Boolean} enableColumnResize default true if columns can be resized = needs scrollBody to be set to work (drag/drop)
+ *
+ *
+ * @cfg {Number} minColumnWidth default 50 pixels minimum column width
*
* @constructor
* Create a new Table
* @param {Object} config The config object
*/
-Roo.bootstrap.Table = function(config){
+Roo.bootstrap.Table = function(config)
+{
Roo.bootstrap.Table.superclass.constructor.call(this, config);
-
-
-
+
// BC...
this.rowSelection = (typeof(config.rowSelection) != 'undefined') ? config.rowSelection : this.rowSelection;
this.cellSelection = (typeof(config.cellSelection) != 'undefined') ? config.cellSelection : this.cellSelection;
this.headerShow = (typeof(config.thead) != 'undefined') ? config.thead : this.headerShow;
this.footerShow = (typeof(config.tfoot) != 'undefined') ? config.tfoot : this.footerShow;
+ this.view = this; // compat with grid.
+
this.sm = this.sm || {xtype: 'RowSelectionModel'};
if (this.sm) {
this.sm.grid = this;
- this.selModel = Roo.factory(this.sm, Roo.bootstrap.Table);
+ this.selModel = Roo.factory(this.sm, Roo.grid);
this.sm = this.selModel;
this.sm.xmodule = this.xmodule || false;
}
* @param {Number} columnIndex
* @param {Roo.EventObject} e
*/
- "headercontextmenu" : true
+ "headercontextmenu" : true,
+ /**
+ * @event mousedown
+ * The raw mousedown event for the entire grid.
+ * @param {Roo.EventObject} e
+ */
+ "mousedown" : true
+
});
};
Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
cls: false,
- align: false,
- bgcolor: false,
- border: false,
- cellpadding: false,
- cellspacing: false,
- frame: false,
- rules: false,
- sortable: false,
- summary: false,
- width: false,
+
+ empty_results : '',
striped : false,
scrollBody : false,
bordered: false,
loadMask : false,
footerShow : true,
headerShow : true,
+ enableColumnResize: true,
rowSelection : false,
cellSelection : false,
layout : false,
+
+ minColumnWidth : 50,
// Roo.Element - the tbody
- mainBody: false,
- // Roo.Element - thead element
- mainHead: false,
+ bodyEl: false, // <tbody> Roo.Element - thead element
+ headEl: false, // <thead> Roo.Element - thead element
+ resizeProxy : false, // proxy element for dragging?
+
+
container: false, // used by gridpanel...
auto_hide_footer : false,
+ view: false, // actually points to this..
+
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
cfg = {
tag: 'table',
- cls : 'table',
+ cls : 'table',
cn : []
};
+ // this get's auto added by panel.Grid
if (this.scrollBody) {
cfg.cls += ' table-body-fixed';
}
if (this.condensed) {
cfg.cls += ' table-condensed';
}
+
if (this.responsive) {
cfg.cls += ' table-responsive';
}
cfg.cls+= ' ' +this.cls;
}
- // this lot should be simplifed...
- var _t = this;
- var cp = [
- 'align',
- 'bgcolor',
- 'border',
- 'cellpadding',
- 'cellspacing',
- 'frame',
- 'rules',
- 'sortable',
- 'summary',
- 'width'
- ].forEach(function(k) {
- if (_t[k]) {
- cfg[k] = _t[k];
- }
- });
if (this.layout) {
//Roo.log('initEvents with ds!!!!');
- this.mainBody = this.el.select('tbody', true).first();
- this.mainHead = this.el.select('thead', true).first();
+ this.bodyEl = this.el.select('tbody', true).first();
+ this.headEl = this.el.select('thead', true).first();
this.mainFoot = this.el.select('tfoot', true).first();
- var _this = this;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
- e.on('click', _this.sort, _this);
- });
+ e.on('click', this.sort, this);
+ }, this);
- this.mainBody.on("click", this.onClick, this);
- this.mainBody.on("dblclick", this.onDblClick, this);
// why is this done????? = it breaks dialogs??
//this.parent().el.setStyle('position', 'relative');
this.el.on("contextmenu", this.onContextMenu, this);
- this.mainBody.on('scroll', this.onBodyScroll, this);
this.cm.on("headerchange", this.onHeaderChange, this);
-
this.cm.on("hiddenchange", this.onHiddenChange, this, arguments);
+
+ //?? does bodyEl get replaced on render?
+ this.bodyEl.on("click", this.onClick, this);
+ this.bodyEl.on("dblclick", this.onDblClick, this);
+ this.bodyEl.on('scroll', this.onBodyScroll, this);
+
+ // guessing mainbody will work - this relays usually caught by selmodel at present.
+ this.relayEvents(this.bodyEl, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
+
+
+ this.resizeProxy = Roo.get(document.body).createChild({ cls:"x-grid-resize-proxy", html: ' ' });
+
+
+ if(this.headEl && this.enableColumnResize !== false && Roo.grid.SplitDragZone){
+ new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
+ }
+ this.initCSS();
+ },
+ // Compatibility with grid - we implement all the view features at present.
+ getView : function()
+ {
+ return this;
},
+ initCSS : function()
+ {
+
+
+ var cm = this.cm, styles = [];
+ this.CSS.removeStyleSheet(this.id + '-cssrules');
+ var headHeight = this.headEl ? this.headEl.dom.clientHeight : 0;
+ // we can honour xs/sm/md/xl as widths...
+ // we first have to decide what widht we are currently at...
+ var sz = Roo.getGridSize();
+
+ var total = 0;
+ var last = -1;
+ var cols = []; // visable cols.
+ var total_abs = 0;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
+ var w = cm.getColumnWidth(i, false);
+ if(cm.isHidden(i)){
+ cols.push( { rel : false, abs : 0 });
+ continue;
+ }
+ if (w !== false) {
+ cols.push( { rel : false, abs : w });
+ total_abs += w;
+ last = i; // not really..
+ continue;
+ }
+ var w = cm.getColumnWidth(i, sz);
+ if (w > 0) {
+ last = i
+ }
+ total += w;
+ cols.push( { rel : w, abs : false });
+ }
+
+ var avail = this.bodyEl.dom.clientWidth - total_abs;
+
+ var unitWidth = Math.floor(avail / total);
+ var rem = avail - (unitWidth * total);
+
+ var hidden, width, pos = 0 , splithide , left;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
+
+ hidden = 'display:none;';
+ left = '';
+ width = 'width:0px;';
+ splithide = '';
+ if(!cm.isHidden(i)){
+ hidden = '';
+
+
+ // we can honour xs/sm/md/xl ?
+ var w = cols[i].rel == false ? cols[i].abs : (cols[i].rel * unitWidth);
+ if (w===0) {
+ hidden = 'display:none;';
+ }
+ // width should return a small number...
+ if (i == last) {
+ w+=rem; // add the remaining with..
+ }
+ pos += w;
+ left = "left:" + (pos -4) + "px;";
+ width = "width:" + w+ "px;";
+
+ }
+ if (this.responsive) {
+ width = '';
+ left = '';
+ hidden = cm.isHidden(i) ? 'display:none;' : '';
+ splithide = 'display: none;';
+ }
+
+ styles.push( '#' , this.id , ' .x-col-' , i, " {", cm.config[i].css, width, hidden, "}\n" );
+ if (this.headEl) {
+ if (i == last) {
+ splithide = 'display:none;';
+ }
+
+ styles.push('#' , this.id , ' .x-hcol-' , i, " { ", width, hidden," }\n",
+ '#' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', (headHeight - 4), "px;}\n",
+ // this is the popover version..
+ '.popover-inner #' , this.id , ' .x-grid-split-' , i, " { ", left, splithide, 'height:', 100, "%;}\n"
+ );
+ }
+
+ }
+ //Roo.log(styles.join(''));
+ this.CSS.createStyleSheet( styles.join(''), this.id + '-cssrules');
+
+ },
+
+
+
onContextMenu : function(e, t)
{
this.processEvent("contextmenu", e);
var rowIndex = this.getRowIndex(row);
// why??? - should these not be based on SelectionModel?
- if(this.cellSelection){
+ //if(this.cellSelection){
this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
- }
+ //}
- if(this.rowSelection){
+ //if(this.rowSelection){
this.fireEvent('rowclick', this, row, rowIndex, e);
- }
-
-
+ //}
+
},
onDblClick : function(e,el)
this.fireEvent('rowdblclick', this, row, rowIndex, e);
}
},
-
+ findRowIndex : function(el)
+ {
+ var cell = Roo.get(el);
+ if(!cell) {
+ return false;
+ }
+ var row = cell.findParent('tr', false, true);
+
+ if(!row || typeof(row) == 'undefined'){
+ return false;
+ }
+ return this.getRowIndex(row);
+ },
sort : function(e,el)
{
var col = Roo.get(el);
var sort = col.attr('sort');
var dir = 'ASC';
- if(col.select('i', true).first().hasClass('glyphicon-arrow-up')){
+ if(col.select('i', true).first().hasClass('fa-arrow-up')){
dir = 'DESC';
}
tag: 'th',
cls : 'x-hcol-' + i,
style : '',
+
html: cm.getColumnHeader(i)
};
+ var tooltip = cm.getColumnTooltip(i);
+ if (tooltip) {
+ c.tooltip = tooltip;
+ }
+
+
var hh = '';
if(typeof(config.sortable) != 'undefined' && config.sortable){
- c.cls = 'sortable';
- c.html = '<i class="glyphicon"></i>' + c.html;
+ c.cls += ' sortable';
+ c.html = '<i class="fa"></i>' + c.html;
}
// could use BS4 hidden-..-down
c.colspan = config.colspan;
}
- if(typeof(config.hidden) != 'undefined' && config.hidden){
- c.style += ' display:none;';
- }
+ // hidden is handled by CSS now
if(typeof(config.dataIndex) != 'undefined'){
c.sort = config.dataIndex;
c.style += ' text-align:' + config.align + ';';
}
- if(typeof(config.width) != 'undefined'){
+ /* width is done in CSS
+ *if(typeof(config.width) != 'undefined'){
c.style += ' width:' + config.width + 'px;';
this.totalWidth += config.width;
} else {
this.totalWidth += 100; // assume minimum of 100 per column?
}
+ */
if(typeof(config.cls) != 'undefined'){
c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
}
+ // this is the bit that doesnt reall work at all...
- ['xs','sm','md','lg'].map(function(size){
-
- if(typeof(config[size]) == 'undefined'){
- return;
- }
+ if (this.responsive) {
- if (!config[size]) { // 0 = hidden
- // BS 4 '0' is treated as hide that column and below.
- c.cls += ' hidden-' + size + ' hidden' + size + '-down';
- return;
- }
-
- c.cls += ' col-' + size + '-' + config[size] + (
- size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
- );
-
-
- });
+
+ ['xs','sm','md','lg'].map(function(size){
+
+ if(typeof(config[size]) == 'undefined'){
+ return;
+ }
+
+ if (!config[size]) { // 0 = hidden
+ // BS 4 '0' is treated as hide that column and below.
+ c.cls += ' hidden-' + size + ' hidden' + size + '-down';
+ return;
+ }
+
+ c.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
+
+ });
+ }
+ // at the end?
+
+ c.html +=' <span class="x-grid-split x-grid-split-' + i + '"></span>';
+
+
+
header.cn.push(c)
}
var ds = this.store;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
- e.select('i', true).removeClass(['glyphicon-arrow-up', 'glyphicon-arrow-down']);
+ e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']);
if (_this.store.sortInfo) {
if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
- e.select('i', true).addClass(['glyphicon-arrow-up']);
+ e.select('i', true).addClass(['fa-arrow-up']);
}
if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
- e.select('i', true).addClass(['glyphicon-arrow-down']);
+ e.select('i', true).addClass(['fa-arrow-down']);
}
}
});
- var tbody = this.mainBody;
+ var tbody = this.bodyEl;
if(ds.getCount() > 0){
ds.data.each(function(d,rowIndex){
}
}, this);
+ } else if (this.empty_results.length) {
+ this.el.mask(this.empty_results, 'no-spinner');
}
var tfoot = this.el.select('tfoot', true).first();
this.fireEvent('rowsrendered', this);
this.autoSize();
+
+ this.initCSS(); /// resize cols
+
+
},
if(isUpdate !== true){
this.fireEvent("beforerowremoved", this, index, record);
}
- var bt = this.mainBody.dom;
+ var bt = this.bodyEl.dom;
var rows = this.el.select('tbody > tr', true).elements;
{
//Roo.log('on Add called');
// - note this does not handle multiple adding very well..
- var bt = this.mainBody.dom;
+ var bt = this.bodyEl.dom;
for (var i =0 ; i < records.length;i++) {
//Roo.log('call insert row Add called on ' + rowIndex + ':' + i);
//Roo.log(records[i]);
//this.layout();
this.fireEvent("rowupdated", this, index, record);
},
+ // private - called by RowSelection
+ onRowSelect : function(rowIndex){
+ var row = this.getRowDom(rowIndex);
+ row.addClass(['bg-info','info']);
+ },
+ // private - called by RowSelection
+ onRowDeselect : function(rowIndex)
+ {
+ if (rowIndex < 0) {
+ return;
+ }
+ var row = this.getRowDom(rowIndex);
+ row.removeClass(['bg-info','info']);
+ },
+ /**
+ * Focuses the specified row.
+ * @param {Number} row The row index
+ */
+ focusRow : function(row)
+ {
+ //Roo.log('GridView.focusRow');
+ var x = this.bodyEl.dom.scrollLeft;
+ this.focusCell(row, 0, false);
+ this.bodyEl.dom.scrollLeft = x;
+
+ },
+ /**
+ * Focuses the specified cell.
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
+ */
+ focusCell : function(row, col, hscroll)
+ {
+ //Roo.log('GridView.focusCell');
+ var el = this.ensureVisible(row, col, hscroll);
+ // not sure what focusEL achives = it's a <a> pos relative
+ //this.focusEl.alignTo(el, "tl-tl");
+ //if(Roo.isGecko){
+ // this.focusEl.focus();
+ //}else{
+ // this.focusEl.focus.defer(1, this.focusEl);
+ //}
+ },
+
+ /**
+ * Scrolls the specified cell into view
+ * @param {Number} row The row index
+ * @param {Number} col The column index
+ * @param {Boolean} hscroll false to disable horizontal scrolling
+ */
+ ensureVisible : function(row, col, hscroll)
+ {
+ //Roo.log('GridView.ensureVisible,' + row + ',' + col);
+ //return null; //disable for testing.
+ if(typeof row != "number"){
+ row = row.rowIndex;
+ }
+ if(row < 0 && row >= this.ds.getCount()){
+ return null;
+ }
+ col = (col !== undefined ? col : 0);
+ var cm = this.cm;
+ while(cm.isHidden(col)){
+ col++;
+ }
+
+ var el = this.getCellDom(row, col);
+ if(!el){
+ return null;
+ }
+ var c = this.bodyEl.dom;
+
+ var ctop = parseInt(el.offsetTop, 10);
+ var cleft = parseInt(el.offsetLeft, 10);
+ var cbot = ctop + el.offsetHeight;
+ var cright = cleft + el.offsetWidth;
+
+ //var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
+ var ch = 0; //?? header is not withing the area?
+ var stop = parseInt(c.scrollTop, 10);
+ var sleft = parseInt(c.scrollLeft, 10);
+ var sbot = stop + ch;
+ var sright = sleft + c.clientWidth;
+ /*
+ Roo.log('GridView.ensureVisible:' +
+ ' ctop:' + ctop +
+ ' c.clientHeight:' + c.clientHeight +
+ ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
+ ' stop:' + stop +
+ ' cbot:' + cbot +
+ ' sbot:' + sbot +
+ ' ch:' + ch
+ );
+ */
+ if(ctop < stop){
+ c.scrollTop = ctop;
+ //Roo.log("set scrolltop to ctop DISABLE?");
+ }else if(cbot > sbot){
+ //Roo.log("set scrolltop to cbot-ch");
+ c.scrollTop = cbot-ch;
+ }
+
+ if(hscroll !== false){
+ if(cleft < sleft){
+ c.scrollLeft = cleft;
+ }else if(cright > sright){
+ c.scrollLeft = cright-c.clientWidth;
+ }
+ }
+
+ return el;
+ },
+
insertRow : function(dm, rowIndex, isUpdate){
//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));
+ var e = this.bodyEl.createChild(row,this.getRowDom(rowIndex));
var _this = this;
return (typeof(rows[rowIndex]) == 'undefined') ? false : rows[rowIndex];
},
+ getCellDom : function(rowIndex, colIndex)
+ {
+ var row = this.getRowDom(rowIndex);
+ if (row === false) {
+ return false;
+ }
+ var cols = row.select('td', true).elements;
+ return (typeof(cols[colIndex]) == 'undefined') ? false : cols[colIndex];
+
+ },
+
// returns the object tree for a tr..
var td = {
tag: 'td',
+ // this might end up displaying HTML?
+ // this is too messy... - better to only do it on columsn you know are going to be too long
+ //tooltip : (typeof(value) === 'object') ? '' : value,
cls : rowcfg.rowClass + ' x-col-' + i,
style: '',
html: (typeof(value) === 'object') ? '' : value
td.colspan = config.colspan;
}
- 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.valign) != 'undefined' && config.valign.length){
td.style += ' vertical-align:' + config.valign + ';';
}
-
+ /*
if(typeof(config.width) != 'undefined'){
td.style += ' width:' + config.width + 'px;';
}
+ */
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);
}
-
- ['xs','sm','md','lg'].map(function(size){
-
- if(typeof(config[size]) == 'undefined'){
- return;
- }
-
-
-
- if (!config[size]) { // 0 = hidden
- // BS 4 '0' is treated as hide that column and below.
- td.cls += ' hidden-' + size + ' hidden' + size + '-down';
- return;
- }
-
- td.cls += ' col-' + size + '-' + config[size] + (
- size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
- );
-
-
- });
-
+ if (this.responsive) {
+ ['xs','sm','md','lg'].map(function(size){
+
+ if(typeof(config[size]) == 'undefined'){
+ return;
+ }
+
+
+
+ if (!config[size]) { // 0 = hidden
+ // BS 4 '0' is treated as hide that column and below.
+ td.cls += ' hidden-' + size + ' hidden' + size + '-down';
+ return;
+ }
+
+ td.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
+
+ });
+ }
row.cn.push(td);
}
onBeforeLoad : function()
{
-
+ this.el.unmask(); // if needed.
},
/**
* Remove all rows
*/
setRowVisibility : function(rowIndex, state)
{
- var bt = this.mainBody.dom;
+ var bt = this.bodyEl.dom;
var rows = this.el.select('tbody > tr', true).elements;
if(typeof(rows[rowIndex]) == 'undefined'){
return;
}
- rows[rowIndex].dom.style.display = state ? '' : 'none';
+ rows[rowIndex][ state ? 'removeClass' : 'addClass']('d-none');
+
},
})
}
},
-
+ /**
+ * get the Row Index from a dom element.
+ * @param {Roo.Element} row The row to look for
+ * @returns {Number} the row
+ */
getRowIndex : function(row)
{
var rowIndex = -1;
});
return rowIndex;
+ },
+ /**
+ * get the header TH element for columnIndex
+ * @param {Number} columnIndex
+ * @returns {Roo.Element}
+ */
+ getHeaderIndex: function(colIndex)
+ {
+ var cols = this.headEl.select('th', true).elements;
+ return cols[colIndex];
+ },
+ /**
+ * get the Column Index from a dom element. (using regex on x-hcol-{colid})
+ * @param {domElement} cell to look for
+ * @returns {Number} the column
+ */
+ getCellIndex : function(cell)
+ {
+ var id = String(cell.className).match(Roo.bootstrap.Table.cellRE);
+ if(id){
+ return parseInt(id[1], 10);
+ }
+ return 0;
},
/**
* Returns the grid's underlying element = used by panel.Grid
}
cw = Math.max(cw, this.totalWidth);
this.getGridEl().select('tbody tr',true).setWidth(cw);
+ this.initCSS();
// resize 'expandable coloumn?
},
onBodyScroll: function()
{
- //Roo.log("body scrolled');" + this.mainBody.dom.scrollLeft);
- if(this.mainHead){
- this.mainHead.setStyle({
+ //Roo.log("body scrolled');" + this.bodyEl.dom.scrollLeft);
+ if(this.headEl){
+ this.headEl.setStyle({
'position' : 'relative',
- 'left': (-1* this.mainBody.dom.scrollLeft) + 'px'
+ 'left': (-1* this.bodyEl.dom.scrollLeft) + 'px'
});
}
if(this.lazyLoad){
- var scrollHeight = this.mainBody.dom.scrollHeight;
+ var scrollHeight = this.bodyEl.dom.scrollHeight;
- var scrollTop = Math.ceil(this.mainBody.getScroll().top);
+ var scrollTop = Math.ceil(this.bodyEl.getScroll().top);
- var height = this.mainBody.getHeight();
+ var height = this.bodyEl.getHeight();
if(scrollHeight - height == scrollTop) {
}
},
-
+ onColumnSplitterMoved : function(i, diff)
+ {
+ this.userResized = true;
+
+ var cm = this.colModel;
+
+ var w = this.getHeaderIndex(i).getWidth() + diff;
+
+
+ cm.setColumnWidth(i, w, true);
+ this.initCSS();
+ //var cid = cm.getColumnId(i); << not used in this version?
+ /* Roo.log(['#' + this.id + ' .x-col-' + i, "width", w + "px"]);
+
+ this.CSS.updateRule( '#' + this.id + ' .x-col-' + i, "width", w + "px");
+ this.CSS.updateRule('#' + this.id + ' .x-hcol-' + i, "width", w + "px");
+ this.CSS.updateRule('#' + this.id + ' .x-grid-split-' + i, "left", w + "px");
+*/
+ //this.updateSplitters();
+ //this.layout(); << ??
+ this.fireEvent("columnresize", i, w);
+ },
onHeaderChange : function()
{
var header = this.renderHeader();
var table = this.el.select('table', true).first();
- this.mainHead.remove();
- this.mainHead = table.createChild(header, this.mainBody, false);
+ this.headEl.remove();
+ this.headEl = table.createChild(header, this.bodyEl, false);
+
+ Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
+ e.on('click', this.sort, this);
+ }, this);
+
+ if(this.enableColumnResize !== false && Roo.grid.SplitDragZone){
+ new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
+ }
+
},
onHiddenChange : function(colModel, colIndex, hidden)
{
+ /*
+ this.cm.setHidden()
var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
this.CSS.updateRule(thSelector, "display", "none");
this.CSS.updateRule(tdSelector, "display", "none");
}
-
+ */
+ // onload calls initCSS()
this.onHeaderChange();
this.onLoad();
},
}
});
-
+// currently only used to find the split on drag..
+Roo.bootstrap.Table.cellRE = /(?:.*?)x-grid-(?:hd|cell|split)-([\d]+)(?:.*?)/;
- /*
+/**
+ * @depricated
+*/
+Roo.bootstrap.Table.AbstractSelectionModel = Roo.grid.AbstractSelectionModel;
+Roo.bootstrap.Table.RowSelectionModel = Roo.grid.RowSelectionModel;
+/*
* - LGPL
*
* table cell
/**
* @class Roo.bootstrap.TableCell
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent Roo.bootstrap.TableRow
* Bootstrap TableCell class
+ *
* @cfg {String} html cell contain text
* @cfg {String} cls cell class
* @cfg {String} tag cell tag (td|th) default td
/**
* @class Roo.bootstrap.TableRow
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.TableCell
+ * @parent Roo.bootstrap.TableBody
* Bootstrap TableRow class
* @cfg {String} cls row class
* @cfg {String} align Aligns the content in a table row
/**
* @class Roo.bootstrap.TableBody
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.TableRow
+ * @parent Roo.bootstrap.Table
* Bootstrap TableBody class
* @cfg {String} cls element class
* @cfg {String} tag element tag (thead|tbody|tfoot) default tbody
*/
/**
- * @class Roo.bootstrap.Form
+ * @class Roo.bootstrap.form.Form
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Form class
* @cfg {String} method GET | POST (default POST)
* @cfg {String} labelAlign top | left (default top)
*/
-Roo.bootstrap.Form = function(config){
+Roo.bootstrap.form.Form = function(config){
- Roo.bootstrap.Form.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.Form.superclass.constructor.call(this, config);
- Roo.bootstrap.Form.popover.apply();
+ Roo.bootstrap.form.Form.popover.apply();
this.addEvents({
/**
});
};
-Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.form.Form, Roo.bootstrap.Component, {
/**
* @cfg {String} method
});
if(this.errorMask && !valid){
- Roo.bootstrap.Form.popover.mask(this, target);
+ Roo.bootstrap.form.Form.popover.mask(this, target);
}
return valid;
});
-Roo.apply(Roo.bootstrap.Form, {
+Roo.apply(Roo.bootstrap.form.Form, {
popover : {
this.toolTip.show(tip);
this.intervalID = window.setInterval(function() {
- Roo.bootstrap.Form.popover.unmask();
+ Roo.bootstrap.form.Form.popover.unmask();
}, 10000);
window.onwheel = function(){ return false;};
/**
* @class Roo.form.VTypes
* Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
- * @singleton
+ * @static
*/
Roo.form.VTypes = function(){
// closure these in so they are only created once.
*/
/**
- * @class Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.Input
* @extends Roo.bootstrap.Component
* Bootstrap Input class
* @cfg {Boolean} disabled is it disabled
- * @cfg {String} (button|checkbox|email|file|hidden|image|number|password|radio|range|reset|search|submit|text) inputType
+ * @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} placeholder - placeholder to put in text.
- * @cfg {string} before - input group add on before
+ * @cfg {string} before - input group add on before
* @cfg {string} after - input group add on after
* @cfg {string} size - (lg|sm) or leave empty..
* @cfg {Number} xs colspan out of 12 for mobile-sized screens
* @cfg {String} capture (user|camera) use for file input only. (default empty)
* @cfg {String} accept (image|video|audio) use for file input only. (default empty)
* @cfg {Boolean} preventMark Do not show tick or cross if error/success
-
+ * @cfg {Roo.bootstrap.Button} before Button to show before
+ * @cfg {Roo.bootstrap.Button} afterButton to show before
* @cfg {String} align (left|center|right) Default left
* @cfg {Boolean} forceFeedback (true|false) Default false
*
* @param {Object} config The config object
*/
-Roo.bootstrap.Input = function(config){
+Roo.bootstrap.form.Input = function(config){
- Roo.bootstrap.Input.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.Input.superclass.constructor.call(this, config);
this.addEvents({
/**
});
};
-Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.form.Input, Roo.bootstrap.Component, {
/**
* @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
automatic validation (defaults to "keyup").
}
if(this.labelWidth < 13 && this.labelmd == 0){
- this.labelmd = this.labelWidth;
+ this.labellg = this.labellg > 0 ? this.labellg : this.labelWidth;
}
if(this.labellg > 0){
*/
/**
- * @class Roo.bootstrap.TextArea
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.TextArea
+ * @extends Roo.bootstrap.form.Input
* Bootstrap TextArea class
* @cfg {Number} cols Specifies the visible width of a text area
* @cfg {Number} rows Specifies the visible number of lines in a text area
* @param {Object} config The config object
*/
-Roo.bootstrap.TextArea = function(config){
- Roo.bootstrap.TextArea.superclass.constructor.call(this, config);
+Roo.bootstrap.form.TextArea = function(config){
+ Roo.bootstrap.form.TextArea.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.TextArea, Roo.bootstrap.form.Input, {
cols : false,
rows : 5,
*/
/**
- * @class Roo.bootstrap.TriggerField
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.TriggerField
+ * @extends Roo.bootstrap.form.Input
* Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
* The trigger has no default action, so you must assign a function to implement the trigger click handler by
* overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
* for which you can provide a custom implementation. For example:
* <pre><code>
-var trigger = new Roo.bootstrap.TriggerField();
+var trigger = new Roo.bootstrap.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyTo('my-field');
</code></pre>
*
* However, in general you will most likely want to use TriggerField as the base class for a reusable component.
- * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
+ * {@link Roo.bootstrap.form.DateField} and {@link Roo.bootstrap.form.ComboBox} are perfect examples of this.
* @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
* @cfg {String} caret (search|calendar) BS3 only - carat fa name
* @constructor
* Create a new TriggerField.
- * @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied
+ * @param {Object} config Configuration options (valid {@Roo.bootstrap.form.Input} config options will also be applied
* to the base TextField)
*/
-Roo.bootstrap.TriggerField = function(config){
+Roo.bootstrap.form.TriggerField = function(config){
this.mimicing = false;
- Roo.bootstrap.TriggerField.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.TriggerField.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.TriggerField, Roo.bootstrap.form.Input, {
/**
* @cfg {String} triggerClass A CSS class to apply to the trigger
*/
// private
onResize : function(w, h){
-// Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments);
+// Roo.bootstrap.form.TriggerField.superclass.onResize.apply(this, arguments);
// if(typeof w == 'number'){
// var x = w - this.trigger.getWidth();
// this.inputEl().setWidth(this.adjustWidth('input', x));
this.createList();
- Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
+ Roo.bootstrap.form.TriggerField.superclass.initEvents.call(this);
//this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
if(!this.multiple && this.showToggleBtn){
this.trigger = this.el.select('span.dropdown-toggle',true).first();
//if(this.wrap){
// this.wrap.remove();
//}
- Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
+ Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
},
// private
onFocus : function(){
- Roo.bootstrap.TriggerField.superclass.onFocus.call(this);
+ Roo.bootstrap.form.TriggerField.superclass.onFocus.call(this);
/*
if(!this.mimicing){
this.wrap.addClass('x-trigger-wrap-focus');
this.el.un("keydown", this.checkTab, this);
}
//this.wrap.removeClass('x-trigger-wrap-focus');
- Roo.bootstrap.TriggerField.superclass.onBlur.call(this);
+ Roo.bootstrap.form.TriggerField.superclass.onBlur.call(this);
},
// private
// private
onDisable : function(){
this.inputEl().dom.disabled = true;
- //Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
+ //Roo.bootstrap.form.TriggerField.superclass.onDisable.call(this);
//if(this.wrap){
// this.wrap.addClass('x-item-disabled');
//}
// private
onEnable : function(){
this.inputEl().dom.disabled = false;
- //Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
+ //Roo.bootstrap.form.TriggerField.superclass.onEnable.call(this);
//if(this.wrap){
// this.el.removeClass('x-item-disabled');
//}
*/
/**
- * @class Roo.bootstrap.CardUploader
+ * @class Roo.bootstrap.form.CardUploader
* @extends Roo.bootstrap.Button
* Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
* @cfg {Number} errorTimeout default 3000
* @param {Object} config The config object
*/
-Roo.bootstrap.CardUploader = function(config){
+Roo.bootstrap.form.CardUploader = function(config){
- Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.CardUploader.superclass.constructor.call(this, config);
this.fileCollection = new Roo.util.MixedCollection(false,function(r) {
});
};
-Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.CardUploader, Roo.bootstrap.form.Input, {
errorTimeout : 3000,
initEvents : function()
{
- Roo.bootstrap.Input.prototype.initEvents.call(this);
+ Roo.bootstrap.form.Input.prototype.initEvents.call(this);
var t = this;
this.addxtype({
var url = _this.urlAPI.createObjectURL( file);
this.addCard({
- id : Roo.bootstrap.CardUploader.ID--,
+ id : Roo.bootstrap.form.CardUploader.ID--,
is_uploaded : false,
src : url,
srcfile : file,
});
-Roo.bootstrap.CardUploader.ID = -1;/*
+Roo.bootstrap.form.CardUploader.ID = -1;/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
* @class Roo.data.SortTypes
- * @singleton
+ * @static
* Defines the default sorting (casting?) comparison functions used when sorting data.
*/
Roo.data.SortTypes = {
*/
/**
- * @cfg {Roo.data.DataProxy} proxy The Proxy object which provides access to a data object.
+ * @cfg {Roo.data.DataProxy} proxy [required] The Proxy object which provides access to a data object.
*/
/**
* @cfg {Array} data Inline data to be loaded when the store is initialized.
*/
/**
- * @cfg {Roo.data.Reader} reader The Reader object which processes the data object and returns
+ * @cfg {Roo.data.DataReader} reader [required] The Reader object which processes the data object and returns
* an Array of Roo.data.record objects which are cached keyed by their <em>id</em> property.
*/
/**
// private
// Called as a callback by the Reader during a load operation.
loadRecords : function(o, options, success){
- if(!o || success === false){
+
+ if(!o){
if(success !== false){
this.fireEvent("load", this, [], options, o);
}
* @cfg {Array} fields An array of field definition objects, or field name strings.
* @cfg {Object} an existing reader (eg. copied from another store)
* @cfg {Array} data The multi-dimensional array of data
+ * @cfg {Roo.data.DataProxy} proxy [not-required]
+ * @cfg {Roo.data.Reader} reader [not-required]
* @constructor
* @param {Object} config
*/
/**
* @class Roo.data.DataReader
+ * @abstract
* Base class for reading structured data from a data source. This class is intended to be
* extended (see {Roo.data.ArrayReader}, {Roo.data.JsonReader} and {Roo.data.XmlReader}) and should not be created directly.
*/
/**
* @class Roo.data.DataProxy
- * @extends Roo.data.Observable
+ * @extends Roo.util.Observable
+ * @abstract
* This class is an abstract base class for implementations which provide retrieval of
* unformatted data objects.<br>
* <p>
result = o.reader.read(response);
}catch(e){
this.fireEvent("loadexception", this, o, response, e);
- o.request.callback.call(o.request.scope, null, o.request.arg, false);
+ o.request.callback.call(o.request.scope, {
+ success : false,
+ raw : {
+ errorMsg : response.responseText
+ }
+
+ }, o.request.arg, false);
return;
}
readRecords : function(o)
{
var sid = this.meta ? this.meta.id : null;
- var recordType = this.recordType, fields = recordType.prototype.fields;
- var records = [];
- var root = o;
- for(var i = 0; i < root.length; i++){
- var n = root[i];
- var values = {};
- var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
- for(var j = 0, jlen = fields.length; j < jlen; j++){
- var f = fields.items[j];
- var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
- var v = n[k] !== undefined ? n[k] : f.defaultValue;
- v = f.convert(v);
- values[f.name] = v;
- }
- var record = new recordType(values, id);
- record.json = n;
- records[records.length] = record;
- }
- return {
- records : records,
- totalRecords : records.length
- };
+ var recordType = this.recordType, fields = recordType.prototype.fields;
+ var records = [];
+ var root = o;
+ for(var i = 0; i < root.length; i++){
+ var n = root[i];
+ var values = {};
+ var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
+ for(var j = 0, jlen = fields.length; j < jlen; j++){
+ var f = fields.items[j];
+ var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
+ var v = n[k] !== undefined ? n[k] : f.defaultValue;
+ v = f.convert(v);
+ values[f.name] = v;
+ }
+ var record = new recordType(values, id);
+ record.json = n;
+ records[records.length] = record;
+ }
+ return {
+ records : records,
+ totalRecords : records.length
+ };
},
// used when loading children.. @see loadDataFromChildren
toLoadData: function(rec)
{
- // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
- return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
-
+ // expect rec just to be an array.. eg [a,b,c, [...] << cn ]
+ return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn;
+
}
*/
/**
- * @class Roo.bootstrap.ComboBox
- * @extends Roo.bootstrap.TriggerField
+ * @class Roo.bootstrap.form.ComboBox
+ * @extends Roo.bootstrap.form.TriggerField
* 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
* Create a new ComboBox.
* @param {Object} config Configuration options
*/
-Roo.bootstrap.ComboBox = function(config){
- Roo.bootstrap.ComboBox.superclass.constructor.call(this, config);
+Roo.bootstrap.form.ComboBox = function(config){
+ Roo.bootstrap.form.ComboBox.superclass.constructor.call(this, config);
this.addEvents({
/**
* @event expand
* Fires when the dropdown list is expanded
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
*/
'expand' : true,
/**
* @event collapse
* Fires when the dropdown list is collapsed
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
*/
'collapse' : true,
/**
* @event beforeselect
* Fires before a list item is selected. Return false to cancel the selection.
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
* @param {Roo.data.Record} record The data record returned from the underlying store
* @param {Number} index The index of the selected item in the dropdown list
*/
/**
* @event select
* Fires when a list item is selected
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
* @param {Roo.data.Record} record The data record returned from the underlying store (or false on clear)
* @param {Number} index The index of the selected item in the dropdown list
*/
* @event beforequery
* Fires before all queries are processed. Return false to cancel the query or set cancel to true.
* The event object passed has these properties:
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
* @param {String} query The query
* @param {Boolean} forceAll true to force "all" query
* @param {Boolean} cancel true to cancel the query
/**
* @event add
* Fires when the 'add' icon is pressed (add a listener to enable add button)
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
*/
'add' : true,
/**
* @event edit
* Fires when the 'edit' icon is pressed (add a listener to enable add button)
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
* @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
*/
'edit' : true,
/**
* @event remove
* Fires when the remove value from the combobox array
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
*/
'remove' : true,
/**
* @event afterremove
* Fires when the remove value from the combobox array
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
*/
'afterremove' : true,
/**
* @event specialfilter
* Fires when specialfilter
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
*/
'specialfilter' : true,
/**
* @event tick
* Fires when tick the element
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
*/
'tick' : true,
/**
* @event touchviewdisplay
* Fires when touch view require special display (default is using displayField)
- * @param {Roo.bootstrap.ComboBox} combo This combo box
+ * @param {Roo.bootstrap.form.ComboBox} combo This combo box
* @param {Object} cfg set html .
*/
'touchviewdisplay' : true
}
};
-Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
+Roo.extend(Roo.bootstrap.form.ComboBox, Roo.bootstrap.form.TriggerField, {
/**
* @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
* Normal ComboBox
*/
if(!this.tickable){
- cfg = Roo.bootstrap.ComboBox.superclass.getAutoCreate.call(this);
+ cfg = Roo.bootstrap.form.ComboBox.superclass.getAutoCreate.call(this);
return cfg;
}
return;
}
- Roo.bootstrap.ComboBox.superclass.initEvents.call(this);
+ Roo.bootstrap.form.ComboBox.superclass.initEvents.call(this);
if(this.hiddenName){
this.store.un('load', this.onLoad, this);
this.store.un('loadexception', this.onLoadException, this);
}
- Roo.bootstrap.ComboBox.superclass.onDestroy.call(this);
+ Roo.bootstrap.form.ComboBox.superclass.onDestroy.call(this);
},
// private
{
-// Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments);
+// Roo.bootstrap.form.ComboBox.superclass.onResize.apply(this, arguments);
//
// if(typeof w != 'number'){
// // we do not handle it!?!?
this.inputEl().on('mousedown', this.onTriggerClick, this);
this.inputEl().addClass('x-combo-noedit');
}else{
- this.inputEl().dom.setAttribute('readOnly', false);
+ this.inputEl().dom.removeAttribute('readOnly');
this.inputEl().un('mousedown', this.onTriggerClick, this);
this.inputEl().removeClass('x-combo-noedit');
}
if(this.valueField){
return typeof this.value != 'undefined' ? this.value : '';
}else{
- return Roo.bootstrap.ComboBox.superclass.getValue.call(this);
+ return Roo.bootstrap.form.ComboBox.superclass.getValue.call(this);
}
},
if(this.hiddenField){
this.hiddenField.dom.value = v;
}
- Roo.bootstrap.ComboBox.superclass.setValue.call(this, text);
+ Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
var close = this.closeTriggerEl();
this.hiddenField.dom.value = vv;
this.lastSelectionText = dv;
- Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
+ Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
this.value = vv;
return;
}
// no hidden field.. - we store the value in 'value', but still display
// display field!!!!
this.lastSelectionText = dv;
- Roo.bootstrap.ComboBox.superclass.setValue.call(this, dv);
+ Roo.bootstrap.form.ComboBox.superclass.setValue.call(this, dv);
this.value = vv;
combobox.cls += ' roo-select2-container-multi';
}
+ var required = this.allowBlank ? {
+ tag : 'i',
+ style: 'display: none'
+ } : {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ };
+
var align = this.labelAlign || this.parentLabelAlign();
if (align ==='left' && this.fieldLabel.length) {
cfg.cn = [
- {
- tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ required,
{
tag: 'label',
cls : 'control-label col-form-label',
tag : 'span',
html : this.fieldLabel
},
- {
- tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- }
+ required
]
},
{
} else if ( this.fieldLabel.length) {
cfg.cn = [
- {
- tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ required,
{
tag: 'label',
cls : 'control-label',
cls : 'control-label',
html : this.fieldLabel,
cn : [
- {
- tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- }
+ required
]
},
{
renderTouchView : function()
{
- this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.ComboBox.touchViewTemplate);
+ this.touchViewEl = Roo.get(document.body).createChild(Roo.bootstrap.form.ComboBox.touchViewTemplate);
this.touchViewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.touchViewHeaderEl = this.touchViewEl.select('.modal-header', true).first();
var rawValue = this.getRawValue();
- var template = (this.multiple) ? Roo.bootstrap.ComboBox.listItemCheckbox : Roo.bootstrap.ComboBox.listItemRadio;
+ var template = (this.multiple) ? Roo.bootstrap.form.ComboBox.listItemCheckbox : Roo.bootstrap.form.ComboBox.listItemRadio;
this.tickItems = [];
{
this.clearTouchView();
- this.touchViewListGroup.createChild(Roo.bootstrap.ComboBox.emptyResult);
+ this.touchViewListGroup.createChild(Roo.bootstrap.form.ComboBox.emptyResult);
this.touchViewListGroup.select('.roo-combobox-touch-view-empty-result', true).first().dom.innerHTML = this.emptyResultText;
*/
});
-Roo.apply(Roo.bootstrap.ComboBox, {
+Roo.apply(Roo.bootstrap.form.ComboBox, {
header : {
tag: 'div',
}
});
-Roo.apply(Roo.bootstrap.ComboBox, {
+Roo.apply(Roo.bootstrap.form.ComboBox, {
touchViewTemplate : {
tag: 'div',
tag: 'div',
cls: 'modal-content',
cn: [
- Roo.bootstrap.ComboBox.header,
- Roo.bootstrap.ComboBox.body,
- Roo.bootstrap.ComboBox.footer
+ Roo.bootstrap.form.ComboBox.header,
+ Roo.bootstrap.form.ComboBox.body,
+ Roo.bootstrap.form.ComboBox.footer
]
}
]
Roo.extend(Roo.bootstrap.Calendar, Roo.bootstrap.Component, {
+ /**
+ * @cfg {Roo.data.Store} store
+ * The data source for the calendar
+ */
+ store : false,
/**
* @cfg {Number} startDay
* Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
/**
* @class Roo.bootstrap.Popover
* @extends Roo.bootstrap.Component
+ * @parent none builder
+ * @children Roo.bootstrap.Component
* Bootstrap Popover class
* @cfg {String} html contents of the popover (or false to use children..)
* @cfg {String} title of popover (or false to hide)
}
}, this.delay.hide)
},
+
+ /**
+ * update the position of the dialog
+ * normally this is needed if the popover get's bigger - due to a Table reload etc..
+ *
+ *
+ */
+
+ doAlign : function()
+ {
+
+ if (this.alignEl) {
+ this.updatePosition(this.placement, true);
+
+ } else {
+ // this is usually just done by the builder = to show the popoup in the middle of the scren.
+ var es = this.el.getSize();
+ var x = Roo.lib.Dom.getViewWidth()/2;
+ var y = Roo.lib.Dom.getViewHeight()/2;
+ this.el.setXY([ x-(es.width/2), y-(es.height/2)] );
+
+ }
+
+
+
+
+
+ },
+
/**
* Show the popover
* @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
if (this.parent() && (this.over == 'parent' || (this.over === false))) {
on_el = this.parent().el;
} else if (this.over) {
- Roo.get(this.over);
+ on_el = Roo.get(this.over);
}
}
this.el.show();
this.el.dom.style.display = 'block';
-
- if (this.alignEl) {
- this.updatePosition(this.placement, true);
-
- } else {
- // this is usually just done by the builder = to show the popoup in the middle of the scren.
- var es = this.el.getSize();
- var x = Roo.lib.Dom.getViewWidth()/2;
- var y = Roo.lib.Dom.getViewHeight()/2;
- this.el.setXY([ x-(es.width/2), y-(es.height/2)] );
-
- }
-
+ this.doAlign();
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
clickHander : false,
+
onMouseDown : function(e)
{
- if (!e.getTarget(".roo-popover")) {
+ if (this.popups.length && !e.getTarget(".roo-popover")) {
+ /// what is nothing is showing..
this.hideAll();
}
},
+
popups : [],
register : function(popup)
Roo.bootstrap.Popover.clickHandler = Roo.get(document).on("mousedown", Roo.bootstrap.Popover.onMouseDown, Roo.bootstrap.Popover);
}
// hide other popups.
- this.hideAll();
- this.popups.push(popup);
+ popup.on('show', Roo.bootstrap.Popover.onShow, popup);
+ popup.on('hide', Roo.bootstrap.Popover.onHide, popup);
+ this.hideAll(); //<< why?
+ //this.popups.push(popup);
},
hideAll : function()
{
this.popups.forEach(function(p) {
p.hide();
});
- }
-
-});/*
- * - LGPL
- *
- * Card header - holder for the card header elements.
- *
- */
+ },
+ onShow : function() {
+ Roo.bootstrap.Popover.popups.push(this);
+ },
+ onHide : function() {
+ Roo.bootstrap.Popover.popups.remove(this);
+ }
+});
/**
* @class Roo.bootstrap.PopoverNav
- * @extends Roo.bootstrap.NavGroup
+ * @extends Roo.bootstrap.nav.Simplebar
+ * @parent Roo.bootstrap.Popover
+ * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container
+ * @licence LGPL
* Bootstrap Popover header navigation class
+ * FIXME? should this go under nav?
+ *
+ *
* @constructor
* Create a new Popover Header Navigation
* @param {Object} config The config object
Roo.bootstrap.PopoverNav.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.PopoverNav, Roo.bootstrap.NavSimplebar, {
+Roo.extend(Roo.bootstrap.PopoverNav, Roo.bootstrap.nav.Simplebar, {
container_method : 'getPopoverHeader'
/**
* @class Roo.bootstrap.Progress
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.ProgressBar
* Bootstrap Progress class
* @cfg {Boolean} striped striped of the progress bar
* @cfg {Boolean} active animated of the progress bar
- /*
- * - LGPL
- *
- * column
- *
- */
-
-/**
+ /**
* @class Roo.bootstrap.TabGroup
* @extends Roo.bootstrap.Column
+ * @children Roo.bootstrap.TabPanel
* 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
/**
* register a Navigation item
- * @param {Roo.bootstrap.NavItem} the navitem to add
+ * @param {Roo.bootstrap.nav.Item} the navitem to add
*/
register : function(item)
{
groups: {},
/**
* register a Navigation Group
- * @param {Roo.bootstrap.NavGroup} the navgroup to add
+ * @param {Roo.bootstrap.nav.Group} the navgroup to add
*/
register : function(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
+ * @returns {Roo.bootstrap.nav.Group} the navgroup
*/
get: function(navId) {
if (typeof(this.groups[navId]) == 'undefined') {
/**
* @class Roo.bootstrap.TabPanel
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap TabPanel class
* @cfg {Boolean} active panel active
* @cfg {String} html panel content
* @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 ()
+ * @cfg {String} navId The Roo.bootstrap.nav.Group which triggers show hide ()
* @cfg {String} href click to link..
* @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
*
*/
/**
- * @class Roo.bootstrap.DateField
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.DateField
+ * @extends Roo.bootstrap.form.Input
* Bootstrap DateField class
* @cfg {Number} weekStart default 0
* @cfg {String} viewMode default empty, (months|years)
* @param {Object} config The config object
*/
-Roo.bootstrap.DateField = function(config){
- Roo.bootstrap.DateField.superclass.constructor.call(this, config);
+Roo.bootstrap.form.DateField = function(config){
+ Roo.bootstrap.form.DateField.superclass.constructor.call(this, config);
this.addEvents({
/**
* @event show
* Fires when this field show.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.form.DateField} this
* @param {Mixed} date The date value
*/
show : true,
/**
* @event show
* Fires when this field hide.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.form.DateField} this
* @param {Mixed} date The date value
*/
hide : true,
/**
* @event select
* Fires when select a date.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.form.DateField} this
* @param {Mixed} date The date value
*/
select : true,
/**
* @event beforeselect
* Fires when before select a date.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.form.DateField} this
* @param {Mixed} date The date value
*/
beforeselect : true
});
};
-Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.DateField, Roo.bootstrap.form.Input, {
/**
* @cfg {String} format
onRender: function(ct, position)
{
- Roo.bootstrap.DateField.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.DateField.superclass.onRender.call(this, ct, position);
this.language = this.language || 'en';
- this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0];
- this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en";
+ this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : this.language.split('-')[0];
+ this.language = this.language in Roo.bootstrap.form.DateField.dates ? this.language : "en";
- this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false;
+ this.isRTL = Roo.bootstrap.form.DateField.dates[this.language].rtl || false;
this.format = this.format || 'm/d/y';
this.isInline = false;
this.isInput = true;
}
}
- this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template);
+ this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.DateField.template);
-// this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
+// this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.form.DateField.template);
this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
return;
}
- v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
+ v.dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
v.attr('colspan', function(i, val){
return parseInt(val) + 1;
});
dow.cn.push({
tag: 'th',
cls: 'dow',
- html: Roo.bootstrap.DateField.dates[this.language].daysMin[(dowCnt++)%7]
+ html: Roo.bootstrap.form.DateField.dates[this.language].daysMin[(dowCnt++)%7]
});
}
var month = {
tag: 'span',
cls: 'month',
- html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++]
+ html: Roo.bootstrap.form.DateField.dates[this.language].monthsShort[i++]
};
months.createChild(month);
currentDate = this.date && this.date.valueOf(),
today = this.UTCToday();
- this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].months[month]+' '+year;
+ this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].months[month]+' '+year;
-// this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
+// this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.form.DateField.dates[this.language].today;
// this.picker.select('>tfoot th.today').
// .text(dates[this.language].today)
v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
v.hide();
});
- this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show();
+ this.picker().select('>.datepicker-'+Roo.bootstrap.form.DateField.modes[this.viewMode].clsName, true).first().show();
},
place: function()
onFocus : function()
{
- Roo.bootstrap.DateField.superclass.onFocus.call(this);
+ Roo.bootstrap.form.DateField.superclass.onFocus.call(this);
this.showPopup();
},
onBlur : function()
{
- Roo.bootstrap.DateField.superclass.onBlur.call(this);
+ Roo.bootstrap.form.DateField.superclass.onBlur.call(this);
var d = this.inputEl().getValue();
keyup: function(e)
{
- Roo.bootstrap.DateField.superclass.keyup.call(this);
+ Roo.bootstrap.form.DateField.superclass.keyup.call(this);
this.update();
},
if(isNaN(d.getTime())){
this.date = this.viewDate = '';
- Roo.bootstrap.DateField.superclass.setValue.call(this, '');
+ Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
return;
}
v = this.formatDate(d);
- Roo.bootstrap.DateField.superclass.setValue.call(this, v);
+ Roo.bootstrap.form.DateField.superclass.setValue.call(this, v);
this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
break;
case 'prev':
case 'next':
- var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
+ var dir = Roo.bootstrap.form.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
switch(this.viewMode){
case 0:
this.viewDate = this.moveMonth(this.viewDate, dir);
break;
case 'span':
if (className.indexOf('disabled') < 0) {
- this.viewDate.setUTCDate(1);
+ if (!this.viewDate) {
+ this.viewDate = new Date();
+ }
+ this.viewDate.setUTCDate(1);
if (className.indexOf('month') > -1) {
- this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
+ this.viewDate.setUTCMonth(Roo.bootstrap.form.DateField.dates[this.language].monthsShort.indexOf(html));
} else {
var year = parseInt(html, 10) || 0;
this.viewDate.setUTCFullYear(year);
{
this.date = this.viewDate = '';
- Roo.bootstrap.DateField.superclass.setValue.call(this, '');
+ Roo.bootstrap.form.DateField.superclass.setValue.call(this, '');
}
});
-Roo.apply(Roo.bootstrap.DateField, {
+Roo.apply(Roo.bootstrap.form.DateField, {
head : {
tag: 'thead',
}]
});
-Roo.apply(Roo.bootstrap.DateField, {
+Roo.apply(Roo.bootstrap.form.DateField, {
template : {
tag: 'div',
tag: 'table',
cls: 'table-condensed',
cn:[
- Roo.bootstrap.DateField.head,
+ Roo.bootstrap.form.DateField.head,
{
tag: 'tbody'
},
- Roo.bootstrap.DateField.footer
+ Roo.bootstrap.form.DateField.footer
]
}
]
tag: 'table',
cls: 'table-condensed',
cn:[
- Roo.bootstrap.DateField.head,
- Roo.bootstrap.DateField.content,
- Roo.bootstrap.DateField.footer
+ Roo.bootstrap.form.DateField.head,
+ Roo.bootstrap.form.DateField.content,
+ Roo.bootstrap.form.DateField.footer
]
}
]
tag: 'table',
cls: 'table-condensed',
cn:[
- Roo.bootstrap.DateField.head,
- Roo.bootstrap.DateField.content,
- Roo.bootstrap.DateField.footer
+ Roo.bootstrap.form.DateField.head,
+ Roo.bootstrap.form.DateField.content,
+ Roo.bootstrap.form.DateField.footer
]
}
]
*/
/**
- * @class Roo.bootstrap.TimeField
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.TimeField
+ * @extends Roo.bootstrap.form.Input
* Bootstrap DateField class
*
*
* @param {Object} config The config object
*/
-Roo.bootstrap.TimeField = function(config){
- Roo.bootstrap.TimeField.superclass.constructor.call(this, config);
+Roo.bootstrap.form.TimeField = function(config){
+ Roo.bootstrap.form.TimeField.superclass.constructor.call(this, config);
this.addEvents({
/**
* @event show
* Fires when this field show.
- * @param {Roo.bootstrap.DateField} thisthis
+ * @param {Roo.bootstrap.form.DateField} thisthis
* @param {Mixed} date The date value
*/
show : true,
/**
* @event show
* Fires when this field hide.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.form.DateField} this
* @param {Mixed} date The date value
*/
hide : true,
/**
* @event select
* Fires when select a date.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.form.DateField} this
* @param {Mixed} date The date value
*/
select : true
});
};
-Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.TimeField, Roo.bootstrap.form.Input, {
/**
* @cfg {String} format
getAutoCreate : function()
{
this.after = '<i class="fa far fa-clock"></i>';
- return Roo.bootstrap.TimeField.superclass.getAutoCreate.call(this);
+ return Roo.bootstrap.form.TimeField.superclass.getAutoCreate.call(this);
},
onRender: function(ct, position)
{
- Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.TimeField.superclass.onRender.call(this, ct, position);
- this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.TimeField.template);
+ this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.TimeField.template);
this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
onFocus : function()
{
- Roo.bootstrap.TimeField.superclass.onFocus.call(this);
+ Roo.bootstrap.form.TimeField.superclass.onFocus.call(this);
this.show();
},
onBlur : function()
{
- Roo.bootstrap.TimeField.superclass.onBlur.call(this);
+ Roo.bootstrap.form.TimeField.superclass.onBlur.call(this);
this.hide();
},
});
-Roo.apply(Roo.bootstrap.TimeField, {
+Roo.apply(Roo.bootstrap.form.TimeField, {
template : {
tag: 'div',
*/
/**
- * @class Roo.bootstrap.MonthField
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.MonthField
+ * @extends Roo.bootstrap.form.Input
* Bootstrap MonthField class
*
* @cfg {String} language default en
* @param {Object} config The config object
*/
-Roo.bootstrap.MonthField = function(config){
- Roo.bootstrap.MonthField.superclass.constructor.call(this, config);
+Roo.bootstrap.form.MonthField = function(config){
+ Roo.bootstrap.form.MonthField.superclass.constructor.call(this, config);
this.addEvents({
/**
* @event show
* Fires when this field show.
- * @param {Roo.bootstrap.MonthField} this
+ * @param {Roo.bootstrap.form.MonthField} this
* @param {Mixed} date The date value
*/
show : true,
/**
* @event show
* Fires when this field hide.
- * @param {Roo.bootstrap.MonthField} this
+ * @param {Roo.bootstrap.form.MonthField} this
* @param {Mixed} date The date value
*/
hide : true,
/**
* @event select
* Fires when select a date.
- * @param {Roo.bootstrap.MonthField} this
+ * @param {Roo.bootstrap.form.MonthField} this
* @param {String} oldvalue The old value
* @param {String} newvalue The new value
*/
});
};
-Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.MonthField, Roo.bootstrap.form.Input, {
onRender: function(ct, position)
{
- Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.MonthField.superclass.onRender.call(this, ct, position);
this.language = this.language || 'en';
- this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0];
- this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
+ this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : this.language.split('-')[0];
+ this.language = this.language in Roo.bootstrap.form.MonthField.dates ? this.language : "en";
- this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
+ this.isRTL = Roo.bootstrap.form.MonthField.dates[this.language].rtl || false;
this.isInline = false;
this.isInput = true;
this.component = this.el.select('.add-on', true).first() || false;
this.component = (this.component && this.component.length === 0) ? false : this.component;
this.hasInput = this.component && this.inputEL().length;
- this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
+ this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.form.MonthField.template);
this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
{
var o = this.getValue();
- Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
+ Roo.bootstrap.form.MonthField.superclass.setValue.call(this, v);
this.update();
return;
}
- this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
+ this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].monthsShort.indexOf(html);
- this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
this.hide();
var month = {
tag: 'span',
cls: 'month',
- html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
+ html: Roo.bootstrap.form.MonthField.dates[this.language].monthsShort[i++]
};
months.createChild(month);
var _this = this;
if(typeof(this.vIndex) == 'undefined' && this.value.length){
- this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
+ this.vIndex = Roo.bootstrap.form.MonthField.dates[this.language].months.indexOf(this.value);
}
Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
onFocus : function()
{
- Roo.bootstrap.MonthField.superclass.onFocus.call(this);
+ Roo.bootstrap.form.MonthField.superclass.onFocus.call(this);
this.show();
},
onBlur : function()
{
- Roo.bootstrap.MonthField.superclass.onBlur.call(this);
+ Roo.bootstrap.form.MonthField.superclass.onBlur.call(this);
var d = this.inputEl().getValue();
keyup: function(e)
{
- Roo.bootstrap.MonthField.superclass.keyup.call(this);
+ Roo.bootstrap.form.MonthField.superclass.keyup.call(this);
this.update();
},
this.vIndex = 0;
}
- this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
break;
case 38: // up
this.vIndex = 0;
}
- this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
break;
case 13: // enter
if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
- this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
}
this.hide();
break;
case 9: // tab
if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
- this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ this.setValue(Roo.bootstrap.form.MonthField.dates[this.language].months[this.vIndex]);
}
this.hide();
break;
});
-Roo.apply(Roo.bootstrap.MonthField, {
+Roo.apply(Roo.bootstrap.form.MonthField, {
content : {
tag: 'tbody',
}
});
-Roo.apply(Roo.bootstrap.MonthField, {
+Roo.apply(Roo.bootstrap.form.MonthField, {
template : {
tag: 'div',
tag: 'table',
cls: 'table-condensed',
cn:[
- Roo.bootstrap.DateField.content
+ Roo.bootstrap.form.DateField.content
]
}
]
*/
/**
- * @class Roo.bootstrap.CheckBox
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.CheckBox
+ * @extends Roo.bootstrap.form.Input
* Bootstrap CheckBox class
*
* @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
* @param {Object} config The config object
*/
-Roo.bootstrap.CheckBox = function(config){
- Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
+Roo.bootstrap.form.CheckBox = function(config){
+ Roo.bootstrap.form.CheckBox.superclass.constructor.call(this, config);
this.addEvents({
/**
* @event check
* Fires when the element is checked or unchecked.
- * @param {Roo.bootstrap.CheckBox} this This input
+ * @param {Roo.bootstrap.form.CheckBox} this This input
* @param {Boolean} checked The new checked value
*/
check : true,
/**
* @event click
* Fires when the element is click.
- * @param {Roo.bootstrap.CheckBox} this This input
+ * @param {Roo.bootstrap.form.CheckBox} this This input
*/
click : true
});
};
-Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.CheckBox, Roo.bootstrap.form.Input, {
inputType: 'checkbox',
inputValue: 1,
initEvents : function()
{
-// Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
+// Roo.bootstrap.form.CheckBox.superclass.initEvents.call(this);
this.inputEl().on('click', this.onClick, this);
this.startValue = this.getValue();
if(this.groupId){
- Roo.bootstrap.CheckBox.register(this);
+ Roo.bootstrap.form.CheckBox.register(this);
}
},
//return (this.getValue() == this.inputValue) ? true : false;
}
- var group = Roo.bootstrap.CheckBox.get(this.groupId);
+ var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
if(!group){
return false;
this.fireEvent('valid', this);
- var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
+ var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
if(this.groupId){
- label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
+ label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
}
if(label){
return;
}
- var group = Roo.bootstrap.CheckBox.get(this.groupId);
+ var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
if(!group){
return;
this.fireEvent('invalid', this, msg);
- var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
+ var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
if(this.groupId){
- label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
+ label = Roo.bootstrap.form.FieldLabel.get(this.groupId + '-group');
}
if(label){
return;
}
- var group = Roo.bootstrap.CheckBox.get(this.groupId);
+ var group = Roo.bootstrap.form.CheckBox.get(this.groupId);
if(!group){
return;
clearInvalid : function()
{
- Roo.bootstrap.Input.prototype.clearInvalid.call(this);
+ Roo.bootstrap.form.Input.prototype.clearInvalid.call(this);
// this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
- var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
+ var label = Roo.bootstrap.form.FieldLabel.get(this.name + '-group');
if (label && label.iconEl) {
label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
disable : function()
{
if(this.inputType != 'radio'){
- Roo.bootstrap.CheckBox.superclass.disable.call(this);
+ Roo.bootstrap.form.CheckBox.superclass.disable.call(this);
return;
}
enable : function()
{
if(this.inputType != 'radio'){
- Roo.bootstrap.CheckBox.superclass.enable.call(this);
+ Roo.bootstrap.form.CheckBox.superclass.enable.call(this);
return;
}
});
-Roo.apply(Roo.bootstrap.CheckBox, {
+Roo.apply(Roo.bootstrap.form.CheckBox, {
groups: {},
/**
* register a CheckBox Group
- * @param {Roo.bootstrap.CheckBox} the CheckBox to add
+ * @param {Roo.bootstrap.form.CheckBox} the CheckBox to add
*/
register : function(checkbox)
{
/**
* fetch a CheckBox Group based on the group ID
* @param {string} the group ID
- * @returns {Roo.bootstrap.CheckBox} the CheckBox group
+ * @returns {Roo.bootstrap.form.CheckBox} the CheckBox group
*/
get: function(groupId) {
if (typeof(this.groups[groupId]) == 'undefined') {
*/
/**
- * @class Roo.bootstrap.Radio
+ * @class Roo.bootstrap.form.Radio
* @extends Roo.bootstrap.Component
* Bootstrap Radio class
* @cfg {String} boxLabel - the label associated
* Create a new Radio
* @param {Object} config The config object
*/
-Roo.bootstrap.Radio = function(config){
- Roo.bootstrap.Radio.superclass.constructor.call(this, config);
+Roo.bootstrap.form.Radio = function(config){
+ Roo.bootstrap.form.Radio.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.form.Radio, Roo.bootstrap.Component, {
boxLabel : '',
*/
/**
- * @class Roo.bootstrap.SecurePass
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.SecurePass
+ * @extends Roo.bootstrap.form.Input
* Bootstrap SecurePass class
*
*
* @param {Object} config The config object
*/
-Roo.bootstrap.SecurePass = function (config) {
+Roo.bootstrap.form.SecurePass = function (config) {
// these go here, so the translation tool can replace them..
this.errors = {
PwdEmpty: "Please type a password, and then retype it to confirm.",
this.errors = {};
- Roo.bootstrap.SecurePass.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.SecurePass.superclass.constructor.call(this, config);
}
-Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.SecurePass, Roo.bootstrap.form.Input, {
/**
* @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
* {
// private
initEvents: function ()
{
- Roo.bootstrap.SecurePass.superclass.initEvents.call(this);
+ Roo.bootstrap.form.SecurePass.superclass.initEvents.call(this);
if (this.el.is('input[type=password]') && Roo.isSafari) {
this.el.on('keydown', this.SafariOnKeyDown, this);
// private
onRender: function (ct, position)
{
- Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.SecurePass.superclass.onRender.call(this, ct, position);
this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
if (this.wrap) {
this.wrap.remove();
}
- Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
+ Roo.bootstrap.form.TriggerField.superclass.onDestroy.call(this);
},
// private
checkStrength: function ()
},
reset: function ()
{
- Roo.bootstrap.SecurePass.superclass.reset.call(this);
+ Roo.bootstrap.form.SecurePass.superclass.reset.call(this);
this._lastPwd = '';
// private
validateValue: function (value)
{
- if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
+ if (!Roo.bootstrap.form.SecurePass.superclass.validateValue.call(this, value)) {
return false;
}
if (value.length == 0) {
*/
stylesheets: false,
+ /**
+ * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+ */
+ allowComments: false,
// id of frame..
frameId: false,
return;
}
if (node.nodeName == "#comment") {
- node.parentNode.removeChild(node);
+ if (!this.allowComments) {
+ node.parentNode.removeChild(node);
+ }
// clean up silly Windows -- stuff?
return;
}
*/
/**
- * @class Roo.bootstrap.HtmlEditor
- * @extends Roo.bootstrap.TextArea
+ * @class Roo.bootstrap.form.HtmlEditor
+ * @extends Roo.bootstrap.form.TextArea
* Bootstrap HtmlEditor class
* @constructor
* @param {Object} config The config object
*/
-Roo.bootstrap.HtmlEditor = function(config){
- Roo.bootstrap.HtmlEditor.superclass.constructor.call(this, config);
+Roo.bootstrap.form.HtmlEditor = function(config){
+ Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
if (!this.toolbars) {
this.toolbars = [];
}
};
-Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea, {
+Roo.extend(Roo.bootstrap.form.HtmlEditor, Roo.bootstrap.form.TextArea, {
/**
Roo.log('renewing');
Roo.log("create toolbars");
- this.toolbars = [ new Roo.bootstrap.htmleditor.ToolbarStandard({editor: this} ) ];
+ this.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard({editor: this} ) ];
this.toolbars[0].render(this.toolbarContainer());
return;
// if (!editor.toolbars || !editor.toolbars.length) {
-// editor.toolbars = [ new Roo.bootstrap.HtmlEditor.ToolbarStandard() ]; // can be empty?
+// editor.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard() ]; // can be empty?
// }
//
// for (var i =0 ; i < editor.toolbars.length;i++) {
// editor.toolbars[i] = Roo.factory(
// typeof(editor.toolbars[i]) == 'string' ?
// { xtype: editor.toolbars[i]} : editor.toolbars[i],
-// Roo.bootstrap.HtmlEditor);
+// Roo.bootstrap.form.HtmlEditor);
// editor.toolbars[i].init(editor);
// }
},
{
// Roo.log("Call onRender: " + this.xtype);
var _t = this;
- Roo.bootstrap.HtmlEditor.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.HtmlEditor.superclass.onRender.call(this, ct, position);
this.wrap = this.inputEl().wrap({
cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
onResize : function(w, h)
{
Roo.log('resize: ' +w + ',' + h );
- Roo.bootstrap.HtmlEditor.superclass.onResize.apply(this, arguments);
+ Roo.bootstrap.form.HtmlEditor.superclass.onResize.apply(this, arguments);
var ew = false;
var eh = false;
// clearInvalid : Roo.emptyFn,
setValue : function(v){
- Roo.bootstrap.HtmlEditor.superclass.setValue.call(this, v);
+ Roo.bootstrap.form.HtmlEditor.superclass.setValue.call(this, v);
this.editorcore.pushValue();
},
-Roo.namespace('Roo.bootstrap.htmleditor');
+Roo.namespace('Roo.bootstrap.form.HtmlEditor');
/**
- * @class Roo.bootstrap.HtmlEditorToolbar1
+ * @class Roo.bootstrap.form.HtmlEditorToolbarStandard
+ * @parent Roo.bootstrap.form.HtmlEditor
+ * @extends Roo.bootstrap.nav.Simplebar
* Basic Toolbar
*
* @example
* Usage:
*
- new Roo.bootstrap.HtmlEditor({
+ new Roo.bootstrap.form.HtmlEditor({
....
toolbars : [
- new Roo.bootstrap.HtmlEditorToolbar1({
+ new Roo.bootstrap.form.HtmlEditorToolbarStandard({
disable : { fonts: 1 , format: 1, ..., ... , ...],
btns : [ .... ]
})
* .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
*/
-Roo.bootstrap.htmleditor.ToolbarStandard = function(config)
+Roo.bootstrap.form.HtmlEditorToolbarStandard = function(config)
{
Roo.apply(this, config);
colors : true,
specialElements : true
});
- Roo.bootstrap.htmleditor.ToolbarStandard.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.constructor.call(this, config);
this.editor = config.editor;
this.editorcore = config.editor.editorcore;
//Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
// dont call parent... till later.
}
-Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar, {
+Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simplebar, {
bar : true,
{
// Roo.log("Call onRender: " + this.xtype);
- Roo.bootstrap.htmleditor.ToolbarStandard.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.onRender.call(this, ct, position);
Roo.log(this.el);
this.el.dom.style.marginBottom = '0';
var _this = this;
// hides menus... - so this cant be on a menu...
Roo.bootstrap.MenuMgr.hideAll();
*/
- Roo.bootstrap.MenuMgr.hideAll();
+ Roo.bootstrap.menu.Manager.hideAll();
//this.editorsyncValue();
},
onFirstFocus: function() {
*/
/**
- * @class Roo.bootstrap.Markdown
- * @extends Roo.bootstrap.TextArea
+ * @class Roo.bootstrap.form.Markdown
+ * @extends Roo.bootstrap.form.TextArea
* Bootstrap Showdown editable area
* @cfg {string} content
*
* Create a new Showdown
*/
-Roo.bootstrap.Markdown = function(config){
- Roo.bootstrap.Markdown.superclass.constructor.call(this, config);
+Roo.bootstrap.form.Markdown = function(config){
+ Roo.bootstrap.form.Markdown.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.Markdown, Roo.bootstrap.TextArea, {
+Roo.extend(Roo.bootstrap.form.Markdown, Roo.bootstrap.form.TextArea, {
editing :false,
initEvents : function()
{
- Roo.bootstrap.TextArea.prototype.initEvents.call(this);
+ Roo.bootstrap.form.TextArea.prototype.initEvents.call(this);
this.markdownEl = this.el.createChild({
cls : 'roo-markdown-area'
});
},
setValue : function(val)
{
- Roo.bootstrap.TextArea.prototype.setValue.call(this,val);
+ Roo.bootstrap.form.TextArea.prototype.setValue.call(this,val);
if (!this.editing) {
this.updateMarkdown();
}
}
-});
-/**
- * @class Roo.bootstrap.Table.AbstractSelectionModel
- * @extends Roo.util.Observable
- * Abstract base class for grid SelectionModels. It provides the interface that should be
- * implemented by descendant classes. This class should not be directly instantiated.
- * @constructor
- */
-Roo.bootstrap.Table.AbstractSelectionModel = function(){
- this.locked = false;
- Roo.bootstrap.Table.AbstractSelectionModel.superclass.constructor.call(this);
-};
-
-
-Roo.extend(Roo.bootstrap.Table.AbstractSelectionModel, Roo.util.Observable, {
- /** @ignore Called by the grid automatically. Do not call directly. */
- init : function(grid){
- this.grid = grid;
- this.initEvents();
- },
-
- /**
- * Locks the selections.
- */
- lock : function(){
- this.locked = true;
- },
-
- /**
- * Unlocks the selections.
- */
- unlock : function(){
- this.locked = false;
- },
-
- /**
- * Returns true if the selections are locked.
- * @return {Boolean}
- */
- isLocked : function(){
- return this.locked;
- },
-
-
- initEvents : function ()
- {
-
- }
-});
-/**
- * @extends Roo.bootstrap.Table.AbstractSelectionModel
- * @class Roo.bootstrap.Table.RowSelectionModel
- * The default SelectionModel used by {@link Roo.bootstrap.Table}.
- * It supports multiple selections and keyboard selection/navigation.
- * @constructor
- * @param {Object} config
- */
-
-Roo.bootstrap.Table.RowSelectionModel = function(config){
- Roo.apply(this, config);
- this.selections = new Roo.util.MixedCollection(false, function(o){
- return o.id;
- });
-
- this.last = false;
- this.lastActive = false;
-
- this.addEvents({
- /**
- * @event selectionchange
- * Fires when the selection changes
- * @param {SelectionModel} this
- */
- "selectionchange" : true,
- /**
- * @event afterselectionchange
- * Fires after the selection changes (eg. by key press or clicking)
- * @param {SelectionModel} this
- */
- "afterselectionchange" : true,
- /**
- * @event beforerowselect
- * Fires when a row is selected being selected, return false to cancel.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Boolean} keepExisting False if other selections will be cleared
- */
- "beforerowselect" : true,
- /**
- * @event rowselect
- * Fires when a row is selected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- * @param {Roo.data.Record} r The record
- */
- "rowselect" : true,
- /**
- * @event rowdeselect
- * Fires when a row is deselected.
- * @param {SelectionModel} this
- * @param {Number} rowIndex The selected index
- */
- "rowdeselect" : true
- });
- Roo.bootstrap.Table.RowSelectionModel.superclass.constructor.call(this);
- this.locked = false;
- };
-
-Roo.extend(Roo.bootstrap.Table.RowSelectionModel, Roo.bootstrap.Table.AbstractSelectionModel, {
- /**
- * @cfg {Boolean} singleSelect
- * True to allow selection of only one row at a time (defaults to false)
- */
- singleSelect : false,
-
- // private
- initEvents : function()
- {
-
- //if(!this.grid.enableDragDrop && !this.grid.enableDrag){
- // this.growclickrid.on("mousedown", this.handleMouseDown, this);
- //}else{ // allow click to work like normal
- // this.grid.on("rowclick", this.handleDragableRowClick, this);
- //}
- //this.grid.on("rowdblclick", this.handleMouseDBClick, this);
- this.grid.on("rowclick", this.handleMouseDown, this);
-
- this.rowNav = new Roo.KeyNav(this.grid.getGridEl(), {
- "up" : function(e){
- if(!e.shiftKey){
- this.selectPrevious(e.shiftKey);
- }else if(this.last !== false && this.lastActive !== false){
- var last = this.last;
- this.selectRange(this.last, this.lastActive-1);
- this.grid.getView().focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
- }
- }else{
- this.selectFirstRow();
- }
- this.fireEvent("afterselectionchange", this);
- },
- "down" : function(e){
- if(!e.shiftKey){
- this.selectNext(e.shiftKey);
- }else if(this.last !== false && this.lastActive !== false){
- var last = this.last;
- this.selectRange(this.last, this.lastActive+1);
- this.grid.getView().focusRow(this.lastActive);
- if(last !== false){
- this.last = last;
- }
- }else{
- this.selectFirstRow();
- }
- this.fireEvent("afterselectionchange", this);
- },
- scope: this
- });
- this.grid.store.on('load', function(){
- this.selections.clear();
- },this);
- /*
- var view = this.grid.view;
- view.on("refresh", this.onRefresh, this);
- view.on("rowupdated", this.onRowUpdated, this);
- view.on("rowremoved", this.onRemove, this);
- */
- },
-
- // private
- onRefresh : function()
- {
- var ds = this.grid.store, i, v = this.grid.view;
- var s = this.selections;
- s.each(function(r){
- if((i = ds.indexOfId(r.id)) != -1){
- v.onRowSelect(i);
- }else{
- s.remove(r);
- }
- });
- },
-
- // private
- onRemove : function(v, index, r){
- this.selections.remove(r);
- },
-
- // private
- onRowUpdated : function(v, index, r){
- if(this.isSelected(r)){
- v.onRowSelect(index);
- }
- },
-
- /**
- * Select records.
- * @param {Array} records The records to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRecords : function(records, keepExisting)
- {
- if(!keepExisting){
- this.clearSelections();
- }
- var ds = this.grid.store;
- for(var i = 0, len = records.length; i < len; i++){
- this.selectRow(ds.indexOf(records[i]), true);
- }
- },
-
- /**
- * Gets the number of selected rows.
- * @return {Number}
- */
- getCount : function(){
- return this.selections.length;
- },
-
- /**
- * Selects the first row in the grid.
- */
- selectFirstRow : function(){
- this.selectRow(0);
- },
-
- /**
- * Select the last row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectLastRow : function(keepExisting){
- //this.selectRow(this.grid.dataSource.getCount() - 1, keepExisting);
- this.selectRow(this.grid.store.getCount() - 1, keepExisting);
- },
-
- /**
- * Selects the row immediately following the last selected row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectNext : function(keepExisting)
- {
- if(this.last !== false && (this.last+1) < this.grid.store.getCount()){
- this.selectRow(this.last+1, keepExisting);
- this.grid.getView().focusRow(this.last);
- }
- },
-
- /**
- * Selects the row that precedes the last selected row.
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectPrevious : function(keepExisting){
- if(this.last){
- this.selectRow(this.last-1, keepExisting);
- this.grid.getView().focusRow(this.last);
- }
- },
-
- /**
- * Returns the selected records
- * @return {Array} Array of selected records
- */
- getSelections : function(){
- return [].concat(this.selections.items);
- },
-
- /**
- * Returns the first selected record.
- * @return {Record}
- */
- getSelected : function(){
- return this.selections.itemAt(0);
- },
-
-
- /**
- * Clears all selections.
- */
- clearSelections : function(fast)
- {
- if(this.locked) {
- return;
- }
- if(fast !== true){
- var ds = this.grid.store;
- var s = this.selections;
- s.each(function(r){
- this.deselectRow(ds.indexOfId(r.id));
- }, this);
- s.clear();
- }else{
- this.selections.clear();
- }
- this.last = false;
- },
-
-
- /**
- * Selects all rows.
- */
- selectAll : function(){
- if(this.locked) {
- return;
- }
- this.selections.clear();
- for(var i = 0, len = this.grid.store.getCount(); i < len; i++){
- this.selectRow(i, true);
- }
- },
-
- /**
- * Returns True if there is a selection.
- * @return {Boolean}
- */
- hasSelection : function(){
- return this.selections.length > 0;
- },
-
- /**
- * Returns True if the specified row is selected.
- * @param {Number/Record} record The record or index of the record to check
- * @return {Boolean}
- */
- isSelected : function(index){
- var r = typeof index == "number" ? this.grid.store.getAt(index) : index;
- return (r && this.selections.key(r.id) ? true : false);
- },
-
- /**
- * Returns True if the specified record id is selected.
- * @param {String} id The id of record to check
- * @return {Boolean}
- */
- isIdSelected : function(id){
- return (this.selections.key(id) ? true : false);
- },
-
-
- // private
- handleMouseDBClick : function(e, t){
-
- },
- // private
- handleMouseDown : function(e, t)
- {
- var rowIndex = this.grid.headerShow ? t.dom.rowIndex - 1 : t.dom.rowIndex ; // first row is header???
- if(this.isLocked() || rowIndex < 0 ){
- return;
- };
- if(e.shiftKey && this.last !== false){
- var last = this.last;
- this.selectRange(last, rowIndex, e.ctrlKey);
- this.last = last; // reset the last
- t.focus();
-
- }else{
- var isSelected = this.isSelected(rowIndex);
- //Roo.log("select row:" + rowIndex);
- if(isSelected){
- this.deselectRow(rowIndex);
- } else {
- this.selectRow(rowIndex, true);
- }
-
- /*
- if(e.button !== 0 && isSelected){
- alert('rowIndex 2: ' + rowIndex);
- view.focusRow(rowIndex);
- }else if(e.ctrlKey && isSelected){
- this.deselectRow(rowIndex);
- }else if(!isSelected){
- this.selectRow(rowIndex, e.button === 0 && (e.ctrlKey || e.shiftKey));
- view.focusRow(rowIndex);
- }
- */
- }
- this.fireEvent("afterselectionchange", this);
- },
- // private
- handleDragableRowClick : function(grid, rowIndex, e)
- {
- if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
- this.selectRow(rowIndex, false);
- grid.view.focusRow(rowIndex);
- this.fireEvent("afterselectionchange", this);
- }
- },
-
- /**
- * Selects multiple rows.
- * @param {Array} rows Array of the indexes of the row to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRows : function(rows, keepExisting){
- if(!keepExisting){
- this.clearSelections();
- }
- for(var i = 0, len = rows.length; i < len; i++){
- this.selectRow(rows[i], true);
- }
- },
-
- /**
- * Selects a range of rows. All rows in between startRow and endRow are also selected.
- * @param {Number} startRow The index of the first row in the range
- * @param {Number} endRow The index of the last row in the range
- * @param {Boolean} keepExisting (optional) True to retain existing selections
- */
- selectRange : function(startRow, endRow, keepExisting){
- if(this.locked) {
- return;
- }
- if(!keepExisting){
- this.clearSelections();
- }
- if(startRow <= endRow){
- for(var i = startRow; i <= endRow; i++){
- this.selectRow(i, true);
- }
- }else{
- for(var i = startRow; i >= endRow; i--){
- this.selectRow(i, true);
- }
- }
- },
-
- /**
- * Deselects a range of rows. All rows in between startRow and endRow are also deselected.
- * @param {Number} startRow The index of the first row in the range
- * @param {Number} endRow The index of the last row in the range
- */
- deselectRange : function(startRow, endRow, preventViewNotify){
- if(this.locked) {
- return;
- }
- for(var i = startRow; i <= endRow; i++){
- this.deselectRow(i, preventViewNotify);
- }
- },
-
- /**
- * Selects a row.
- * @param {Number} row The index of the row to select
- * @param {Boolean} keepExisting (optional) True to keep existing selections
- */
- selectRow : function(index, keepExisting, preventViewNotify)
- {
- if(this.locked || (index < 0 || index > this.grid.store.getCount())) {
- return;
- }
- if(this.fireEvent("beforerowselect", this, index, keepExisting) !== false){
- if(!keepExisting || this.singleSelect){
- this.clearSelections();
- }
-
- var r = this.grid.store.getAt(index);
- //console.log('selectRow - record id :' + r.id);
-
- this.selections.add(r);
- this.last = this.lastActive = index;
- if(!preventViewNotify){
- var proxy = new Roo.Element(
- this.grid.getRowDom(index)
- );
- proxy.addClass('bg-info info');
- }
- this.fireEvent("rowselect", this, index, r);
- this.fireEvent("selectionchange", this);
- }
- },
-
- /**
- * Deselects a row.
- * @param {Number} row The index of the row to deselect
- */
- deselectRow : function(index, preventViewNotify)
- {
- if(this.locked) {
- return;
- }
- if(this.last == index){
- this.last = false;
- }
- if(this.lastActive == index){
- this.lastActive = false;
- }
-
- var r = this.grid.store.getAt(index);
- if (!r) {
- return;
- }
-
- this.selections.remove(r);
- //.console.log('deselectRow - record id :' + r.id);
- if(!preventViewNotify){
-
- var proxy = new Roo.Element(
- this.grid.getRowDom(index)
- );
- proxy.removeClass('bg-info info');
- }
- this.fireEvent("rowdeselect", this, index);
- this.fireEvent("selectionchange", this);
- },
-
- // private
- restoreLast : function(){
- if(this._last){
- this.last = this._last;
- }
- },
-
- // private
- acceptsNav : function(row, col, cm){
- return !cm.isHidden(col) && cm.isCellEditable(col, row);
- },
-
- // private
- onEditorKey : function(field, e){
- var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
- if(k == e.TAB){
- e.stopEvent();
- ed.completeEdit();
- if(e.shiftKey){
- newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
- }
- }else if(k == e.ENTER && !e.ctrlKey){
- e.stopEvent();
- ed.completeEdit();
- if(e.shiftKey){
- newCell = g.walkCells(ed.row-1, ed.col, -1, this.acceptsNav, this);
- }else{
- newCell = g.walkCells(ed.row+1, ed.col, 1, this.acceptsNav, this);
- }
- }else if(k == e.ESC){
- ed.cancelEdit();
- }
- if(newCell){
- g.startEditing(newCell[0], newCell[1]);
- }
- }
-});
-/*
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
* @class Roo.bootstrap.PagingToolbar
- * @extends Roo.bootstrap.NavSimplebar
+ * @extends Roo.bootstrap.nav.Simplebar
* A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
* @constructor
* Create a new PagingToolbar
if (Roo.bootstrap.version == 4) {
this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
} else {
- this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+ this.navgroup = new Roo.bootstrap.nav.Group({ cls: 'pagination' });
}
};
-Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
+Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.nav.Simplebar, {
/**
- * @cfg {Roo.data.Store} dataSource
+ * @cfg {Roo.bootstrap.Button} buttons[]
+ * Buttons for the toolbar
+ */
+ /**
+ * @cfg {Roo.data.Store} store
* The underlying data store providing the paged data
*/
/**
/**
* @class Roo.bootstrap.dash.TabBox
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.dash.TabPane
* Bootstrap TabBox class
* @cfg {String} title Title of the TabBox
* @cfg {String} icon Icon of the TabBox
/**
* @class Roo.bootstrap.TabPane
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Graph Roo.bootstrap.Column
* Bootstrap TabPane class
* @cfg {Boolean} active (false | true) Default false
* @cfg {String} title title of panel
- /*
- * - LGPL
- *
- * menu
- *
- */
-Roo.bootstrap.menu = Roo.bootstrap.menu || {};
-
-/**
- * @class Roo.bootstrap.menu.Menu
- * @extends Roo.bootstrap.Component
- * Bootstrap Menu class - container for Menu
- * @cfg {String} html Text of the menu
- * @cfg {String} weight (default | primary | success | info | warning | danger | inverse)
- * @cfg {String} icon Font awesome icon
- * @cfg {String} pos Menu align to (top | bottom) default bottom
- *
- *
- * @constructor
- * Create a new Menu
- * @param {Object} config The config object
- */
-
-
-Roo.bootstrap.menu.Menu = function(config){
- Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
-
- this.addEvents({
- /**
- * @event beforeshow
- * Fires before this menu is displayed
- * @param {Roo.bootstrap.menu.Menu} this
- */
- beforeshow : true,
- /**
- * @event beforehide
- * Fires before this menu is hidden
- * @param {Roo.bootstrap.menu.Menu} this
- */
- beforehide : true,
- /**
- * @event show
- * Fires after this menu is displayed
- * @param {Roo.bootstrap.menu.Menu} this
- */
- show : true,
- /**
- * @event hide
- * Fires after this menu is hidden
- * @param {Roo.bootstrap.menu.Menu} this
- */
- hide : true,
- /**
- * @event click
- * Fires when this menu is clicked (or when the enter key is pressed while it is active)
- * @param {Roo.bootstrap.menu.Menu} this
- * @param {Roo.EventObject} e
- */
- click : true
- });
-
-};
-
-Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component, {
-
- submenu : false,
- html : '',
- weight : 'default',
- icon : false,
- pos : 'bottom',
-
-
- getChildContainer : function() {
- if(this.isSubMenu){
- return this.el;
- }
-
- return this.el.select('ul.dropdown-menu', true).first();
- },
-
- getAutoCreate : function()
- {
- var text = [
- {
- tag : 'span',
- cls : 'roo-menu-text',
- html : this.html
- }
- ];
-
- if(this.icon){
- text.unshift({
- tag : 'i',
- cls : 'fa ' + this.icon
- })
- }
-
-
- var cfg = {
- tag : 'div',
- cls : 'btn-group',
- cn : [
- {
- tag : 'button',
- cls : 'dropdown-button btn btn-' + this.weight,
- cn : text
- },
- {
- tag : 'button',
- cls : 'dropdown-toggle btn btn-' + this.weight,
- cn : [
- {
- tag : 'span',
- cls : 'caret'
- }
- ]
- },
- {
- tag : 'ul',
- cls : 'dropdown-menu'
- }
- ]
-
- };
-
- if(this.pos == 'top'){
- cfg.cls += ' dropup';
- }
-
- if(this.isSubMenu){
- cfg = {
- tag : 'ul',
- cls : 'dropdown-menu'
- }
- }
-
- return cfg;
- },
-
- onRender : function(ct, position)
- {
- this.isSubMenu = ct.hasClass('dropdown-submenu');
-
- Roo.bootstrap.menu.Menu.superclass.onRender.call(this, ct, position);
- },
-
- initEvents : function()
- {
- if(this.isSubMenu){
- return;
- }
-
- this.hidden = true;
-
- this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
- this.triggerEl.on('click', this.onTriggerPress, this);
-
- this.buttonEl = this.el.select('button.dropdown-button', true).first();
- this.buttonEl.on('click', this.onClick, this);
-
- },
-
- list : function()
- {
- if(this.isSubMenu){
- return this.el;
- }
-
- return this.el.select('ul.dropdown-menu', true).first();
- },
-
- onClick : function(e)
- {
- this.fireEvent("click", this, e);
- },
-
- onTriggerPress : function(e)
- {
- if (this.isVisible()) {
- this.hide();
- } else {
- this.show();
- }
- },
-
- isVisible : function(){
- return !this.hidden;
- },
-
- show : function()
- {
- this.fireEvent("beforeshow", this);
-
- this.hidden = false;
- this.el.addClass('open');
-
- Roo.get(document).on("mouseup", this.onMouseUp, this);
-
- this.fireEvent("show", this);
-
-
- },
-
- hide : function()
- {
- this.fireEvent("beforehide", this);
-
- this.hidden = true;
- this.el.removeClass('open');
-
- Roo.get(document).un("mouseup", this.onMouseUp);
-
- this.fireEvent("hide", this);
- },
-
- onMouseUp : function()
- {
- this.hide();
- }
-
-});
-
-
- /*
- * - LGPL
- *
- * menu item
- *
- */
-Roo.bootstrap.menu = Roo.bootstrap.menu || {};
-
-/**
- * @class Roo.bootstrap.menu.Item
- * @extends Roo.bootstrap.Component
- * Bootstrap MenuItem class
- * @cfg {Boolean} submenu (true | false) default false
- * @cfg {String} html text of the item
- * @cfg {String} href the link
- * @cfg {Boolean} disable (true | false) default false
- * @cfg {Boolean} preventDefault (true | false) default true
- * @cfg {String} icon Font awesome icon
- * @cfg {String} pos Submenu align to (left | right) default right
- *
- *
- * @constructor
- * Create a new Item
- * @param {Object} config The config object
- */
-
-
-Roo.bootstrap.menu.Item = function(config){
- Roo.bootstrap.menu.Item.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event mouseover
- * Fires when the mouse is hovering over this menu
- * @param {Roo.bootstrap.menu.Item} this
- * @param {Roo.EventObject} e
- */
- mouseover : true,
- /**
- * @event mouseout
- * Fires when the mouse exits this menu
- * @param {Roo.bootstrap.menu.Item} this
- * @param {Roo.EventObject} e
- */
- mouseout : true,
- // raw events
- /**
- * @event click
- * The raw click event for the entire grid.
- * @param {Roo.EventObject} e
- */
- click : true
- });
-};
-
-Roo.extend(Roo.bootstrap.menu.Item, Roo.bootstrap.Component, {
-
- submenu : false,
- href : '',
- html : '',
- preventDefault: true,
- disable : false,
- icon : false,
- pos : 'right',
-
- getAutoCreate : function()
- {
- var text = [
- {
- tag : 'span',
- cls : 'roo-menu-item-text',
- html : this.html
- }
- ];
-
- if(this.icon){
- text.unshift({
- tag : 'i',
- cls : 'fa ' + this.icon
- })
- }
-
- var cfg = {
- tag : 'li',
- cn : [
- {
- tag : 'a',
- href : this.href || '#',
- cn : text
- }
- ]
- };
-
- if(this.disable){
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'disabled' : (cfg.cls + ' disabled');
- }
-
- if(this.submenu){
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'dropdown-submenu' : (cfg.cls + ' dropdown-submenu');
-
- if(this.pos == 'left'){
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'pull-left' : (cfg.cls + ' pull-left');
- }
- }
-
- return cfg;
- },
-
- initEvents : function()
- {
- this.el.on('mouseover', this.onMouseOver, this);
- this.el.on('mouseout', this.onMouseOut, this);
-
- this.el.select('a', true).first().on('click', this.onClick, this);
-
- },
-
- onClick : function(e)
- {
- if(this.preventDefault){
- e.preventDefault();
- }
-
- this.fireEvent("click", this, e);
- },
-
- onMouseOver : function(e)
- {
- if(this.submenu && this.pos == 'left'){
- this.el.select('ul.dropdown-menu', true).first().setLeft(this.el.select('ul.dropdown-menu', true).first().getWidth() * -1);
- }
-
- this.fireEvent("mouseover", this, e);
- },
-
- onMouseOut : function(e)
- {
- this.fireEvent("mouseout", this, e);
- }
-});
-
-
-
- /*
- * - LGPL
- *
- * menu separator
- *
- */
-Roo.bootstrap.menu = Roo.bootstrap.menu || {};
-
-/**
- * @class Roo.bootstrap.menu.Separator
- * @extends Roo.bootstrap.Component
- * Bootstrap Separator class
- *
- * @constructor
- * Create a new Separator
- * @param {Object} config The config object
- */
-
-
-Roo.bootstrap.menu.Separator = function(config){
- Roo.bootstrap.menu.Separator.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.bootstrap.menu.Separator, Roo.bootstrap.Component, {
-
- getAutoCreate : function(){
- var cfg = {
- tag : 'li',
- cls: 'divider'
- };
-
- return cfg;
- }
-
-});
-
-
-
/*
* - LGPL
*
return;
}
- var bindEl = el;
+ var bindEl = el;
+ var pel = false;
+ if (!el.attr('tooltip')) {
+ pel = el.findParent("[tooltip]");
+ if (pel) {
+ bindEl = Roo.get(pel);
+ }
+ }
+
+
// you can not look for children, as if el is the body.. then everythign is the child..
- if (!el.attr('tooltip')) { //
+ if (!pel && !el.attr('tooltip')) { //
if (!el.select("[tooltip]").elements.length) {
return;
}
//Roo.log("child element over..");
}
- this.currentEl = bindEl;
+ this.currentEl = el;
this.currentTip.bind(bindEl);
this.currentRegion = Roo.lib.Region.getRegion(dom);
this.currentTip.enter();
}
+ var elems = document.getElementsByTagName('div');
+ var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
+ for (var i = 0; i < elems.length; i++) {
+ var zindex = Number.parseInt(
+ document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
+ 10
+ );
+ if (zindex > highest) {
+ highest = zindex;
+ }
+ }
+
+
+
+ this.el.dom.style.zIndex = highest;
+
this.el.alignTo(this.bindEl, align[0],align[1]);
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
* @licence LGPL
* @cfg {String} title The title of alert
* @cfg {String} html The content of alert
- * @cfg {String} weight ( success | info | warning | danger )
- * @cfg {String} faicon font-awesomeicon
+ * @cfg {String} weight (success|info|warning|danger) Weight of the message
+ * @cfg {String} fa font-awesomeicon
+ * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.)
+ * @cfg {Boolean} close true to show a x closer
+ *
*
* @constructor
* Create a new alert
title: '',
html: '',
weight: false,
- faicon: false,
+ fa: false,
+ faicon: false, // BC
+ close : false,
+
getAutoCreate : function()
{
tag : 'div',
cls : 'alert',
cn : [
+ {
+ tag: 'button',
+ type : "button",
+ cls: "close",
+ html : '×',
+ style : this.close ? '' : 'display:none'
+ },
{
tag : 'i',
cls : 'roo-alert-icon'
if(this.faicon){
cfg.cn[0].cls += ' fa ' + this.faicon;
}
+ if(this.fa){
+ cfg.cn[0].cls += ' fa ' + this.fa;
+ }
if(this.weight){
cfg.cls += ' alert-' + this.weight;
initEvents: function()
{
this.el.setVisibilityMode(Roo.Element.DISPLAY);
+ this.titleEl = this.el.select('.roo-alert-title',true).first();
+ this.iconEl = this.el.select('.roo-alert-icon',true).first();
+ this.htmlEl = this.el.select('.roo-alert-text',true).first();
+ if (this.seconds > 0) {
+ this.hide.defer(this.seconds, this);
+ }
},
-
+ /**
+ * Set the Title Message HTML
+ * @param {String} html
+ */
setTitle : function(str)
{
- this.el.select('.roo-alert-title',true).first().dom.innerHTML = str;
+ this.titleEl.dom.innerHTML = str;
},
-
- setText : function(str)
+
+ /**
+ * Set the Body Message HTML
+ * @param {String} html
+ */
+ setHtml : function(str)
{
- this.el.select('.roo-alert-text',true).first().dom.innerHTML = str;
+ this.htmlEl.dom.innerHTML = str;
},
+ /**
+ * Set the Weight of the alert
+ * @param {String} (success|info|warning|danger) weight
+ */
setWeight : function(weight)
{
if(this.weight){
- this.el.select('.alert',true).first().removeClass('alert-' + this.weight);
+ this.el.removeClass('alert-' + this.weight);
}
this.weight = weight;
- this.el.select('.alert',true).first().addClass('alert-' + this.weight);
+ this.el.addClass('alert-' + this.weight);
},
-
+ /**
+ * Set the Icon of the alert
+ * @param {String} see fontawsome names (name without the 'fa-' bit)
+ */
setIcon : function(icon)
{
if(this.faicon){
- this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]);
+ this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
}
this.faicon = icon;
- this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]);
+ this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
},
-
+ /**
+ * Hide the Alert
+ */
hide: function()
{
this.el.hide();
},
-
+ /**
+ * Show the Alert
+ */
show: function()
{
this.el.show();
});
/*
- * - LGPL
- *
- * nav progress bar
- *
- */
-
-/**
- * @class Roo.bootstrap.NavProgressBar
- * @extends Roo.bootstrap.Component
- * Bootstrap NavProgressBar class
- *
- * @constructor
- * Create a new nav progress bar
- * @param {Object} config The config object
- */
-
-Roo.bootstrap.NavProgressBar = function(config){
- Roo.bootstrap.NavProgressBar.superclass.constructor.call(this, config);
-
- this.bullets = this.bullets || [];
-
-// Roo.bootstrap.NavProgressBar.register(this);
- this.addEvents({
- /**
- * @event changed
- * Fires when the active item changes
- * @param {Roo.bootstrap.NavProgressBar} this
- * @param {Roo.bootstrap.NavProgressItem} selected The item selected
- * @param {Roo.bootstrap.NavProgressItem} prev The previously selected item
- */
- 'changed': true
- });
-
-};
-
-Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
-
- bullets : [],
- barItems : [],
-
- getAutoCreate : function()
- {
- var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
-
- cfg = {
- 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);
-
- if(this.bullets.length){
- Roo.each(this.bullets, function(b){
- this.addItem(b);
- }, this);
- }
-
- this.format();
-
- },
-
- addItem : function(cfg)
- {
- var item = new Roo.bootstrap.NavProgressItem(cfg);
-
- item.parentId = this.id;
- item.render(this.el.select('.roo-navigation-bar', true).first(), null);
-
- 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.barItems.push(item);
-
- return item;
- },
-
- getActive : function()
- {
- var active = false;
-
- Roo.each(this.barItems, function(v){
-
- if (!v.isActive()) {
- return;
- }
-
- active = v;
- return false;
-
- });
-
- return active;
- },
-
- setActiveItem : function(item)
- {
- var prev = false;
-
- Roo.each(this.barItems, function(v){
- if (v.rid == item.rid) {
- return ;
- }
-
- if (v.isActive()) {
- v.setActive(false);
- prev = v;
- }
- });
-
- item.setActive(true);
-
- this.fireEvent('changed', this, item, prev);
- },
-
- getBarItem: function(rid)
- {
- var ret = false;
-
- Roo.each(this.barItems, function(e) {
- if (e.rid != rid) {
- return;
- }
-
- ret = e;
- return false;
- });
-
- return ret;
- },
-
- indexOfItem : function(item)
- {
- var index = false;
-
- Roo.each(this.barItems, function(v, i){
-
- if (v.rid != item.rid) {
- return;
- }
-
- index = i;
- return false
- });
-
- return index;
- },
-
- setActiveNext : function()
- {
- var i = this.indexOfItem(this.getActive());
-
- if (i > this.barItems.length) {
- return;
- }
-
- this.setActiveItem(this.barItems[i+1]);
- },
-
- setActivePrev : function()
- {
- var i = this.indexOfItem(this.getActive());
-
- if (i < 1) {
- return;
- }
-
- this.setActiveItem(this.barItems[i-1]);
- },
-
- 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);
-
- }
-
-});
-/*
- * - LGPL
- *
- * Nav Progress Item
- *
- */
-
-/**
- * @class Roo.bootstrap.NavProgressItem
- * @extends Roo.bootstrap.Component
- * Bootstrap NavProgressItem class
- * @cfg {String} rid the reference id
- * @cfg {Boolean} active (true|false) Is item active default false
- * @cfg {Boolean} disabled (true|false) Is item active default false
- * @cfg {String} html
- * @cfg {String} position (top|bottom) text position default bottom
- * @cfg {String} icon show icon instead of number
- *
- * @constructor
- * Create a new NavProgressItem
- * @param {Object} config The config object
- */
-Roo.bootstrap.NavProgressItem = function(config){
- Roo.bootstrap.NavProgressItem.superclass.constructor.call(this, config);
- this.addEvents({
- // raw events
- /**
- * @event click
- * The raw click event for the entire grid.
- * @param {Roo.bootstrap.NavProgressItem} this
- * @param {Roo.EventObject} e
- */
- "click" : true
- });
-
-};
-
-Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component, {
-
- rid : '',
- active : false,
- disabled : false,
- html : '',
- position : 'bottom',
- icon : false,
-
- getAutoCreate : function()
- {
- var iconCls = 'roo-navigation-bar-item-icon';
-
- iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
-
- var cfg = {
- tag: 'li',
- cls: 'roo-navigation-bar-item',
- cn : [
- {
- tag : 'i',
- cls : iconCls
- }
- ]
- };
-
- if(this.active){
- cfg.cls += ' active';
- }
- if(this.disabled){
- cfg.cls += ' disabled';
- }
-
- return cfg;
- },
-
- disable : function()
- {
- this.setDisabled(true);
- },
-
- enable : function()
- {
- this.setDisabled(false);
- },
-
- initEvents: function()
- {
- this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
-
- this.iconEl.on('click', this.onClick, this);
- },
-
- onClick : function(e)
- {
- e.preventDefault();
-
- if(this.disabled){
- return;
- }
-
- if(this.fireEvent('click', this, e) === false){
- return;
- };
-
- this.parent().setActiveItem(this);
- },
-
- isActive: function ()
- {
- return this.active;
- },
-
- setActive : function(state)
- {
- if(this.active == state){
- return;
- }
-
- this.active = state;
-
- if (state) {
- this.el.addClass('active');
- return;
- }
-
- this.el.removeClass('active');
-
- return;
- },
-
- setDisabled : function(state)
- {
- if(this.disabled == state){
- return;
- }
-
- this.disabled = state;
-
- if (state) {
- this.el.addClass('disabled');
- return;
- }
-
- this.el.removeClass('disabled');
- },
-
- tooltipEl : function()
- {
- return this.el.select('.roo-navigation-bar-item-icon', true).first();;
- }
-});
-
-
- /*
* - LGPL
*
* FieldLabel
*/
/**
- * @class Roo.bootstrap.FieldLabel
+ * @class Roo.bootstrap.form.FieldLabel
* @extends Roo.bootstrap.Component
* Bootstrap FieldLabel class
* @cfg {String} html contents of the element
* @param {Object} config The config object
*/
-Roo.bootstrap.FieldLabel = function(config){
+Roo.bootstrap.form.FieldLabel = function(config){
Roo.bootstrap.Element.superclass.constructor.call(this, config);
this.addEvents({
});
};
-Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.form.FieldLabel, Roo.bootstrap.Component, {
tag: 'label',
cls: '',
this.indicator.addClass('invisible');
}
- Roo.bootstrap.FieldLabel.register(this);
+ Roo.bootstrap.form.FieldLabel.register(this);
},
indicatorEl : function()
});
-Roo.apply(Roo.bootstrap.FieldLabel, {
+Roo.apply(Roo.bootstrap.form.FieldLabel, {
groups: {},
/**
* register a FieldLabel Group
- * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
+ * @param {Roo.bootstrap.form.FieldLabel} the FieldLabel to add
*/
register : function(label)
{
/**
* fetch a FieldLabel Group based on the target
* @param {string} target
- * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
+ * @returns {Roo.bootstrap.form.FieldLabel} the CheckBox group
*/
get: function(target) {
if (typeof(this.groups[target]) == 'undefined') {
/**
- * @class Roo.bootstrap.DateSplitField
+ * @class Roo.bootstrap.form.DateSplitField
* @extends Roo.bootstrap.Component
* Bootstrap DateSplitField class
* @cfg {string} fieldLabel - the label associated
* @param {Object} config The config object
*/
-Roo.bootstrap.DateSplitField = function(config){
- Roo.bootstrap.DateSplitField.superclass.constructor.call(this, config);
+Roo.bootstrap.form.DateSplitField = function(config){
+ Roo.bootstrap.form.DateSplitField.superclass.constructor.call(this, config);
this.addEvents({
// raw events
/**
* @event years
* getting the data of years
- * @param {Roo.bootstrap.DateSplitField} this
+ * @param {Roo.bootstrap.form.DateSplitField} this
* @param {Object} years
*/
"years" : true,
/**
* @event days
* getting the data of days
- * @param {Roo.bootstrap.DateSplitField} this
+ * @param {Roo.bootstrap.form.DateSplitField} this
* @param {Object} days
*/
"days" : true,
});
};
-Roo.extend(Roo.bootstrap.DateSplitField, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.form.DateSplitField, Roo.bootstrap.Component, {
fieldLabel : '',
labelAlign : 'top',
{
var _this = this;
- Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.DateSplitFiel.superclass.onRender.call(this, ct, position);
this.inputEl = this.el.select('.roo-date-split-field-group-value', true).first();
- this.dayField = new Roo.bootstrap.ComboBox({
+ this.dayField = new Roo.bootstrap.form.ComboBox({
allowBlank : this.dayAllowBlank,
alwaysQuery : true,
displayField : 'value',
this.dayField.render(this.el.select('.roo-date-split-field-day', true).first(), null);
- this.monthField = new Roo.bootstrap.MonthField({
+ this.monthField = new Roo.bootstrap.form.MonthField({
after : '<i class=\"fa fa-calendar\"></i>',
allowBlank : this.monthAllowBlank,
placeholder : this.monthPlaceholder,
this.monthField.render(this.el.select('.roo-date-split-field-month', true).first(), null);
- this.yearField = new Roo.bootstrap.ComboBox({
+ this.yearField = new Roo.bootstrap.form.ComboBox({
allowBlank : this.yearAllowBlank,
alwaysQuery : true,
displayField : 'value',
});
- /**
+
+
+/**
+ * @class Roo.bootstrap.LayoutMasonry
+ * @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Element Roo.bootstrap.Img Roo.bootstrap.MasonryBrick
+ * Bootstrap Layout Masonry class
*
* This is based on
* http://masonry.desandro.com
* The idea is to render all the bricks based on vertical width...
*
* The original code extends 'outlayer' - we might need to use that....
- *
- */
-
-/**
- * @class Roo.bootstrap.LayoutMasonry
- * @extends Roo.bootstrap.Component
- * Bootstrap Layout Masonry class
- *
* @constructor
* Create a new Element
* @param {Object} config The config object
*/
/**
- * @class Roo.bootstrap.NumberField
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.NumberField
+ * @extends Roo.bootstrap.form.Input
* Bootstrap NumberField class
*
*
* @param {Object} config The config object
*/
-Roo.bootstrap.NumberField = function(config){
- Roo.bootstrap.NumberField.superclass.constructor.call(this, config);
+Roo.bootstrap.form.NumberField = function(config){
+ Roo.bootstrap.form.NumberField.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.NumberField, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.NumberField, Roo.bootstrap.form.Input, {
/**
* @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
this.name = '';
- var cfg = Roo.bootstrap.NumberField.superclass.getAutoCreate.call(this);
+ var cfg = Roo.bootstrap.form.NumberField.superclass.getAutoCreate.call(this);
this.name = hiddenInput.name;
// private
initEvents : function()
{
- Roo.bootstrap.NumberField.superclass.initEvents.call(this);
+ Roo.bootstrap.form.NumberField.superclass.initEvents.call(this);
var allowed = "0123456789";
validateValue : function(value)
{
- if(!Roo.bootstrap.NumberField.superclass.validateValue.call(this, value)){
+ if(!Roo.bootstrap.form.NumberField.superclass.validateValue.call(this, value)){
return false;
}
*/
/**
- * @class Roo.bootstrap.RadioSet
- * @extends Roo.bootstrap.Input
+ * @class Roo.bootstrap.form.RadioSet
+ * @extends Roo.bootstrap.form.Input
+ * @children Roo.bootstrap.form.Radio
* Bootstrap RadioSet class
* @cfg {String} indicatorpos (left|right) default left
* @cfg {Boolean} inline (true|false) inline the element (default true)
* @param {Object} config The config object
*/
-Roo.bootstrap.RadioSet = function(config){
+Roo.bootstrap.form.RadioSet = function(config){
- Roo.bootstrap.RadioSet.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.RadioSet.superclass.constructor.call(this, config);
this.radioes = [];
- Roo.bootstrap.RadioSet.register(this);
+ Roo.bootstrap.form.RadioSet.register(this);
this.addEvents({
/**
* @event check
* Fires when the element is checked or unchecked.
- * @param {Roo.bootstrap.RadioSet} this This radio
- * @param {Roo.bootstrap.Radio} item The checked item
+ * @param {Roo.bootstrap.form.RadioSet} this This radio
+ * @param {Roo.bootstrap.form.Radio} item The checked item
*/
check : true,
/**
* @event click
* Fires when the element is click.
- * @param {Roo.bootstrap.RadioSet} this This radio set
- * @param {Roo.bootstrap.Radio} item The checked item
+ * @param {Roo.bootstrap.form.RadioSet} this This radio set
+ * @param {Roo.bootstrap.form.Radio} item The checked item
* @param {Roo.EventObject} e The event object
*/
click : true
};
-Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.form.RadioSet, Roo.bootstrap.form.Input, {
radioes : false,
});
-Roo.apply(Roo.bootstrap.RadioSet, {
+Roo.apply(Roo.bootstrap.form.RadioSet, {
groups: {},
* @type Number
*/
Roo.bootstrap.SplitBar.BOTTOM = 4;
-Roo.namespace("Roo.bootstrap.layout");/*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
/**
* @class Roo.bootstrap.layout.Manager
* @extends Roo.bootstrap.Component
+ * @abstract
* Base class for layout managers.
*/
Roo.bootstrap.layout.Manager = function(config)
/**
* @class Roo.bootstrap.layout.Border
* @extends Roo.bootstrap.layout.Manager
+ * @children Roo.bootstrap.panel.Content Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Grid
+ * @parent builder Roo.bootstrap.panel.Nest Roo.bootstrap.panel.Nest Roo.bootstrap.Modal
* This class represents a common layout manager used in desktop applications. For screenshots and more details,
* please see: examples/bootstrap/nested.html<br><br>
Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} center region to go in center
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} west region to go in west
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} east region to go in east
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} south region to go in south
+ */
+ /**
+ * @cfg {Roo.bootstrap.layout.Region} north region to go in north
+ */
+
+
+
+
parent : false, // this might point to a 'nest' or a ???
/**
}
Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
}
-});Roo.namespace("Roo.bootstrap.panel");/*
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* <script type="text/javascript">
*/
/**
- * @class Roo.ContentPanel
+ * @class Roo.bootstrap.paenl.Content
* @extends Roo.util.Observable
- * A basic ContentPanel element.
+ * @children Roo.bootstrap.Component
+ * @parent builder Roo.bootstrap.layout.Border
+ * A basic ContentPanel element. - a panel that contain any content (eg. forms etc.)
* @cfg {Boolean} fitToFrame True for this panel to adjust its size to fit when the region resizes (defaults to false)
* @cfg {Boolean} fitContainer When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container (defaults to false)
* @cfg {Boolean/Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
* @cfg {String} title The title for this panel
* @cfg {Array} adjustments Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
* @cfg {String} url Calls {@link #setUrl} with this value
- * @cfg {String} region (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
+ * @cfg {String} region [required] (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
* @cfg {String/Object} params When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {Boolean} loadOnce When used with {@link #url}, calls {@link #setUrl} with this value
* @cfg {String} content Raw content to fill content panel with (uses setContent on construction.)
* @cfg {Boolean} badges render the badges
* @cfg {String} cls extra classes to use
* @cfg {String} background (primary|secondary|success|info|warning|danger|light|dark)
-
+
* @constructor
* Create a new ContentPanel.
- * @param {String/HTMLElement/Roo.Element} el The container element for this panel
* @param {String/Object} config A string to set only the title or a config object
- * @param {String} content (optional) Set the HTML content for this panel
- * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+
*/
Roo.bootstrap.panel.Content = function( config){
* Fires when this tab is created
* @param {Roo.ContentPanel} this
*/
- "render" : true
+ "render" : true,
+
+ /**
+ * @event scroll
+ * Fires when this content is scrolled
+ * @param {Roo.ContentPanel} this
+ * @param {Event} scrollEvent
+ */
+ "scroll" : true
if(this.autoScroll && !this.iframe){
this.resizeEl.setStyle("overflow", "auto");
+ this.resizeEl.on('scroll', this.onScroll, this);
} else {
// fix randome scrolling
//this.el.on('scroll', function() {
iframe : false,
iframeEl : false,
+ /* Resize Element - use this to work out scroll etc. */
+ resizeEl : false,
+
setRegion : function(region){
this.region = region;
this.setActiveClass(region && !this.background);
this.el.update(content, loadScripts);
},
- ignoreResize : function(w, h){
+ ignoreResize : function(w, h)
+ {
+ return false; // always resize?
if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
return true;
}else{
getChildContainer: function () {
return this.getEl();
+ },
+
+
+ onScroll : function(e)
+ {
+ this.fireEvent('scroll', this, e);
}
* @constructor
* Create a new GridPanel.
* @cfg {Roo.bootstrap.Table} grid The grid for this panel
+ * @cfg {Roo.bootstrap.nav.Simplebar} toolbar the toolbar at the top of the grid.
* @param {Object} config A the config object
*/
};
-Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, {
+Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content,
+{
+ // private
+ is_resizing : false,
+
getId : function(){
return this.grid.id;
},
return this.grid;
},
- setSize : function(width, height){
+ setSize : function(width, height)
+ {
+ if (this.is_resizing) {
+ return;
+
+ }
+ this.is_resizing = true;
if(!this.ignoreResize(width, height)){
var grid = this.grid;
var size = this.adjustForComponents(width, height);
grid.autoSize();
}
+ this.is_resizing = false;
},
* Create a new Panel, that can contain a layout.Border.
*
*
- * @param {Roo.BorderLayout} layout The layout for this panel
* @param {String/Object} config A string to set only the title or a config object
*/
Roo.bootstrap.panel.Nest = function(config)
};
Roo.extend(Roo.bootstrap.panel.Nest, Roo.bootstrap.panel.Content, {
+ /**
+ * @cfg {Roo.BorderLayout} layout The layout for this panel
+ */
+ layout : false,
setSize : function(width, height){
if(!this.ignoreResize(width, height)){
* Availability: https://github.com/jackocnr/intl-tel-input.git
**/
-Roo.bootstrap.PhoneInputData = function() {
+Roo.bootstrap.form.PhoneInputData = function() {
var d = [
[
"Afghanistan (افغانستان)",
**/
/**
- * @class Roo.bootstrap.PhoneInput
- * @extends Roo.bootstrap.TriggerField
+ * @class Roo.bootstrap.form.PhoneInput
+ * @extends Roo.bootstrap.form.TriggerField
* An input with International dial-code selection
* @cfg {String} defaultDialCode default '+852'
* @param {Object} config Configuration options
*/
-Roo.bootstrap.PhoneInput = function(config) {
- Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config);
+Roo.bootstrap.form.PhoneInput = function(config) {
+ Roo.bootstrap.form.PhoneInput.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
-
+Roo.extend(Roo.bootstrap.form.PhoneInput, Roo.bootstrap.form.TriggerField, {
+ /**
+ * @cfg {Roo.data.Store} store [required] The data store to which this combo is bound (defaults to undefined)
+ */
listWidth: undefined,
selectedClass: 'active',
getAutoCreate : function()
{
- var data = Roo.bootstrap.PhoneInputData();
+ var data = Roo.bootstrap.form.PhoneInputData();
var align = this.labelAlign || this.parentLabelAlign();
var id = Roo.id();
initEvents : function()
{
this.createList();
- Roo.bootstrap.PhoneInput.superclass.initEvents.call(this);
+ Roo.bootstrap.form.PhoneInput.superclass.initEvents.call(this);
this.indicator = this.indicatorEl();
this.flag = this.flagEl();
});
/**
- * @class Roo.bootstrap.MoneyField
- * @extends Roo.bootstrap.ComboBox
+ * @class Roo.bootstrap.form.MoneyField
+ * @extends Roo.bootstrap.form.ComboBox
* Bootstrap MoneyField class
*
* @constructor
* @param {Object} config Configuration options
*/
-Roo.bootstrap.MoneyField = function(config) {
+Roo.bootstrap.form.MoneyField = function(config) {
- Roo.bootstrap.MoneyField.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.MoneyField.superclass.constructor.call(this, config);
};
-Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
+Roo.extend(Roo.bootstrap.form.MoneyField, Roo.bootstrap.form.ComboBox, {
/**
* @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
inputmd : 9,
inputsm : 9,
inputxs : 6,
-
+ /**
+ * @cfg {Roo.data.Store} store Store to lookup currency??
+ */
store : false,
getAutoCreate : function()
validateValue : function(value)
{
- if(!Roo.bootstrap.MoneyField.superclass.validateValue.call(this, value)){
+ if(!Roo.bootstrap.form.MoneyField.superclass.validateValue.call(this, value)){
return false;
}
-
\ No newline at end of file
+ // old names for form elements
+Roo.bootstrap.Form = Roo.bootstrap.form.Form;
+Roo.bootstrap.Input = Roo.bootstrap.form.Input;
+Roo.bootstrap.TextArea = Roo.bootstrap.form.TextArea;
+Roo.bootstrap.TriggerField = Roo.bootstrap.form.TriggerField;
+Roo.bootstrap.ComboBox = Roo.bootstrap.form.ComboBox;
+Roo.bootstrap.DateField = Roo.bootstrap.form.DateField;
+Roo.bootstrap.TimeField = Roo.bootstrap.form.TimeField;
+Roo.bootstrap.MonthField = Roo.bootstrap.form.MonthField;
+Roo.bootstrap.CheckBox = Roo.bootstrap.form.CheckBox;
+Roo.bootstrap.Radio = Roo.bootstrap.form.Radio;
+Roo.bootstrap.RadioSet = Roo.bootstrap.form.RadioSet;
+Roo.bootstrap.SecurePass = Roo.bootstrap.form.SecurePass;
+Roo.bootstrap.FieldLabel = Roo.bootstrap.form.FieldLabel;
+Roo.bootstrap.DateSplitField= Roo.bootstrap.form.DateSplitField;
+Roo.bootstrap.NumberField = Roo.bootstrap.form.NumberField;
+Roo.bootstrap.PhoneInput = Roo.bootstrap.form.PhoneInput;
+Roo.bootstrap.PhoneInputData= Roo.bootstrap.form.PhoneInputData;
+Roo.bootstrap.MoneyField = Roo.bootstrap.form.MoneyField;
+Roo.bootstrap.HtmlEditor = Roo.bootstrap.form.HtmlEditor;
+Roo.bootstrap.HtmlEditor.ToolbarStandard = Roo.bootstrap.form.HtmlEditorToolbarStandard;
+Roo.bootstrap.Markdown = Roo.bootstrap.form.Markdown;
+Roo.bootstrap.CardUploader = Roo.bootstrap.form.CardUploader;// depricated.
+Roo.bootstrap.Navbar = Roo.bootstrap.nav.Bar;
+Roo.bootstrap.NavGroup = Roo.bootstrap.nav.Group;
+Roo.bootstrap.NavHeaderbar = Roo.bootstrap.nav.Headerbar;
+Roo.bootstrap.NavItem = Roo.bootstrap.nav.Item;
+
+Roo.bootstrap.NavProgressBar = Roo.bootstrap.nav.ProgressBar;
+Roo.bootstrap.NavProgressBarItem = Roo.bootstrap.nav.ProgressBarItem;
+
+Roo.bootstrap.NavSidebar = Roo.bootstrap.nav.Sidebar;
+Roo.bootstrap.NavSidebarItem = Roo.bootstrap.nav.SidebarItem;
+
+Roo.bootstrap.NavSimplebar = Roo.bootstrap.nav.Simplebar;// deprciated
+Roo.bootstrap.Menu = Roo.bootstrap.menu.Menu;
+Roo.bootstrap.MenuItem = Roo.bootstrap.menu.Item;
+Roo.bootstrap.MenuSeparator = Roo.bootstrap.menu.Separator
+
projects / roojs1 / blobdiff