* @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 a Menu
+ * @cfg {Roo.bootstrap.menu.Menu} menu a Menu
* @constructor
* Create a new button
+++ /dev/null
-/*
- * - LGPL
- *
- * menu
- *
- */
-
-/**
- * @class Roo.bootstrap.Menu
- * @extends Roo.bootstrap.Component
- * @children Roo.bootstrap.MenuItem
- * Bootstrap Menu class - container for MenuItems
- *
- * @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
- */
-
-
-Roo.bootstrap.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.superclass.constructor.call(this, config);
- if (this.registerMenu && this.type != 'treeview') {
- Roo.bootstrap.MenuMgr.register(this);
- }
-
-
- this.addEvents({
- /**
- * @event beforeshow
- * Fires before this menu is displayed (return false to block)
- * @param {Roo.menu.Menu} this
- */
- beforeshow : true,
- /**
- * @event beforehide
- * Fires before this menu is hidden (return false to block)
- * @param {Roo.menu.Menu} this
- */
- beforehide : true,
- /**
- * @event show
- * Fires after this menu is displayed
- * @param {Roo.menu.Menu} this
- */
- show : true,
- /**
- * @event hide
- * Fires after this menu is hidden
- * @param {Roo.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.menu.Menu} this
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- * @param {Roo.EventObject} e
- */
- click : true,
- /**
- * @event mouseover
- * Fires when the mouse is hovering over this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseover : true,
- /**
- * @event mouseout
- * Fires when the mouse exits this menu
- * @param {Roo.menu.Menu} this
- * @param {Roo.EventObject} e
- * @param {Roo.menu.Item} menuItem The menu item that was clicked
- */
- mouseout : true,
- /**
- * @event itemclick
- * Fires when a menu item contained in this menu is clicked
- * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
- * @param {Roo.EventObject} e
- */
- itemclick: true
- });
- this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
-};
-
-Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
-
- /// html : false,
-
- triggerEl : false, // is this set by component builder? -- it should really be fetched from parent()???
- type: false,
- /**
- * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
- */
- registerMenu : true,
-
- menuItems :false, // stores the menu items..
-
- hidden:true,
-
- parentMenu : false,
-
- stopEvent : true,
-
- 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;
- },
-
- getAutoCreate : function(){
-
- //if (['right'].indexOf(this.align)!==-1) {
- // cfg.cn[1].cls += ' pull-right'
- //}
-
- var cfg = {
- tag : 'ul',
- cls : 'dropdown-menu shadow' ,
- style : 'z-index:1000'
-
- };
-
- if (this.type === 'submenu') {
- cfg.cls = 'submenu active';
- }
- if (this.type === 'treeview') {
- cfg.cls = 'treeview-menu';
- }
-
- return cfg;
- },
- initEvents : function() {
-
- // 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');
- }
- }
- }
-
- if (Roo.isTouch) {
- this.el.on('touchstart' , this.onTouch, this);
- }
- this.el.on('click' , this.onClick, this);
-
- this.el.on("mouseover", this.onMouseOver, this);
- this.el.on("mouseout", this.onMouseOut, this);
-
- },
-
- findTargetItem : function(e)
- {
- var t = e.getTarget(".dropdown-menu-item", this.el, true);
- if(!t){
- return false;
- }
- //Roo.log(t); Roo.log(t.id);
- if(t && t.id){
- //Roo.log(this.menuitems);
- return this.menuitems.get(t.id);
-
- //return this.items.get(t.menuItemId);
- }
-
- return false;
- },
-
- onTouch : function(e)
- {
- Roo.log("menu.onTouch");
- //e.stopEvent(); this make the user popdown broken
- this.onClick(e);
- },
-
- onClick : function(e)
- {
- Roo.log("menu.onClick");
-
- var t = this.findTargetItem(e);
- if(!t || t.isContainer){
- return;
- }
- Roo.log(e);
- /*
- if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
- if(t == this.activeItem && t.shouldDeactivate(e)){
- this.activeItem.deactivate();
- delete this.activeItem;
- return;
- }
- if(t.canActivate){
- this.setActiveItem(t, true);
- }
- return;
-
-
- }
- */
-
- Roo.log('pass click event');
-
- t.onClick(e);
-
- this.fireEvent("click", this, t, e);
-
- var _this = this;
-
- if(!t.href.length || t.href == '#'){
- (function() { _this.hide(); }).defer(100);
- }
-
- },
-
- onMouseOver : function(e){
- var t = this.findTargetItem(e);
- //Roo.log(t);
- //if(t){
- // if(t.canActivate && !t.disabled){
- // this.setActiveItem(t, true);
- // }
- //}
-
- this.fireEvent("mouseover", this, e, t);
- },
- isVisible : function(){
- return !this.hidden;
- },
- onMouseOut : function(e){
- var t = this.findTargetItem(e);
-
- //if(t ){
- // if(t == this.activeItem && t.shouldDeactivate(e)){
- // this.activeItem.deactivate();
- // delete this.activeItem;
- // }
- //}
- this.fireEvent("mouseout", this, e, t);
- },
-
-
- /**
- * Displays this menu relative to another element
- * @param {String/HTMLElement/Roo.Element} element The element to align to
- * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
- * the element (defaults to this.defaultAlign)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
- */
- show : function(el, pos, parentMenu)
- {
- if (false === this.fireEvent("beforeshow", this)) {
- Roo.log("show canceled");
- return;
- }
- this.parentMenu = parentMenu;
- 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( xy , parentMenu, false);
- },
- /**
- * Displays this menu at a specific xy position
- * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
- * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
- */
- showAt : function(xy, parentMenu, /* private: */_e){
- this.parentMenu = parentMenu;
- if(!this.el){
- this.render();
- }
- if(_e !== false){
- this.fireEvent("beforeshow", this);
- //xy = this.el.adjustForConstraints(xy);
- }
-
- //this.el.show();
- this.hideMenuItems();
- this.hidden = false;
- if (this.triggerEl) {
- this.triggerEl.addClass('open');
- }
-
- this.el.addClass('show');
-
-
-
- // reassign x when hitting right
-
- // reassign y when hitting bottom
-
- // but the list may align on trigger left or trigger top... should it be a properity?
-
- if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
- this.el.setXY(xy);
- }
-
- this.focus();
- this.fireEvent("show", this);
- },
-
- focus : function(){
- return;
- if(!this.hidden){
- this.doFocus.defer(50, this);
- }
- },
-
- doFocus : function(){
- if(!this.hidden){
- this.focusEl.focus();
- }
- },
-
- /**
- * Hides this menu and optionally all parent menus
- * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
- */
- hide : function(deep)
- {
- if (false === this.fireEvent("beforehide", this)) {
- Roo.log("hide canceled");
- return;
- }
- this.hideMenuItems();
- if(this.el && this.isVisible()){
-
- if(this.activeItem){
- this.activeItem.deactivate();
- this.activeItem = null;
- }
- if (this.triggerEl) {
- this.triggerEl.removeClass('open');
- }
-
- this.el.removeClass('show');
- this.hidden = true;
- this.fireEvent("hide", this);
- }
- if(deep === true && this.parentMenu){
- this.parentMenu.hide(true);
- }
- },
-
- onTriggerClick : function(e)
- {
- Roo.log('trigger click');
-
- var target = e.getTarget();
-
- Roo.log(target.nodeName.toLowerCase());
-
- if(target.nodeName.toLowerCase() === 'i'){
- e.preventDefault();
- }
-
- },
-
- onTriggerPress : function(e)
- {
- Roo.log('trigger press');
- //Roo.log(e.getTarget());
- // Roo.log(this.triggerEl.dom);
-
- // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
- var pel = Roo.get(e.getTarget());
- if (pel.findParent('.dropdown-menu') || pel.findParent('.treeview-menu') ) {
- Roo.log('is treeview or dropdown?');
- return;
- }
-
- if(e.getTarget().nodeName.toLowerCase() !== 'i' && this.isLink){
- return;
- }
-
- if (this.isVisible()) {
- Roo.log('hide');
- this.hide();
- } else {
- Roo.log('show');
-
- this.show(this.triggerEl, this.align, false);
- }
-
- if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
- e.stopEvent();
- }
-
- },
-
-
- hideMenuItems : function()
- {
- Roo.log("hide Menu Items");
- if (!this.el) {
- return;
- }
-
- this.el.select('.open',true).each(function(aa) {
-
- aa.removeClass('open');
-
- });
- },
- addxtypeChild : function (tree, cntr) {
- var comp= Roo.bootstrap.Menu.superclass.addxtypeChild.call(this, tree, cntr);
-
- this.menuitems.add(comp);
- return comp;
-
- },
- getEl : function()
- {
- Roo.log(this.el);
- return this.el;
- },
-
- clear : function()
- {
- this.getEl().dom.innerHTML = '';
- this.menuitems.clear();
- }
-});
-
-
-
\ No newline at end of file
+++ /dev/null
-/*
- * - LGPL
- *
- * menu item
- *
- */
-
-
-/**
- * @class Roo.bootstrap.MenuItem
- * @extends Roo.bootstrap.Component
- * 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).
- * @cfg {Boolean} isContainer is it a container - just returns a drop down item..
- * @cfg {Boolean} active used on sidebars to highlight active itesm
- * @cfg {String} fa favicon to show on left of menu item.
- * @cfg {Roo.bootsrap.Menu} menu the child menu.
- *
- *
- * @constructor
- * Create a new MenuItem
- * @param {Object} config The config object
- */
-
-
-Roo.bootstrap.MenuItem = function(config){
- Roo.bootstrap.MenuItem.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.EventObject} e
- */
- "click" : true
- });
-};
-
-Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, {
-
- href : false,
- html : false,
- preventDefault: false,
- isContainer : false,
- active : false,
- fa: false,
-
- getAutoCreate : function(){
-
- if(this.isContainer){
- return {
- tag: 'li',
- cls: 'dropdown-menu-item '
- };
- }
- var ctag = {
- tag: 'span',
- html: 'Link'
- };
-
- var anc = {
- tag : 'a',
- cls : 'dropdown-item',
- href : '#',
- cn : [ ]
- };
-
- if (this.fa !== false) {
- anc.cn.push({
- tag : 'i',
- cls : 'fa fa-' + this.fa
- });
- }
-
- anc.cn.push(ctag);
-
-
- var cfg= {
- tag: 'li',
- cls: 'dropdown-menu-item',
- cn: [ anc ]
- };
- if (this.parent().type == 'treeview') {
- cfg.cls = 'treeview-menu';
- }
- if (this.active) {
- cfg.cls += ' active';
- }
-
-
-
- anc.href = this.href || cfg.cn[0].href ;
- ctag.html = this.html || cfg.cn[0].html ;
- return cfg;
- },
-
- initEvents: function()
- {
- if (this.parent().type == 'treeview') {
- this.el.select('a').on('click', this.onClick, this);
- }
-
- if (this.menu) {
- this.menu.parentType = this.xtype;
- this.menu.triggerEl = this.el;
- this.menu = this.addxtype(Roo.apply({}, this.menu));
- }
-
- },
- onClick : function(e)
- {
- Roo.log('item on click ');
-
- if(this.preventDefault){
- e.preventDefault();
- }
- //this.parent().hideMenuItems();
-
- this.fireEvent('click', this, e);
- },
- getEl : function()
- {
- return this.el;
- }
-});
-
-
-
-
\ No newline at end of file
+++ /dev/null
-/*
- * 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
- * Provides a common registry of all menu items on a page so that they can be easily accessed by id.
- * @singleton
- */
-Roo.bootstrap.MenuMgr = function(){
- var menus, active, groups = {}, attached = false, lastShow = new Date();
-
- // private - called when first menu is created
- function init(){
- menus = {};
- active = new Roo.util.MixedCollection();
- Roo.get(document).addKeyListener(27, function(){
- if(active.length > 0){
- hideAll();
- }
- });
- }
-
- // private
- function hideAll(){
- if(active && active.length > 0){
- var c = active.clone();
- c.each(function(m){
- m.hide();
- });
- }
- }
-
- // private
- function onHide(m){
- active.remove(m);
- if(active.length < 1){
- Roo.get(document).un("mouseup", onMouseDown);
-
- attached = false;
- }
- }
-
- // private
- function onShow(m){
- var last = active.last();
- lastShow = new Date();
- active.add(m);
- if(!attached){
- Roo.get(document).on("mouseup", onMouseDown);
-
- attached = true;
- }
- if(m.parentMenu){
- //m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
- m.parentMenu.activeChild = m;
- }else if(last && last.isVisible()){
- //m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
- }
- }
-
- // private
- function onBeforeHide(m){
- if(m.activeChild){
- m.activeChild.hide();
- }
- if(m.autoHideTimer){
- clearTimeout(m.autoHideTimer);
- delete m.autoHideTimer;
- }
- }
-
- // private
- function onBeforeShow(m){
- var pm = m.parentMenu;
- if(!pm && !m.allowOtherMenus){
- hideAll();
- }else if(pm && pm.activeChild && active != m){
- pm.activeChild.hide();
- }
- }
-
- // private this should really trigger on mouseup..
- function onMouseDown(e){
- Roo.log("on Mouse Up");
-
- if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".dropdown-menu") && !e.getTarget('.user-menu')){
- Roo.log("MenuManager hideAll");
- hideAll();
- e.stopEvent();
- }
-
-
- }
-
- // private
- function onBeforeCheck(mi, state){
- if(state){
- var g = groups[mi.group];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != mi){
- g[i].setChecked(false);
- }
- }
- }
- }
-
- return {
-
- /**
- * Hides all menus that are currently visible
- */
- hideAll : function(){
- hideAll();
- },
-
- // private
- register : function(menu){
- if(!menus){
- init();
- }
- menus[menu.id] = menu;
- menu.on("beforehide", onBeforeHide);
- menu.on("hide", onHide);
- menu.on("beforeshow", onBeforeShow);
- menu.on("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menu);
- menu.on("checkchange", onCheck);
- }
- },
-
- /**
- * Returns a {@link Roo.menu.Menu} object
- * @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
- * be used to generate and return a new Menu instance.
- */
- get : function(menu){
- if(typeof menu == "string"){ // menu id
- return menus[menu];
- }else if(menu.events){ // menu instance
- return menu;
- }
- /*else if(typeof menu.length == 'number'){ // array of menu items?
- return new Roo.bootstrap.Menu({items:menu});
- }else{ // otherwise, must be a config
- return new Roo.bootstrap.Menu(menu);
- }
- */
- return false;
- },
-
- // private
- unregister : function(menu){
- delete menus[menu.id];
- menu.un("beforehide", onBeforeHide);
- menu.un("hide", onHide);
- menu.un("beforeshow", onBeforeShow);
- menu.un("show", onShow);
- var g = menu.group;
- if(g && menu.events["checkchange"]){
- groups[g].remove(menu);
- menu.un("checkchange", onCheck);
- }
- },
-
- // private
- registerCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- if(!groups[g]){
- groups[g] = [];
- }
- groups[g].push(menuItem);
- menuItem.on("beforecheckchange", onBeforeCheck);
- }
- },
-
- // private
- unregisterCheckable : function(menuItem){
- var g = menuItem.group;
- if(g){
- groups[g].remove(menuItem);
- menuItem.un("beforecheckchange", onBeforeCheck);
- }
- }
- };
-}();
\ No newline at end of file
+++ /dev/null
-/*
- * - LGPL
- *
- * menu separator
- *
- */
-
-
-/**
- * @class Roo.bootstrap.MenuSeparator
- * @extends Roo.bootstrap.Component
- * Bootstrap MenuSeparator class
- *
- * @constructor
- * Create a new MenuItem
- * @param {Object} config The config object
- */
-
-
-Roo.bootstrap.MenuSeparator = function(config){
- Roo.bootstrap.MenuSeparator.superclass.constructor.call(this, config);
-};
-
-Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, {
-
- getAutoCreate : function(){
- var cfg = {
- cls: 'divider',
- tag : 'li'
- };
-
- return cfg;
- }
-
-});
-
-
-
-
\ No newline at end of file
-/*
- * - LGPL
- *
- * row
- *
- */
-
/**
* @class Roo.bootstrap.NavItem
* @extends Roo.bootstrap.Component
+ * @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 a Menu
+ * @cfg {Roo.bootstrap.menu.Menu} menu a Menu
* @constructor
* Create a new Navbar Item
// 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() {
-/*
- * - LGPL
- *
- * menu item
- *
- */
-Roo.bootstrap.menu = Roo.bootstrap.menu || {};
-
-/**
+ /**
* @class Roo.bootstrap.menu.Item
* @extends Roo.bootstrap.Component
+ * @licence LGPL
* Bootstrap MenuItem class
- * @cfg {Boolean} submenu (true | false) default false
+ * @cfg {Boolean} submenu 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
- *
+ * @cfg {Boolean} disabled is the item disabled - default false
+ * @cfg {Boolean} preventDefault stop trigger click event to parent elements - default true
+ * @cfg {String} fa Font awesome icon
+ * @cfg {String} pos (left|right) Submenu align to default right
+ * @cfg {Roo.bootsrap.Menu} menu the child menu.
+
*
* @constructor
- * Create a new Item
+ * Create a new Menu Item
* @param {Object} config The config object
*/
html : '',
preventDefault: true,
disable : false,
- icon : false,
+ active : false,
+ fa : false,
pos : 'right',
+ isContainer : false, // ?? only a <li drowdonw-menu-item">
+
getAutoCreate : function()
{
- var text = [
- {
- tag : 'span',
- cls : 'roo-menu-item-text',
- html : this.html
- }
- ];
- if(this.icon){
- text.unshift({
+ if(this.isContainer){
+ return {
+ tag: 'li',
+ cls: 'dropdown-menu-item '
+ };
+ }
+
+ var ctag = {
+ tag: 'span',
+ cls : 'roo-menu-item-text',
+ html : this.html
+ };
+
+ var anc = {
+ tag : 'a',
+ cls : 'dropdown-item',
+ href : this.href || '#',
+ cn : [ ]
+ };
+
+ if (this.fa !== false) {
+ anc.cn.push({
tag : 'i',
- cls : 'fa ' + this.icon
- })
+ cls : 'fa fa-' + this.fa
+ });
}
- var cfg = {
- tag : 'li',
- cn : [
- {
- tag : 'a',
- href : this.href || '#',
- cn : text
- }
- ]
+ anc.cn.push(ctag);
+
+
+ var cfg= {
+ tag: 'li',
+ cls: 'dropdown-menu-item',
+ cn: [ anc ]
};
+ if (this.parent().type == 'treeview') {
+ cfg.cls = 'treeview-menu';
+ }
+ if (this.active) {
+ cfg.cls += ' active';
+ }
- if(this.disable){
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'disabled' : (cfg.cls + ' disabled');
+ if(this.disabled){
+ cfg.cls += ' disabled'
}
if(this.submenu){
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'dropdown-submenu' : (cfg.cls + ' dropdown-submenu');
+ cfg.cls += 'dropdown-submenu';
if(this.pos == 'left'){
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? 'pull-left' : (cfg.cls + ' pull-left');
+ cfg.cls += ' pull-left';
}
}
-
+ anc.href = this.href || cfg.cn[0].href ;
+ ctag.html = this.html || cfg.cn[0].html ;
return cfg;
+
+
},
initEvents : function()
{
+ if (this.parent().type == 'treeview') {
+ this.el.select('a').on('click', this.onClick, this);
+ }
+ if (this.menu) {
+ this.menu.parentType = this.xtype;
+ this.menu.triggerEl = this.el;
+ this.menu = this.addxtype(Roo.apply({}, this.menu));
+ }
this.el.on('mouseover', this.onMouseOver, this);
this.el.on('mouseout', this.onMouseOut, this);
-/*
- * - 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
- *
+ * @licence LGPL
+ * @children Roo.bootstrap.menu.Item
+ * Bootstrap Menu class - container for MenuItems
*
+ * @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.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.menu.Manager.register(this);
+ }
+
this.addEvents({
/**
* @event beforeshow
- * Fires before this menu is displayed
- * @param {Roo.bootstrap.menu.Menu} this
+ * Fires before this menu is displayed (return false to block)
+ * @param {Roo.menu.Menu} this
*/
beforeshow : true,
/**
* @event beforehide
- * Fires before this menu is hidden
- * @param {Roo.bootstrap.menu.Menu} this
+ * Fires before this menu is hidden (return false to block)
+ * @param {Roo.menu.Menu} this
*/
beforehide : true,
/**
* @event show
* Fires after this menu is displayed
- * @param {Roo.bootstrap.menu.Menu} this
+ * @param {Roo.menu.Menu} this
*/
show : true,
/**
* @event hide
* Fires after this menu is hidden
- * @param {Roo.bootstrap.menu.Menu} this
+ * @param {Roo.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.menu.Menu} this
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ * @param {Roo.EventObject} e
+ */
+ click : true,
+ /**
+ * @event mouseover
+ * Fires when the mouse is hovering over this menu
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.EventObject} e
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ */
+ mouseover : true,
+ /**
+ * @event mouseout
+ * Fires when the mouse exits this menu
+ * @param {Roo.menu.Menu} this
+ * @param {Roo.EventObject} e
+ * @param {Roo.menu.Item} menuItem The menu item that was clicked
+ */
+ mouseout : true,
+ /**
+ * @event itemclick
+ * Fires when a menu item contained in this menu is clicked
+ * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
* @param {Roo.EventObject} e
*/
- click : true
+ itemclick: true
});
-
+ this.menuitems = new Roo.util.MixedCollection(false, function(o) { return o.el.id; });
};
Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component, {
- submenu : false,
- html : '',
- weight : 'default',
- icon : false,
- pos : 'bottom',
+ /// html : false,
+
+ triggerEl : false, // is this set by component builder? -- it should really be fetched from parent()???
+ type: false,
+ /**
+ * @cfg {Boolean} registerMenu True (default) - means that clicking on screen etc. hides it.
+ */
+ registerMenu : true,
+ menuItems :false, // stores the menu items..
- getChildContainer : function() {
- if(this.isSubMenu){
- return this.el;
- }
+ hidden:true,
- return this.el.select('ul.dropdown-menu', true).first();
+ parentMenu : false,
+
+ stopEvent : true,
+
+ 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;
},
- getAutoCreate : function()
- {
- var text = [
- {
- tag : 'span',
- cls : 'roo-menu-text',
- html : this.html
- }
- ];
-
- if(this.icon){
- text.unshift({
- tag : 'i',
- cls : 'fa ' + this.icon
- })
- }
-
-
+ getAutoCreate : function(){
+
+ //if (['right'].indexOf(this.align)!==-1) {
+ // cfg.cn[1].cls += ' pull-right'
+ //}
+
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'
- }
- ]
+ tag : 'ul',
+ cls : 'dropdown-menu shadow' ,
+ style : 'z-index:1000'
};
-
- if(this.pos == 'top'){
- cfg.cls += ' dropup';
+
+ if (this.type === 'submenu') {
+ cfg.cls = 'submenu active';
+ }
+ if (this.type === 'treeview') {
+ cfg.cls = 'treeview-menu';
}
- if(this.isSubMenu){
- cfg = {
- tag : 'ul',
- cls : 'dropdown-menu'
+ return cfg;
+ },
+ initEvents : function() {
+
+ // 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');
+ }
}
}
-
- return cfg;
+
+ if (Roo.isTouch) {
+ this.el.on('touchstart' , this.onTouch, this);
+ }
+ this.el.on('click' , this.onClick, this);
+
+ this.el.on("mouseover", this.onMouseOver, this);
+ this.el.on("mouseout", this.onMouseOut, this);
+
},
- onRender : function(ct, position)
+ findTargetItem : function(e)
{
- this.isSubMenu = ct.hasClass('dropdown-submenu');
+ var t = e.getTarget(".dropdown-menu-item", this.el, true);
+ if(!t){
+ return false;
+ }
+ //Roo.log(t); Roo.log(t.id);
+ if(t && t.id){
+ //Roo.log(this.menuitems);
+ return this.menuitems.get(t.id);
+
+ //return this.items.get(t.menuItemId);
+ }
- Roo.bootstrap.menu.Menu.superclass.onRender.call(this, ct, position);
+ return false;
},
- initEvents : function()
+ onTouch : function(e)
{
- if(this.isSubMenu){
+ Roo.log("menu.onTouch");
+ //e.stopEvent(); this make the user popdown broken
+ this.onClick(e);
+ },
+
+ onClick : function(e)
+ {
+ Roo.log("menu.onClick");
+
+ var t = this.findTargetItem(e);
+ if(!t || t.isContainer){
+ return;
+ }
+ Roo.log(e);
+ /*
+ if (Roo.isTouch && e.type == 'touchstart' && t.menu && !t.disabled) {
+ if(t == this.activeItem && t.shouldDeactivate(e)){
+ this.activeItem.deactivate();
+ delete this.activeItem;
+ return;
+ }
+ if(t.canActivate){
+ this.setActiveItem(t, true);
+ }
return;
+
+
}
+ */
+
+ Roo.log('pass click event');
- this.hidden = true;
+ t.onClick(e);
- this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
- this.triggerEl.on('click', this.onTriggerPress, this);
+ this.fireEvent("click", this, t, e);
- this.buttonEl = this.el.select('button.dropdown-button', true).first();
- this.buttonEl.on('click', this.onClick, this);
+ var _this = this;
- },
-
- list : function()
- {
- if(this.isSubMenu){
- return this.el;
+ if(!t.href.length || t.href == '#'){
+ (function() { _this.hide(); }).defer(100);
}
- 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();
- }
+ onMouseOver : function(e){
+ var t = this.findTargetItem(e);
+ //Roo.log(t);
+ //if(t){
+ // if(t.canActivate && !t.disabled){
+ // this.setActiveItem(t, true);
+ // }
+ //}
+
+ this.fireEvent("mouseover", this, e, t);
},
-
isVisible : function(){
return !this.hidden;
},
+ onMouseOut : function(e){
+ var t = this.findTargetItem(e);
+
+ //if(t ){
+ // if(t == this.activeItem && t.shouldDeactivate(e)){
+ // this.activeItem.deactivate();
+ // delete this.activeItem;
+ // }
+ //}
+ this.fireEvent("mouseout", this, e, t);
+ },
+
- show : function()
+ /**
+ * Displays this menu relative to another element
+ * @param {String/HTMLElement/Roo.Element} element The element to align to
+ * @param {String} position (optional) The {@link Roo.Element#alignTo} anchor position to use in aligning to
+ * the element (defaults to this.defaultAlign)
+ * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ */
+ show : function(el, pos, parentMenu)
{
- this.fireEvent("beforeshow", this);
+ if (false === this.fireEvent("beforeshow", this)) {
+ Roo.log("show canceled");
+ return;
+ }
+ this.parentMenu = parentMenu;
+ 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( xy , parentMenu, false);
+ },
+ /**
+ * Displays this menu at a specific xy position
+ * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
+ * @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
+ */
+ showAt : function(xy, parentMenu, /* private: */_e){
+ this.parentMenu = parentMenu;
+ if(!this.el){
+ this.render();
+ }
+ if(_e !== false){
+ this.fireEvent("beforeshow", this);
+ //xy = this.el.adjustForConstraints(xy);
+ }
+
+ //this.el.show();
+ this.hideMenuItems();
this.hidden = false;
- this.el.addClass('open');
+ if (this.triggerEl) {
+ this.triggerEl.addClass('open');
+ }
+
+ this.el.addClass('show');
- Roo.get(document).on("mouseup", this.onMouseUp, this);
+
+
+ // reassign x when hitting right
+
+ // reassign y when hitting bottom
+
+ // but the list may align on trigger left or trigger top... should it be a properity?
+
+ if(this.el.getStyle('top') != 'auto' && this.el.getStyle('top').slice(-1) != "%"){
+ this.el.setXY(xy);
+ }
+ this.focus();
this.fireEvent("show", this);
+ },
+
+ focus : function(){
+ return;
+ if(!this.hidden){
+ this.doFocus.defer(50, this);
+ }
+ },
+
+ doFocus : function(){
+ if(!this.hidden){
+ this.focusEl.focus();
+ }
+ },
+
+ /**
+ * Hides this menu and optionally all parent menus
+ * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
+ */
+ hide : function(deep)
+ {
+ if (false === this.fireEvent("beforehide", this)) {
+ Roo.log("hide canceled");
+ return;
+ }
+ this.hideMenuItems();
+ if(this.el && this.isVisible()){
+
+ if(this.activeItem){
+ this.activeItem.deactivate();
+ this.activeItem = null;
+ }
+ if (this.triggerEl) {
+ this.triggerEl.removeClass('open');
+ }
+
+ this.el.removeClass('show');
+ this.hidden = true;
+ this.fireEvent("hide", this);
+ }
+ if(deep === true && this.parentMenu){
+ this.parentMenu.hide(true);
+ }
+ },
+
+ onTriggerClick : function(e)
+ {
+ Roo.log('trigger click');
+ var target = e.getTarget();
+
+ Roo.log(target.nodeName.toLowerCase());
+
+ if(target.nodeName.toLowerCase() === 'i'){
+ e.preventDefault();
+ }
},
- hide : function()
+ onTriggerPress : function(e)
{
- this.fireEvent("beforehide", this);
+ Roo.log('trigger press');
+ //Roo.log(e.getTarget());
+ // Roo.log(this.triggerEl.dom);
+
+ // trigger only occurs on normal menu's -- if it's a treeview or dropdown... do not hide/show..
+ var pel = Roo.get(e.getTarget());
+ if (pel.findParent('.dropdown-menu') || pel.findParent('.treeview-menu') ) {
+ Roo.log('is treeview or dropdown?');
+ return;
+ }
- this.hidden = true;
- this.el.removeClass('open');
+ if(e.getTarget().nodeName.toLowerCase() !== 'i' && this.isLink){
+ return;
+ }
- Roo.get(document).un("mouseup", this.onMouseUp);
+ if (this.isVisible()) {
+ Roo.log('hide');
+ this.hide();
+ } else {
+ Roo.log('show');
+
+ this.show(this.triggerEl, this.align, false);
+ }
+
+ if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){
+ e.stopEvent();
+ }
- this.fireEvent("hide", this);
},
+
- onMouseUp : function()
+ hideMenuItems : function()
{
- this.hide();
- }
+ Roo.log("hide Menu Items");
+ if (!this.el) {
+ return;
+ }
+
+ this.el.select('.open',true).each(function(aa) {
+
+ aa.removeClass('open');
+
+ });
+ },
+ addxtypeChild : function (tree, cntr) {
+ var comp= Roo.bootstrap.menu.Menu.superclass.addxtypeChild.call(this, tree, cntr);
+
+ this.menuitems.add(comp);
+ return comp;
+
+ },
+ getEl : function()
+ {
+ Roo.log(this.el);
+ return this.el;
+ },
+ clear : function()
+ {
+ this.getEl().dom.innerHTML = '';
+ this.menuitems.clear();
+ }
});
-/*
- * - LGPL
- *
- * menu separator
- *
- */
-Roo.bootstrap.menu = Roo.bootstrap.menu || {};
-
+
/**
* @class Roo.bootstrap.menu.Separator
* @extends Roo.bootstrap.Component
+ * @licence LGPL
* Bootstrap Separator class
*
* @constructor
Roo.bootstrap.Header
-Roo.bootstrap.MenuMgr
-Roo.bootstrap.Menu
-Roo.bootstrap.MenuItem
-Roo.bootstrap.MenuSeparator
+Roo.bootstrap.menu.namespace
+Roo.bootstrap.menu.Manager
+Roo.bootstrap.menu.Menu
+Roo.bootstrap.menu.Item
+Roo.bootstrap.menu.Separator
+
Roo.bootstrap.Modal
Roo.bootstrap.MessageBox
"desc" : "container The id or element that will contain the toolbar",
"memberOf" : ""
},
- {
- "name" : "dataSource",
- "type" : "Roo.data.Store",
- "desc" : "The underlying data store providing the paged data",
- "memberOf" : ""
- },
{
"name" : "displayInfo",
"type" : "Boolean",
"desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n listeners : { \n 'click' : function(e) {\n ..... \n } ,\n .... \n } \n </code></pre>",
"memberOf" : "Roo.util.Observable"
},
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : ""
+ },
{
"name" : "name",
"type" : "string",
"desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n listeners : { \n 'click' : function(e) {\n ..... \n } ,\n .... \n } \n </code></pre>",
"memberOf" : "Roo.util.Observable"
},
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : "Roo.bootstrap.Button"
+ },
{
"name" : "multiple",
"type" : "Boolean",
"desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n listeners : { \n 'click' : function(e) {\n ..... \n } ,\n .... \n } \n </code></pre>",
"memberOf" : "Roo.util.Observable"
},
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : "Roo.bootstrap.Button"
+ },
{
"name" : "name",
"type" : "string",
"desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n listeners : { \n 'click' : function(e) {\n ..... \n } ,\n .... \n } \n </code></pre>",
"memberOf" : "Roo.util.Observable"
},
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : ""
+ },
{
"name" : "name",
"type" : "string",
},
"Roo.bootstrap.NavProgressBar" : {
"props" : [
+ {
+ "name" : "NavProgressBar:bullets[]",
+ "type" : "Roo.bootstrap.NavProgressItem",
+ "desc" : "Bullets for the Nav Progress bar for the toolbar",
+ "memberOf" : ""
+ },
{
"name" : "actionMode",
"type" : "String",
"desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n listeners : { \n 'click' : function(e) {\n ..... \n } ,\n .... \n } \n </code></pre>",
"memberOf" : "Roo.util.Observable"
},
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : "Roo.bootstrap.NavItem"
+ },
{
"name" : "name",
"type" : "string",
"desc" : "stacked | justified",
"memberOf" : "Roo.bootstrap.NavSimplebar"
},
+ {
+ "name" : "buttons[]",
+ "type" : "Roo.bootstrap.Button",
+ "desc" : "Buttons for the toolbar",
+ "memberOf" : ""
+ },
{
"name" : "can_build_overlaid",
"type" : "Boolean",
"desc" : "cutomer id",
"memberOf" : "Roo.bootstrap.Component"
},
- {
- "name" : "dataSource",
- "type" : "Roo.data.Store",
- "desc" : "The underlying data store providing the paged data",
- "memberOf" : ""
- },
{
"name" : "disableClass",
"type" : "String",
"desc" : "The number of records to display per page (defaults to 20)",
"memberOf" : ""
},
+ {
+ "name" : "store",
+ "type" : "Roo.data.Store",
+ "desc" : "The underlying data store providing the paged data",
+ "memberOf" : ""
+ },
{
"name" : "style",
"type" : "String",
{
"name" : "cm[]",
"type" : "Roo.grid.ColumnModel",
- "desc" : "A column for th grid.",
+ "desc" : "A column for the grid.",
"memberOf" : ""
},
{
};
</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.PagingToolbar</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">, {
+
</span><span class="jsdoc-comment">/**
- * @cfg {Roo.data.Store} dataSource
- * The underlying data store providing the paged data
- */
- /**
* @cfg {String/HTMLElement/Element} container
* container The id or element that will contain the toolbar
*/
* @cfg {Boolean} displayInfo
* True to display the displayMsg (defaults to false)
*/
+
+
/**
* @cfg {Number} pageSize
* The number of records to display per page (defaults to 20)
* @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 a Menu
+
* @constructor
* Create a new button
* @param {Object} config The config object
* @class Roo.bootstrap.ButtonGroup
* @extends Roo.bootstrap.Component
* Bootstrap ButtonGroup class
+ * @children Roo.bootstrap.Button Roo.bootstrap.Form
+ *
* @cfg {String} size lg | sm | xs (default empty normal)
* @cfg {String} align vertical | justified (default none)
* @cfg {String} direction up | down (default down)
-<html><head><title>Roo/bootstrap/Card.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
- * - LGPL
- *
- * This is BS4's Card element.. - similar to our containers probably..
- *
- */
-/**
+<html><head><title>Roo/bootstrap/Card.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
* @class Roo.bootstrap.Card
* @extends Roo.bootstrap.Component
* @children Roo.bootstrap.Component
- * Bootstrap Card class
+ * @licence LGPL
+ * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
*
*
* possible... may not be implemented..
/**
* @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.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.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
/**
* @class Roo.bootstrap.Menu
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.MenuItem
* Bootstrap Menu class - container for MenuItems
+ *
* @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 {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 a Menu
* @constructor
* Create a new Navbar Item
* Bootstrap NavProgressBar class
*
* @constructor
- * Create a new nav progress bar
+ * Create a new nav progress bar - a bar indicating step along a process
* @param {Object} config The config object
*/
};
</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.NavProgressBar</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">, {
-
+ </span><span class="jsdoc-comment">/**
+ * @cfg {Roo.bootstrap.NavProgressItem} NavProgressBar:bullets[]
+ * Bullets for the Nav Progress bar for the toolbar
+ */
</span><span class="jsdoc-var">bullets </span><span class="jsdoc-syntax">: [],
</span><span class="jsdoc-var">barItems </span><span class="jsdoc-syntax">: [],
</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.PagingToolbar</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.NavSimplebar</span><span class="jsdoc-syntax">, {
</span><span class="jsdoc-comment">/**
- * @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.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
/**
* @class Roo.bootstrap.RadioSet
* @extends Roo.bootstrap.Input
+ * @children Roo.bootstrap.Radio
* Bootstrap RadioSet class
* @cfg {String} indicatorpos (left|right) default left
* @cfg {Boolean} inline (true|false) inline the element (default true)
-<html><head><title>Roo/bootstrap/TabGroup.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
- * - LGPL
- *
- * column
- *
- */
-
-/**
+<html><head><title>Roo/bootstrap/TabGroup.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
* @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
* @class Roo.bootstrap.Table
* @licence LGBL
* @extends Roo.bootstrap.Component
+ * @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>
*
* @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 th grid.
+ * @cfg {Roo.grid.ColumnModel} cm[] A column for the grid.
*
* @cfg {String} cls table class
*
/**
* @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.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
"desc" : "The number of records to display per page (defaults to 20)",
"memberOf" : ""
},
- {
- "name" : "dataSource",
- "type" : "Roo.data.Store",
- "desc" : "The underlying data store providing the paged data",
- "memberOf" : ""
- },
{
"name" : "container",
"type" : "String/HTMLElement/Element",
"desc" : "array of button configs or elements to add (will be converted to a MixedCollection)",
"memberOf" : "Roo.Toolbar"
},
- {
- "name" : "displayInfo",
- "type" : "Boolean",
- "desc" : "True to display the displayMsg (defaults to false)",
- "memberOf" : ""
- },
{
"name" : "displayMsg",
"type" : "String",
"desc" : "The paging status message to display (defaults to \"Displaying {start} - {end} of {total}\")",
"memberOf" : ""
+ },
+ {
+ "name" : "displayInfo",
+ "type" : "Boolean",
+ "desc" : "True to display the displayMsg (defaults to false)",
+ "memberOf" : ""
}
],
"methods" : [
"type" : "Boolean",
"desc" : "default null - if the button ahs active state",
"memberOf" : ""
+ },
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : ""
}
],
"methods" : [
"type" : "Boolean",
"desc" : "default null - if the button ahs active state",
"memberOf" : "Roo.bootstrap.Button"
+ },
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : "Roo.bootstrap.Button"
}
],
"methods" : [
"Roo.Component",
"Roo.util.Observable"
],
- "desc" : "Bootstrap Card class\n\n\npossible... may not be implemented..",
+ "desc" : "Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?\n\n\npossible... may not be implemented..",
"isSingleton" : false,
"isStatic" : false,
"isBuiltin" : false,
"type" : "Boolean",
"desc" : "default null - if the button ahs active state",
"memberOf" : "Roo.bootstrap.Button"
+ },
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : "Roo.bootstrap.Button"
}
],
"methods" : [
"desc" : "the tab that this item activates.",
"memberOf" : ""
},
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : ""
+ },
{
"name" : "can_build_overlaid",
"type" : "Boolean",
"memberOf" : "Roo.util.Observable"
},
{
- "name" : "container_method",
+ "name" : "tooltip",
"type" : "string",
- "desc" : "method to fetch parents container element (used by NavHeaderbar - getHeaderChildContainer)",
+ "desc" : "Text for the tooltip",
"memberOf" : "Roo.bootstrap.Component"
},
{
- "name" : "tooltip",
+ "name" : "container_method",
"type" : "string",
- "desc" : "Text for the tooltip",
+ "desc" : "method to fetch parents container element (used by NavHeaderbar - getHeaderChildContainer)",
"memberOf" : "Roo.bootstrap.Component"
},
{
"desc" : "cutomer id",
"memberOf" : "Roo.bootstrap.Component"
},
+ {
+ "name" : "NavProgressBar:bullets[]",
+ "type" : "Roo.bootstrap.NavProgressItem",
+ "desc" : "Bullets for the Nav Progress bar for the toolbar",
+ "memberOf" : ""
+ },
{
"name" : "name",
"type" : "string",
"desc" : "the tab that this item activates.",
"memberOf" : "Roo.bootstrap.NavItem"
},
+ {
+ "name" : "menu",
+ "type" : "Roo.bootstrap.Menu",
+ "desc" : "a Menu",
+ "memberOf" : "Roo.bootstrap.NavItem"
+ },
{
"name" : "can_build_overlaid",
"type" : "Boolean",
"desc" : "t) alignment",
"memberOf" : "Roo.bootstrap.NavSimplebar"
},
+ {
+ "name" : "buttons[]",
+ "type" : "Roo.bootstrap.Button",
+ "desc" : "Buttons for the toolbar",
+ "memberOf" : ""
+ },
{
"name" : "pageSize",
"type" : "Number",
"desc" : "y)\nHow this component should hidden. Supported values are\n\"visibility\" (css visibility), \"offsets\" (negative offset position) and\n\"display\" (css display) - defaults to \"display\".",
"memberOf" : "Roo.Component"
},
+ {
+ "name" : "store",
+ "type" : "Roo.data.Store",
+ "desc" : "The underlying data store providing the paged data",
+ "memberOf" : ""
+ },
{
"name" : "tag",
"type" : "String",
"desc" : "Whether the component can move the Dom node when rendering (defaults to true).",
"memberOf" : "Roo.Component"
},
- {
- "name" : "dataSource",
- "type" : "Roo.data.Store",
- "desc" : "The underlying data store providing the paged data",
- "memberOf" : ""
- },
{
"name" : "container",
"type" : "String/HTMLElement/Element",
{
"name" : "cm[]",
"type" : "Roo.grid.ColumnModel",
- "desc" : "A column for th grid.",
+ "desc" : "A column for the grid.",
"memberOf" : ""
},
{
* @class Roo.bootstrap.ButtonGroup
* @extends Roo.bootstrap.Component
* Bootstrap ButtonGroup class
+ * @children Roo.bootstrap.Button Roo.bootstrap.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 a Menu
+
* @constructor
* Create a new button
* @param {Object} config The config object
}
});
- /*
- * - LGPL
- *
- * This is BS4's Card element.. - similar to our containers probably..
- *
- */
-/**
+ /**
* @class Roo.bootstrap.Card
* @extends Roo.bootstrap.Component
* @children Roo.bootstrap.Component
- * Bootstrap Card class
+ * @licence LGPL
+ * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
*
*
* possible... may not be implemented..
/**
* @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
/**
* @class Roo.bootstrap.Menu
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.MenuItem
* Bootstrap Menu class - container for MenuItems
+ *
* @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 {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 a Menu
* @constructor
* Create a new Navbar Item
* @class Roo.bootstrap.Table
* @licence LGBL
* @extends Roo.bootstrap.Component
+ * @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>
*
* @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 th grid.
+ * @cfg {Roo.grid.ColumnModel} cm[] A column for the grid.
*
* @cfg {String} cls table class
*
/**
* @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.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
Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
/**
- * @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
*/
/**
* Bootstrap NavProgressBar class
*
* @constructor
- * Create a new nav progress bar
+ * Create a new nav progress bar - a bar indicating step along a process
* @param {Object} config The config object
*/
};
Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
-
+ /**
+ * @cfg {Roo.bootstrap.NavProgressItem} NavProgressBar:bullets[]
+ * Bullets for the Nav Progress bar for the toolbar
+ */
bullets : [],
barItems : [],
/**
* @class Roo.bootstrap.RadioSet
* @extends Roo.bootstrap.Input
+ * @children Roo.bootstrap.Radio
* Bootstrap RadioSet class
* @cfg {String} indicatorpos (left|right) default left
* @cfg {Boolean} inline (true|false) inline the element (default true)
};
Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
- /**
- * @cfg {Roo.data.Store} dataSource
- * The underlying data store providing the paged data
- */
+
/**
* @cfg {String/HTMLElement/Element} container
* container The id or element that will contain the toolbar
* @cfg {Boolean} displayInfo
* True to display the displayMsg (defaults to false)
*/
+
+
/**
* @cfg {Number} pageSize
* The number of records to display per page (defaults to 20)
};
Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
- /**
- * @cfg {Roo.data.Store} dataSource
- * The underlying data store providing the paged data
- */
+
/**
* @cfg {String/HTMLElement/Element} container
* container The id or element that will contain the toolbar
* @cfg {Boolean} displayInfo
* True to display the displayMsg (defaults to false)
*/
+
+
/**
* @cfg {Number} pageSize
* The number of records to display per page (defaults to 20)
projects / roojs1 / commitdiff