Roo/bootstrap/NavSidebarItem.js
[roojs1] / Roo / bootstrap / NavSidebarItem.js
1 /*
2  * - LGPL
3  *
4  * sidebar item
5  *
6  *  li
7  *    <span> icon </span>
8  *    <span> text </span>
9  *    <span>badge </span>
10  */
11
12 /**
13  * @class Roo.bootstrap.NavSidebarItem
14  * @extends Roo.bootstrap.Component
15  * Bootstrap Navbar.NavSidebarItem class
16  * @constructor
17  * Create a new Navbar Button
18  * @param {Object} config The config object
19  */
20 Roo.bootstrap.NavSidebarItem = function(config){
21     Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this, config);
22     this.addEvents({
23         // raw events
24         /**
25          * @event click
26          * The raw click event for the entire grid.
27          * @param {Roo.EventObject} e
28          */
29         "click" : true,
30          /**
31             * @event changed
32             * Fires when the active item active state changes
33             * @param {Roo.bootstrap.Navbar.Item} this
34             * @param {boolean} state the new state
35              
36          */
37         'changed': true
38     });
39    
40 };
41
42 Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
43     
44     
45     getAutoCreate : function(){
46         
47         var cfg = {
48             tag: 'li',
49             cls: '',
50             cn: [ a ]
51         }
52         var a = {
53                 tag: 'a',
54                 href : '#'
55                 cls: '',
56                 html : ''
57                 }
58         
59         if (this.html) {
60             cfg.cn[0].html = this.html;
61         }
62         
63         if (this.active) {
64             this.cls += ' active';
65         }
66         
67         
68         
69         if (this.href) {
70             cfg.cn[0].tag = 'a',
71             cfg.cn[0].href = this.href;
72         }
73         
74         if (this.badge !== '') {
75             cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
76         }
77         
78         if (this.menu) {
79             cfg.cn[0].cls += ' dropdown-toggle treeview';
80             cfg.cn[0].html += '<span class="glyphicon glyphicon-chevron-down"></span>';
81         }
82         
83         // fixme - this should handle glyphicon or ico
84         if (this.glyphicon || this.icon) {
85             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
86             cfg.cn[0].html = '<i class="' +c+'"></i><span>' + cfg.cn[0].html  + '</span>'
87         }
88         
89         
90         return cfg;
91          
92            
93     }
94    
95      
96  
97 });
98  
99
100