/*
* - LGPL
*
- * row
- *
+ * sidebar item
+ *
+ * li
+ * <span> icon </span>
+ * <span> text </span>
+ * <span>badge </span>
*/
/**
* @class Roo.bootstrap.NavSidebarItem
- * @extends Roo.bootstrap.Component
+ * @extends Roo.bootstrap.NavItem
* Bootstrap Navbar.NavSidebarItem class
- * @cfg {String} href link to
- * @cfg {String} html content of button
- * @cfg {String} badge text inside badge
- * @cfg {String} glyphicon name of glyphicon
- * @cfg {String} icon name of font awesome icon
- * @cfg {Boolean} active Is item active
- * @cfg {Boolean} preventDefault (true | false) default false
- * @cfg {String} tabId the tab that this item activates.
-
+ * {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)
+ * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
+ * {String} buttonSize (sm|md|lg)the extra classes for the button
+ * {Boolean} showArrow show arrow next to the text (default true)
* @constructor
* Create a new Navbar Button
* @param {Object} config The config object
/**
* @event changed
* Fires when the active item active state changes
- * @param {Roo.bootstrap.Navbar.Item} this
+ * @param {Roo.bootstrap.NavSidebarItem} this
* @param {boolean} state the new state
*/
Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, {
- href: false,
- html: '',
- badge: '',
- icon: false,
- glyphicon: false,
- active: false,
- preventDefault : false,
- tabId : false,
+ badgeWeight : 'default',
+
+ open: false,
+
+ buttonView : false,
+
+ buttonWeight : 'default',
+
+ buttonSize : 'md',
+
+ showArrow : true,
getAutoCreate : function(){
- var cfg = {
- tag: 'li',
- cls: '',
- cn: [
- {
- tag: 'p',
+
+ var a = {
+ tag: 'a',
+ href : this.href || '#',
cls: '',
- html : ''
- }
- ]
- }
+ html : '',
+ cn : []
+ };
- if (this.html) {
- cfg.cn[0].html = this.html;
+ if(this.buttonView){
+ a = {
+ tag: 'button',
+ href : this.href || '#',
+ cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize + 'roo-button-dropdown-toggle',
+ html : this.html,
+ cn : []
+ };
}
+ var cfg = {
+ tag: 'li',
+ cls: '',
+ cn: [ a ]
+ };
+
if (this.active) {
- this.cls += ' active';
+ cfg.cls += ' active';
}
+ if (this.disabled) {
+ cfg.cls += ' disabled';
+ }
+ if (this.open) {
+ cfg.cls += ' open x-open';
+ }
+ // left icon..
+ if (this.glyphicon || this.icon) {
+ var c = this.glyphicon ? ('glyphicon glyphicon-'+this.glyphicon) : this.icon;
+ a.cn.push({ tag : 'i', cls : c }) ;
+ }
-
- if (this.href) {
- cfg.cn[0].tag = 'a',
- cfg.cn[0].href = this.href;
+ if(!this.buttonView){
+ var span = {
+ tag: 'span',
+ html : this.html || ''
+ };
+
+ a.cn.push(span);
+
}
if (this.badge !== '') {
- cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
+ a.cn.push({ tag: 'span', cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
}
if (this.menu) {
- cfg.cn[0].cls += ' dropdown-toggle';
- cfg.cn[0].html += '<span class="glyphicon glyphicon-chevron-down"></span>';
- }
-
- // fixme - this should handle glyphicon or ico
- if (this.glyphicon || this.icon) {
- var c = this.glyphicon ? ('glyphicon glyphicon-'+this.glyphicon) : this.icon;
- cfg.cn[0].html = '<i class="' +c+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
+ if(this.showArrow){
+ a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
+ }
+
+ a.cls += ' dropdown-toggle treeview' ;
}
-
return cfg;
-
-
},
- initEvents: function() {
- // Roo.log('init events?');
- // Roo.log(this.el.dom);
- this.el.select('a',true).on('click', this.onClick, this);
- // at this point parent should be available..
- this.parent().register(this);
+
+ initEvents : function()
+ {
+ if (typeof (this.menu) != 'undefined') {
+ this.menu.parentType = this.xtype;
+ this.menu.triggerEl = this.el;
+ this.menu = this.addxtype(Roo.apply({}, this.menu));
+ }
+
+ this.el.on('click', this.onClick, this);
+
+ if(this.badge !== ''){
+ this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
+ }
+
},
onClick : function(e)
{
+ if(this.disabled){
+ e.preventDefault();
+ return;
+ }
+
if(this.preventDefault){
e.preventDefault();
}
- if(this.fireEvent('click', this, e) === false){
+ this.fireEvent('click', this, e);
+ },
+
+ disable : function()
+ {
+ this.setDisabled(true);
+ },
+
+ enable : function()
+ {
+ this.setDisabled(false);
+ },
+
+ setDisabled : function(state)
+ {
+ if(this.disabled == state){
return;
- };
+ }
+
+ this.disabled = state;
+
+ if (state) {
+ this.el.addClass('disabled');
+ return;
+ }
+
+ this.el.removeClass('disabled');
- if (['tabs','pills'].indexOf(this.parent().type)!==-1) {
- if (typeof(this.parent().setActiveItem) !== 'undefined') {
- this.parent().setActiveItem(this);
- }
-
-
-
- }
+ return;
},
- isActive: function () {
- return this.active
- },
- setActive : function(state, fire)
+ setActive : function(state)
{
+ if(this.active == state){
+ return;
+ }
+
this.active = state;
- if (!state ) {
- this.el.removeClass('active');
- } else if (!this.el.hasClass('active')) {
+
+ if (state) {
this.el.addClass('active');
+ return;
}
- if (fire) {
- this.fireEvent('changed', this, state);
+
+ this.el.removeClass('active');
+
+ return;
+ },
+
+ isActive: function ()
+ {
+ return this.active;
+ },
+
+ setBadge : function(str)
+ {
+ if(!this.badgeEl){
+ return;
}
-
-
+
+ this.badgeEl.dom.innerHTML = str;
}
- // this should not be here...
+
+
+
});
projects / roojs1 / blobdiff