* @cfg {String} html content of button
* @cfg {String} badge text inside badge
* @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
- * @cfg {String} glyphicon name of glyphicon
- * @cfg {String} icon name of font awesome icon
+ * @cfg {String} glyphicon DEPRICATED - use fa
+ * @cfg {String} icon DEPRICATED - use fa
+ * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
* @cfg {Boolean} active Is item active
* @cfg {Boolean} disabled Is item disabled
html: '',
badge: '',
icon: false,
+ fa : false,
glyphicon: false,
active: false,
preventDefault : false,
tabId : false,
tagtype : 'a',
+ tag: 'li',
disabled : false,
animateRef : false,
was_active : false,
+ navLink: false,
+
getAutoCreate : function(){
var cfg = {
- tag: 'li',
+ tag: this.tag,
cls: 'nav-item'
};
cfg.cls += ' disabled';
}
- if (this.href || this.html || this.glyphicon || this.icon) {
+ if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
cfg.cn = [
{
tag: this.tagtype,
if (this.icon) {
cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
}
-
+ if (this.fa) {
+ cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>'
+ }
if(this.glyphicon) {
cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
}
return cfg;
},
+ onRender : function(ct, position)
+ {
+ // Roo.log("Call onRender: " + this.xtype);
+ if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
+ this.tag = 'div';
+ }
+
+ var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
+ this.navLink = this.el.select('nav-link').first();
+ return ret;
+ },
+
+
initEvents: function()
{
if (typeof (this.menu) != 'undefined') {
if (!state ) {
this.el.removeClass('active');
+ this.navLink ? this.navLink.removeClass('active') : false;
} else if (!this.el.hasClass('active')) {
+
this.el.addClass('active');
+ if (Roo.bootstrap.version == 4 && this.navLink ) {
+ this.navLink.addClass('active');
+ }
+
}
if (fire) {
this.fireEvent('changed', this, state);