/**
* @class Roo.bootstrap.NavSidebarItem
- * @extends Roo.bootstrap.Component
+ * @extends Roo.bootstrap.NavItem
* 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)
+ * {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, {
+ badgeWeight : 'default',
+
+ open: false,
+
+ buttonView : false,
+
+ buttonWeight : 'default',
+
+ buttonSize : 'md',
+
+ showArrow : true,
getAutoCreate : function(){
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: [ a ]
- }
- var span = {
- tag: 'span',
- html : this.html || ''
- }
-
+ };
if (this.active) {
cfg.cls += ' active';
}
- var right = false;
- // fixme - this should handle glyphicon or ico
+
+ 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;
- right = { tag : 'i', cls : c };
- a.cn.push(right) ;
+ a.cn.push({ tag : 'i', cls : c }) ;
+ }
+
+ if(!this.buttonView){
+ var span = {
+ tag: 'span',
+ html : this.html || ''
+ };
+
+ a.cn.push(span);
+
}
- 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) {
- right = right || { tag : 'i', cls : '' };
- a.cls += ' dropdown-toggle treeview';
- right.cls += 'glyphicon glyphicon-chevron-down';
+
+ if(this.showArrow){
+ a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
+ }
+
+ a.cls += ' dropdown-toggle treeview' ;
}
+ 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));
+ }
+ this.el.on('click', this.onClick, this);
- return cfg;
-
-
+ 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();
+ }
+
+ 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');
+
+ 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;
}
+