4 * base class for bootstrap elements..
8 Roo.bootstrap = Roo.bootstrap || {};
10 * @class Roo.bootstrap.Component
11 * @extends Roo.Component
12 * Bootstrap Component base class
13 * @cfg {String} cls css class
14 * @cfg {String} style any extra css
17 * Do not use directly - it does not do anything..
18 * @param {Object} config The config object
23 Roo.bootstrap.Component = function(config){
24 Roo.bootstrap.Component.superclass.constructor.call(this, config);
27 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
35 initEvents : function() { },
40 // returns the parent component..
41 return Roo.ComponentMgr.get(this.parentId)
47 onRender : function(ct, position)
49 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
53 var cfg = Roo.apply({}, this.getAutoCreate());
57 cfg.cls += ' ' + this.cls;
59 if (this.style) { // fixme needs to support more complex style data.
60 cfg.style = this.style;
62 this.el = ct.createChild(cfg, position);
63 if(this.tabIndex !== undefined){
64 this.el.dom.setAttribute('tabIndex', this.tabIndex);
70 getChildContainer : function()
75 addxtype : function (tree, cntr) {
77 cntr = typeof(cntr == 'undefined' ) ? 'getChildContainer' : cntr;
79 if (tree.xtype != 'Body') {
81 cn = Roo.factory(tree);
83 cn.parentType = this.xtype; //??
84 cn.parentId = this.id;
85 cn.render(this[cntr]());
86 // then add the element..
89 if (typeof (tree.menu) != 'undefined') {
90 tree.menu.parentType = cn.xtype;
91 tree.menu.triggerEl = cn.el;
92 nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
95 if (typeof (tree.buttons) != 'undefined' && typeof(cn.getButtonContainer) == 'function') {
97 for(var i =0;i < tree.buttons.length;i++) {
98 nitems.push(cn.addxtype(Roo.apply({}, tree.buttons[i]), 'getButtonContainer'));
103 if (!tree.items || !tree.items.length) {
107 var items = tree.items;
110 //Roo.log(items.length);
112 for(var i =0;i < items.length;i++) {
113 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
133 Roo.bootstrap.Body = function(config){
134 Roo.bootstrap.Body.superclass.constructor.call(this, config);
137 Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component, {
142 onRender : function(ct, position){
143 this.el = Roo.get(document.body);
145 //this.el.addClass([this.fieldClass, this.cls]);
163 * @class Roo.bootstrap.ButtonGroup
164 * @extends Roo.bootstrap.Component
165 * Bootstrap ButtonGroup class
166 * @cfg {string} size lg | sm | xs (default empty normal)
167 * @cfg {string} align vertical | justified (default none)
168 * @cfg {string} direction up | down (default down)
173 * @param {Object} config The config object
176 Roo.bootstrap.ButtonGroup = function(config){
177 Roo.bootstrap.ButtonGroup.superclass.constructor.call(this, config);
180 Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, {
193 getAutoCreate : function(){
195 var cfg = Roo.apply({}, Roo.bootstrap.ButtonGroup.superclass.getAutoCreate.call(this));
197 cfg.html = this.html || cfg.html;
208 if (['vertical','justified'].indexOf(this.align)!==-1) {
209 cfg.cls = 'btn-group-' + this.align;
211 if (this.align == 'justified') {
212 console.log(this.items);
216 if (['lg','sm','xs'].indexOf(this.size)!==-1) {
217 cfg.cls += ' btn-group-' + this.size;
220 if (this.direction == 'up') {
221 cfg.cls += ' dropup' ;
237 * @class Roo.bootstrap.Button
238 * @extends Roo.bootstrap.Component
239 * Bootstrap Button class
240 * @cfg {String} html The button content
241 * @cfg {String} weight default (or empty) | primary | success | info | warning
242 * @cfg {String} size empty | lg | sm | xs
243 * @cfg {String} tag empty | a | input | submit
244 * @cfg {String} href empty or href
245 * @cfg {Boolean} disabled false | true
246 * @cfg {Boolean} isClose false | true
247 * @cfg {String} empty | see glyphicon reference list
248 * @cfg {String} badge text for badge
251 * Create a new button
252 * @param {Object} config The config object
256 Roo.bootstrap.Button = function(config){
257 Roo.bootstrap.Button.superclass.constructor.call(this, config);
262 * The raw click event for the entire grid.
263 * @param {Roo.EventObject} e
269 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
290 getAutoCreate : function(){
297 if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
298 throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
303 cfg.html = this.html || cfg.html;
305 if (this.toggle===true) {
313 'data-off-text':'OFF',
314 cls: 'slider-button',
320 if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
321 cfg.cls += ' '+this.weight;
330 cfg["aria-hidden"] = true;
332 cfg.html = "×";
338 if (this.theme==='default') {
341 if (this.parentType != 'Navbar') {
342 this.weight = this.weight.length ? this.weight : 'default';
344 if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
346 cfg.cls += ' btn-' + this.weight;
348 } else if (this.theme==='glow') {
353 if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
355 cfg.cls += ' ' + this.weight;
361 this.cls += ' inverse';
366 cfg.cls += ' active';
369 cfg.cls += this.size.length ? (' btn-' + this.size) : '';
371 //gsRoo.log(this.parentType);
372 if (this.parentType === 'Navbar') {
379 href : this.href || '#'
382 cfg.cn[0].html = this.html + ' <span class="caret"></span>';
383 cfg.cls += ' dropdown';
388 } else if (this.menu) {
390 cfg.cls += ' dropdown test';
396 cfg.disabled = 'disabled';
400 Roo.log('changing to ul' );
402 this.glyphicon = 'caret';
405 if (this.glyphicon) {
406 cfg.html = ' ' + cfg.html;
411 cls: 'glyphicon glyphicon-' + this.glyphicon
437 if (cfg.tag !== 'a' && this.href !== '') {
438 throw "Tag must be a to set href.";
439 } else if (this.href.length > 0) {
440 cfg.href = this.href;
445 initEvents: function() {
446 // Roo.log('init events?');
447 // Roo.log(this.el.dom);
448 this.el.select('a',true).on('click',
450 this.fireEvent('click', this);
466 * @class Roo.bootstrap.Column
467 * @extends Roo.bootstrap.Component
468 * Bootstrap Column class
469 * @cfg {number} colspan Number of columsn to span
472 * Create a new Column
473 * @param {Object} config The config object
476 Roo.bootstrap.Column = function(config){
477 Roo.bootstrap.Column.superclass.constructor.call(this, config);
480 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component, {
489 getAutoCreate : function(){
490 var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
498 ['xs','sm','md','lg'].map(function(size){
499 if (settings[size]) {
500 cfg.cls += ' col-' + size + '-' + settings[size];
520 * @class Roo.bootstrap.Container
521 * @extends Roo.bootstrap.Component
522 * Bootstrap Container class
523 * @cfg {Boolean} jumbotron is it a jubmotron element
524 * @cfg {String} html content of element
527 * Create a new Container
528 * @param {Object} config The config object
531 Roo.bootstrap.Container = function(config){
532 Roo.bootstrap.Container.superclass.constructor.call(this, config);
535 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component, {
537 jumbotron : false, // doc me
539 getAutoCreate : function(){
545 if (this.jumbotron) {
546 cfg.cls = 'jumbotron';
552 cfg.html = this.html || cfg.html;
566 * @class Roo.bootstrap.Form
567 * @extends Roo.bootstrap.Component
568 * Bootstrap Form class
569 * @cfg {String} method GET | POST (default POST)
570 * @cfg {String} labelAlign top | left (default top)
573 * Create a new button
574 * @param {Object} config The config object
578 Roo.bootstrap.Form = function(config){
579 Roo.bootstrap.Form.superclass.constructor.call(this, config);
582 * @event clientvalidation
583 * If the monitorValid config option is true, this event fires repetitively to notify of valid state
585 * @param {Boolean} valid true if the form has passed client-side validation
587 clientvalidation: true,
590 * Fires when the form is rendered
591 * @param {Roo.form.Form} form
597 Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, {
600 getAutoCreate : function(){
604 method : this.method || 'POST',
605 id : this.id || Roo.id(),
609 if (this.labelAlign == 'left' ) {
610 cfg.cls += ' form-horizontal';
627 * @class Roo.bootstrap.ButtonGroup
628 * @extends Roo.bootstrap.Component
629 * Bootstrap ButtonGroup class
630 * @cfg {string} size lg | sm | xs (default empty normal)
631 * @cfg {string} align vertical | justified (default none)
632 * @cfg {string} direction up | down (default down)
637 * @param {Object} config The config object
640 Roo.bootstrap.Img = function(config){
641 Roo.bootstrap.Img.superclass.constructor.call(this, config);
644 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
652 cls: 'img-responsive',
656 getAutoCreate : function(){
658 var cfg = Roo.apply({}, Roo.bootstrap.Img.superclass.getAutoCreate.call(this));
660 cfg.html = this.html || cfg.html;
662 cfg.src = this.src || cfg.src;
664 if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
665 cfg.cls += ' img-' + this.border;
684 * @class Roo.bootstrap.Input
685 * @extends Roo.bootstrap.Component
686 * Bootstrap Input class
687 * @cfg {boolean} disabled is it disabled
688 * @cfg {string} fieldLabel - the label associated
689 * @cfg {string} inputType - input / file submit ...
690 * @cfg {string} placeholder - placeholder to put in text.
691 * @cfg {string} before - input group add on before
692 * @cfg {string} after - input group add on after
697 * @param {Object} config The config object
700 Roo.bootstrap.Input = function(config){
701 Roo.bootstrap.Input.superclass.constructor.call(this, config);
705 Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, {
714 getAutoCreate : function(){
716 var parent = this.parent();
718 var align = parent.labelAlign;
723 cls: 'form-group' //input-group
729 type : this.inputType,
730 cls : 'form-control',
731 placeholder : this.placeholder || ''
738 var inputblock = input;
740 if (this.before || this.after) {
749 cls : 'input-group-addon',
753 inputblock.cn.push(input);
757 cls : 'input-group-addon',
766 case 'left' && this.fieldLabel:
773 cls : 'col-sm-2 control-label',
774 html : this.fieldLabel
786 case this.fieldLabel:
792 //cls : 'input-group-addon',
793 html : this.fieldLabel
821 setDisabled : function(v)
823 var i = this.el.select('input',true).dom;
825 i.removeAttribute('disabled');
829 i.setAttribute('disabled','true');
841 * @class Roo.bootstrap.Header
842 * @extends Roo.bootstrap.Component
843 * Bootstrap Header class
844 * @cfg {String} html content of header
845 * @cfg {Number} level (1|2|3|4|5|6|7) default 1
849 * Create a new Header
850 * @param {Object} config The config object
854 Roo.bootstrap.Header = function(config){
855 Roo.bootstrap.Header.superclass.constructor.call(this, config);
858 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component, {
866 getAutoCreate : function(){
869 tag: 'h' + (1 *this.level),
870 html: this.html || 'fill in html'
888 * @class Roo.bootstrap.Menu
889 * @extends Roo.bootstrap.Component
890 * Bootstrap Menu class - container for MenuItems
894 * @param {Object} config The config object
898 Roo.bootstrap.Menu = function(config){
899 Roo.bootstrap.Menu.superclass.constructor.call(this, config);
902 Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, {
909 getChildContainer : function() {
913 getAutoCreate : function(){
915 //if (['right'].indexOf(this.align)!==-1) {
916 // cfg.cn[1].cls += ' pull-right'
920 cls : 'dropdown-menu'
924 if (this.type==='submenu') {
925 cfg.cls='submenu active'
930 initEvents : function() {
931 // Roo.log("ADD event");
932 // Roo.log(this.triggerEl.dom);
933 this.triggerEl.on('click', this.toggle, this);
934 this.triggerEl.addClass('dropdown-toggle');
939 //Roo.log(e.getTarget());
940 // Roo.log(this.triggerEl.dom);
941 if (Roo.get(e.getTarget()).findParent('.dropdown-menu')) {
944 var isActive = this.triggerEl.hasClass('open');
945 // if disabled.. ingore
947 //if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
948 // if mobile we use a backdrop because click events don't delegate
949 // $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
952 //var relatedTarget = { relatedTarget: this }
953 //$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
955 //if (e.isDefaultPrevented()) return;
957 this.triggerEl[isActive ? 'removeClass' : 'addClass']('open');
959 // .trigger('shown.bs.dropdown', relatedTarget)
961 this.triggerEl.focus();
967 clearMenus : function()
969 //$(backdrop).remove()
970 Roo.select('.dropdown-toggle',true).each(function(aa) {
971 if (!aa.hasClass('open')) {
975 aa.removeClass('open');
976 //var parent = getParent($(this))
977 //var relatedTarget = { relatedTarget: this }
979 //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
980 //if (e.isDefaultPrevented()) return
981 //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
999 * @class Roo.bootstrap.MenuItem
1000 * @extends Roo.bootstrap.Component
1001 * Bootstrap MenuItem class
1002 * @cfg {String} html the menu label
1003 * @cfg {String} href the link
1007 * Create a new MenuItem
1008 * @param {Object} config The config object
1012 Roo.bootstrap.MenuItem = function(config){
1013 Roo.bootstrap.MenuItem.superclass.constructor.call(this, config);
1016 Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, {
1023 getAutoCreate : function(){
1036 cfg.cn[0].href = this.href || cfg.cn[0].href ;
1037 cfg.cn[0].html = this.html || cfg.cn[0].html ;
1054 * @class Roo.bootstrap.MenuItem
1055 * @extends Roo.bootstrap.Component
1056 * Bootstrap MenuItem class
1057 * @cfg {String} html the menu label
1058 * @cfg {String} href the link
1062 * Create a new MenuItem
1063 * @param {Object} config The config object
1067 Roo.bootstrap.MenuSeparator = function(config){
1068 Roo.bootstrap.MenuSeparator.superclass.constructor.call(this, config);
1071 Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, {
1073 getAutoCreate : function(){
1088 <div class="modal fade">
1089 <div class="modal-dialog">
1090 <div class="modal-content">
1091 <div class="modal-header">
1092 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
1093 <h4 class="modal-title">Modal title</h4>
1095 <div class="modal-body">
1096 <p>One fine body…</p>
1098 <div class="modal-footer">
1099 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1100 <button type="button" class="btn btn-primary">Save changes</button>
1102 </div><!-- /.modal-content -->
1103 </div><!-- /.modal-dialog -->
1104 </div><!-- /.modal -->
1114 * @class Roo.bootstrap.Modal
1115 * @extends Roo.bootstrap.Component
1116 * Bootstrap Modal class
1117 * @cfg {String} title Title of dialog
1118 * @cfg {Array} buttons Array of buttons
1121 * Create a new Modal Dialog
1122 * @param {Object} config The config object
1125 Roo.bootstrap.Modal = function(config){
1126 Roo.bootstrap.Modal.superclass.constructor.call(this, config);
1129 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, {
1131 title : 'test dialog',
1134 onRender : function(ct, position){
1135 Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
1137 var cfg = Roo.apply({}, this.getAutoCreate());
1140 // cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
1142 //if (!cfg.name.length) {
1146 cfg.cls += ' ' + this.cls;
1149 cfg.style = this.style;
1151 this.el = Roo.get(document.body).createChild(cfg, position);
1153 //var type = this.el.dom.type;
1155 if(this.tabIndex !== undefined){
1156 this.el.dom.setAttribute('tabIndex', this.tabIndex);
1159 //this.el.addClass([this.fieldClass, this.cls]);
1162 getAutoCreate : function(){
1168 cls: "modal-dialog",
1171 cls : "modal-content",
1174 cls : 'modal-header',
1183 cls : 'modal-title',
1194 cls : 'modal-footer'
1199 cls : 'btn btn-default',
1204 cls : 'btn btn-primary',
1225 getChildContainer : function() {
1227 return this.el.select('.modal-body',true).first();
1230 getButtonContainer : function() {
1231 return this.el.select('.modal-footer',true).first();
1234 initEvents : function()
1236 this.el.select('.modal-header .close').on('click', this.hide, this);
1239 this.el.addClass('on');
1240 this.el.removeClass('fade');
1241 this.el.setStyle('display', 'block');
1244 this.el.removeClass('on');
1245 this.el.addClass('fade');
1246 this.el.setStyle('display', 'none');
1258 * @class Roo.bootstrap.Navbar
1259 * @extends Roo.bootstrap.Component
1260 * Bootstrap Navbar class
1261 * @cfg {Boolean} sidebar has side bar
1262 * @cfg {Boolean} bar is a bar?
1263 * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
1264 * @cfg {String} brand what is brand
1265 * @cfg {Boolean} inverse is inverted color
1266 * @cfg {String} type (nav|pills|tabs)
1267 * @cfg {Boolean} arrangement stacked|justified
1268 * @cfg {String} align (left|right) alignment
1272 * Create a new Navbar
1273 * @param {Object} config The config object
1277 Roo.bootstrap.Navbar = function(config){
1278 Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
1281 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, {
1293 getAutoCreate : function(){
1298 if (this.sidebar === true) {
1306 if (this.bar === true) {
1314 cls: 'navbar-header',
1319 cls: 'navbar-toggle',
1320 'data-toggle': 'collapse',
1325 html: 'Toggle navigation'
1345 cls: 'collapse navbar-collapse'
1350 cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
1352 if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
1353 cfg.cls += ' navbar-' + this.position;
1354 cfg.tag = this.position == 'fixed-bottom' ? 'footer' : 'header';
1357 if (this.brand !== '') {
1361 cls: 'navbar-brand',
1370 } else if (this.bar === false) {
1373 Roo.log('Property \'bar\' in of Navbar must be either true or false')
1383 if (['tabs','pills'].indexOf(this.type)!==-1) {
1384 cfg.cn[0].cls += ' nav-' + this.type
1386 if (this.type!=='nav') {
1387 Roo.log('nav type must be nav/tabs/pills')
1389 cfg.cn[0].cls += ' navbar-nav'
1392 if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
1393 cfg.cn[0].cls += ' nav-' + this.arrangement;
1396 if (this.align === 'right') {
1397 cfg.cn[0].cls += ' navbar-right';
1400 cfg.cls += ' navbar-inverse';
1403 /* type: nav | tabs | pills
1404 * arrangement: stacked | justified
1405 * position: fixed/static etc
1406 * inverse: true/false
1413 getChildContainer : function() {
1414 if (this.bar === true) {
1415 return this.el.select('.collapse',true).first();
1431 Roo.bootstrap.NavGroup = function(config){
1432 Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
1435 Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, {
1439 getAutoCreate : function(){
1440 var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
1444 cls: 'nav navbar-nav'
1447 if (this.parent().sidebar === true) {
1450 cls: 'dashboard-menu'
1457 if (this.align === 'right') {
1458 cfg.cls += ' navbar-right';
1462 cfg.cls += ' navbar-inverse';
1465 /* type: nav | tabs | pills
1466 * arrangement: stacked | justified
1467 * position: fixed/static etc
1468 * inverse: true/false
1486 * @class Roo.bootstrap.Navbar.Button
1487 * @extends Roo.bootstrap.Component
1488 * Bootstrap Navbar.Button class
1489 * @cfg {String} href link to
1490 * @cfg {String} html content of button
1493 * Create a new Navbar Button
1494 * @param {Object} config The config object
1498 Roo.bootstrap.Navbar.Button = function(config){
1499 Roo.bootstrap.Navbar.Button.superclass.constructor.call(this, config);
1502 Roo.extend(Roo.bootstrap.Navbar.Button, Roo.bootstrap.Component, {
1513 getAutoCreate : function(){
1523 html : this.html || ''
1547 * @class Roo.bootstrap.Navbar.Item
1548 * @extends Roo.bootstrap.Component
1549 * Bootstrap Navbar.Button class
1550 * @cfg {String} href link to
1551 * @cfg {String} html content of button
1552 * @cfg {String} badge text inside badge
1553 * @cfg {String} glyphicon name of glyphicon
1556 * Create a new Navbar Button
1557 * @param {Object} config The config object
1559 Roo.bootstrap.Navbar.Item = function(config){
1560 Roo.bootstrap.Navbar.Item.superclass.constructor.call(this, config);
1563 Roo.extend(Roo.bootstrap.Navbar.Item, Roo.bootstrap.Component, {
1571 getAutoCreate : function(){
1573 var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Item.superclass.getAutoCreate.call(this));
1575 if (this.parent().parent().sidebar === true) {
1588 cfg.cn[0].html = this.html;
1592 this.cls += ' active';
1596 cfg.cn[0].cls += ' dropdown-toggle';
1597 cfg.cn[0].html = (cfg.cn[0].html || this.html) + '<span class="glyphicon glyphicon-chevron-down"></span>';
1601 cfg.cn[0].tag = 'a',
1602 cfg.cn[0].href = this.href;
1605 if (this.glyphicon) {
1606 cfg.cn[0].html = '<i class="glyphicon glyphicon-'+this.glyphicon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
1622 if (this.glyphicon) {
1623 if(cfg.html){cfg.html = ' ' + this.html};
1627 cls: 'glyphicon glyphicon-' + this.glyphicon
1632 cfg.cn[0].html = this.html || cfg.cn[0].html ;
1636 cfg.cn[0].html += " <span class='caret'></span>";
1637 //}else if (!this.href) {
1638 // cfg.cn[0].tag='p';
1639 // cfg.cn[0].cls='navbar-text';
1642 cfg.cn[0].href=this.href||'#';
1643 cfg.cn[0].html=this.html;
1646 if (this.badge !== '') {
1649 cfg.cn[0].html + ' ',
1662 initEvents: function() {
1663 // Roo.log('init events?');
1664 // Roo.log(this.el.dom);
1665 this.el.select('a',true).on('click',
1667 this.fireEvent('click', this);
1684 * @class Roo.bootstrap.Row
1685 * @extends Roo.bootstrap.Component
1686 * Bootstrap Row class (contains columns...)
1690 * @param {Object} config The config object
1693 Roo.bootstrap.Row = function(config){
1694 Roo.bootstrap.Row.superclass.constructor.call(this, config);
1697 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component, {
1716 * @class Roo.bootstrap.Column
1717 * @extends Roo.bootstrap.Component
1718 * Bootstrap Column class
1719 * @cfg {number} colspan Number of columsn to span
1722 * Create a new Column
1723 * @param {Object} config The config object
1726 Roo.bootstrap.Element = function(config){
1727 Roo.bootstrap.Element.superclass.constructor.call(this, config);
1730 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
1738 getAutoCreate : function(){
1739 var cfg = Roo.apply({}, Roo.bootstrap.Element.superclass.getAutoCreate.call(this));
1762 * @class Roo.bootstrap.Column
1763 * @extends Roo.bootstrap.Component
1764 * Bootstrap Column class
1765 * @cfg {number} colspan Number of columsn to span
1768 * Create a new Column
1769 * @param {Object} config The config object
1772 Roo.bootstrap.Pagination = function(config){
1773 Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
1776 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component, {
1787 getAutoCreate : function(){
1794 cfg.cls += ' inverse';
1812 var from=this.from>0?this.from:1;
1813 var to=this.to-from<=10?this.to:from+10;
1814 var active=this.active>=from&&this.active<=to?this.active:null;
1815 for (var i=from;i<=to;i++) {
1819 cls: active===i?'active':'',
1860 * @class Roo.bootstrap.Container
1861 * @extends Roo.bootstrap.Component
1862 * Bootstrap Container class
1863 * @cfg {Boolean} jumbotron is it a jubmotron element
1864 * @cfg {String} html content of element
1867 * Create a new Container
1868 * @param {Object} config The config object
1871 Roo.bootstrap.Slider = function(config){
1872 Roo.bootstrap.Slider.superclass.constructor.call(this, config);
1875 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component, {
1877 getAutoCreate : function(){
1881 cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
1885 cls: 'ui-slider-handle ui-state-default ui-corner-all'
1903 * @class Roo.bootstrap.Column
1904 * @extends Roo.bootstrap.Component
1905 * Bootstrap Column class
1906 * @cfg {number} colspan Number of columsn to span
1909 * Create a new Column
1910 * @param {Object} config The config object
1913 Roo.bootstrap.Table = function(config){
1914 Roo.bootstrap.Table.superclass.constructor.call(this, config);
1917 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
1922 getAutoCreate : function(){
1923 var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
1955 * @class Roo.bootstrap.Column
1956 * @extends Roo.bootstrap.Component
1957 * Bootstrap Column class
1958 * @cfg {number} colspan Number of columsn to span
1961 * Create a new Column
1962 * @param {Object} config The config object
1965 Roo.bootstrap.TableCell = function(config){
1966 Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
1969 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component, {
1971 getAutoCreate : function(){
1972 var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
1999 * @class Roo.bootstrap.Column
2000 * @extends Roo.bootstrap.Component
2001 * Bootstrap Column class
2002 * @cfg {number} colspan Number of columsn to span
2005 * Create a new Column
2006 * @param {Object} config The config object
2009 Roo.bootstrap.TableRow = function(config){
2010 Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
2013 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component, {
2015 getAutoCreate : function(){
2016 var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));