initEvents :function ()
{
//Roo.log(this.el.select('.navbar-toggle',true));
- this.el.select('.navbar-toggle',true).on('click', function() {
- if(this.fireEvent('beforetoggle', this) !== false){
- var ce = this.el.select('.navbar-collapse',true).first();
- ce.toggleClass('in'); // old...
- if (ce.hasClass('collapse')) {
- // show it...
- ce.removeClass('collapse');
- ce.addClass('show');
-
- ce.setHeight(ce.getHeight()); // resize it ...
- ce.removeClass('collapsing');
- ce.addClass('collapsing');
-
- // now flag it as moving..
-
-
- (function() { ce.removeClass('collapsing'); }).defer(100);
- } else {
- ce.addClass('collapsing');
- ce.removeClass('show');
- (function() {
- ce.removeClass('collapsing');
- ce.addClass('collapse');
- }).defer(200);
-
- }
- }
-
- }, this);
+ this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
var mark = {
tag: "div",
getChildContainer : function()
{
- if (this.el.select('.collapse').getCount()) {
+ if (this.el && this.el.select('.collapse').getCount()) {
return this.el.select('.collapse',true).first();
}
unmask : function()
{
this.maskEl.hide();
- }
+ },
+ onToggle : function()
+ {
+
+ if(this.fireEvent('beforetoggle', this) === false){
+ return;
+ }
+ var ce = this.el.select('.navbar-collapse',true).first();
+
+ if (!ce.hasClass('show')) {
+ this.expand();
+ } else {
+ this.collapse();
+ }
+
+
+ },
+ /**
+ * Expand the navbar pulldown
+ */
+ expand : function ()
+ {
+
+ var ce = this.el.select('.navbar-collapse',true).first();
+ if (ce.hasClass('collapsing')) {
+ return;
+ }
+ ce.dom.style.height = '';
+ // show it...
+ ce.addClass('in'); // old...
+ ce.removeClass('collapse');
+ ce.addClass('show');
+ var h = ce.getHeight();
+ Roo.log(h);
+ ce.removeClass('show');
+ // at this point we should be able to see it..
+ ce.addClass('collapsing');
+
+ ce.setHeight(0); // resize it ...
+ ce.on('transitionend', function() {
+ //Roo.log('done transition');
+ ce.removeClass('collapsing');
+ ce.addClass('show');
+ ce.removeClass('collapse');
+
+ ce.dom.style.height = '';
+ }, this, { single: true} );
+ ce.setHeight(h);
+ ce.dom.scrollTop = 0;
+ },
+ /**
+ * Collapse the navbar pulldown
+ */
+ collapse : function()
+ {
+ var ce = this.el.select('.navbar-collapse',true).first();
+
+ if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
+ // it's collapsed or collapsing..
+ return;
+ }
+ ce.removeClass('in'); // old...
+ ce.setHeight(ce.getHeight());
+ ce.removeClass('show');
+ ce.addClass('collapsing');
+
+ ce.on('transitionend', function() {
+ ce.dom.style.height = '';
+ ce.removeClass('collapsing');
+ ce.addClass('collapse');
+ }, this, { single: true} );
+ ce.setHeight(0);
+ }