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         
48         var a = {
49                 tag: 'a',
50                 href : '#'
51                 cls: '',
52                 html : '',
53                 cn : []
54         };
55         var cfg = {
56             tag: 'li',
57             cls: '',
58             cn: [ a ]
59         }
60         if (this.html) {
61             cfg.cn[0].html = this.html;
62         }
63         
64         if (this.active) {
65             this.cls += ' active';
66         }
67         
68         
69         
70         if (this.href) {
71             cfg.cn[0].tag = 'a',
72             cfg.cn[0].href = this.href;
73         }
74         
75         if (this.badge !== '') {
76             cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
77         }
78         
79         if (this.menu) {
80             cfg.cn[0].cls += ' dropdown-toggle treeview';
81             cfg.cn[0].html += '<span class="glyphicon glyphicon-chevron-down"></span>';
82         }
83         
84         // fixme - this should handle glyphicon or ico
85         if (this.glyphicon || this.icon) {
86             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
87             cfg.cn[0].html = '<i class="' +c+'"></i><span>' + cfg.cn[0].html  + '</span>'
88         }
89         
90         
91         return cfg;
92          
93            
94     }
95    
96      
97  
98 });
99  
100
101