* @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
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';
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 }) ;
}
- // html..
- a.cn.push(span);
- // then badge..
- if (this.badge !== '') {
+
+ 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 });
}
- // fi
+
if (this.menu) {
- a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
- a.cls += 'dropdown-toggle treeview' ;
+ 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);
+
+ 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);
+ 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;
}