/*
* - 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 a = {
+ tag: 'a',
+ href : this.href || '#',
+ cls: '',
+ html : '',
+ cn : []
+ };
+
+ 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: [
- {
- tag: 'p',
- cls: '',
- html : ''
- }
- ]
+ cn: [ a ]
+ };
+
+ if (this.active) {
+ cfg.cls += ' active';
}
- if (this.html) {
- cfg.cn[0].html = this.html;
+ 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.active) {
- this.cls += ' active';
+ if(!this.buttonView){
+ var span = {
+ tag: 'span',
+ html : this.html || ''
+ };
+
+ a.cn.push(span);
+
}
+ if (this.badge !== '') {
+ a.cn.push({ tag: 'span', cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
+ }
+ if (this.menu) {
+
+ if(this.showArrow){
+ a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
+ }
+
+ a.cls += ' dropdown-toggle treeview' ;
+ }
- if (this.href) {
- cfg.cn[0].tag = 'a',
- cfg.cn[0].href = this.href;
+ return cfg;
+ },
+
+ 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));
}
- if (this.badge !== '') {
- cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
+ this.el.on('click', this.onClick, this);
+
+ if(this.badge !== ''){
+ this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
}
- if (this.menu) {
- cfg.cn[0].cls += ' dropdown-toggle';
- cfg.cn[0].html += '<span class="glyphicon glyphicon-chevron-down"></span>';
+ },
+
+ onClick : function(e)
+ {
+ if(this.disabled){
+ e.preventDefault();
+ return;
}
- // 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.preventDefault){
+ e.preventDefault();
}
+ this.fireEvent('click', this, e);
+ },
+
+ disable : function()
+ {
+ this.setDisabled(true);
+ },
+
+ enable : function()
+ {
+ this.setDisabled(false);
+ },
+
+ setDisabled : function(state)
+ {
+ if(this.disabled == state){
+ return;
+ }
- return cfg;
-
-
+ this.disabled = state;
+
+ if (state) {
+ this.el.addClass('disabled');
+ return;
+ }
+
+ this.el.removeClass('disabled');
+
+ return;
+ },
+
+ setActive : function(state)
+ {
+ if(this.active == state){
+ return;
+ }
+
+ this.active = state;
+
+ if (state) {
+ this.el.addClass('active');
+ return;
+ }
+
+ this.el.removeClass('active');
+
+ return;
+ },
+
+ isActive: function ()
+ {
+ return this.active;
+ },
+
+ setBadge : function(str)
+ {
+ if(!this.badgeEl){
+ return;
+ }
+
+ this.badgeEl.dom.innerHTML = str;
}
+
projects / roojs1 / blobdiff