docs/default.css
[roojs1] / roojs-bootstrap-debug.js
index 730642b..6716b06 100644 (file)
@@ -21776,7 +21776,7 @@ Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
         var _this = this;
         
         if(this.buttons){
-            Roo.each(_this.buttons, function(e){
+            Roo.each(_this.buttons, function(e){ // this might need to use render????
                Roo.factory(e).onRender(_this.el, null);
             });
         }
@@ -24036,6 +24036,7 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
  * @cfg {Number} minHeight default 300
  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
  * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
  * 
  * @constructor
  * Create a new UploadCropbox
@@ -24076,7 +24077,7 @@ Roo.bootstrap.UploadCropbox = function(config){
          * @event exception
          * Fire when get exception
          * @param {Roo.bootstrap.UploadCropbox} this
-         * @param {Object} options
+         * @param {XMLHttpRequest} xhr
          */
         "exception" : true,
         /**
@@ -24117,7 +24118,28 @@ Roo.bootstrap.UploadCropbox = function(config){
          * @param {Roo.bootstrap.UploadCropbox} this
          * @param {String} pos
          */
-        "rotate" : true
+        "rotate" : true,
+        /**
+         * @event inspect
+         * Fire when inspect the file
+         * @param {Roo.bootstrap.UploadCropbox} this
+         * @param {Object} file
+         */
+        "inspect" : true,
+        /**
+         * @event upload
+         * Fire when xhr upload the file
+         * @param {Roo.bootstrap.UploadCropbox} this
+         * @param {Object} data
+         */
+        "upload" : true,
+        /**
+         * @event arrange
+         * Fire when arrange the file data
+         * @param {Roo.bootstrap.UploadCropbox} this
+         * @param {Object} formData
+         */
+        "arrange" : true
     });
     
     this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
@@ -24157,6 +24179,11 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
                     cls : 'roo-upload-cropbox-body',
                     style : 'cursor:pointer',
                     cn : [
+                        {
+                            tag : 'input',
+                            cls : 'roo-upload-cropbox-selector',
+                            type : 'file'
+                        },
                         {
                             tag : 'div',
                             cls : 'roo-upload-cropbox-preview'
@@ -24217,6 +24244,10 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         
+        this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
+        this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        this.selectorEl.hide();
+        
         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         
@@ -24265,6 +24296,8 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
             Roo.get(document).on('mouseup', this.onMouseUp, this);
         }
+        
+        this.selectorEl.on('change', this.onFileSelected, this);
     },
     
     reset : function()
@@ -24280,6 +24313,8 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         this.cropData = false;
         this.notifyEl.dom.innerHTML = this.emptyText;
         
+        this.selectorEl.dom.value = '';
+        
     },
     
     resize : function()
@@ -24320,7 +24355,27 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     beforeSelectFile : function(e)
     {
-        this.fireEvent('beforeselectfile', this);
+        e.preventDefault();
+        
+        if(this.fireEvent('beforeselectfile', this) != false){
+            this.selectorEl.dom.click();
+        }
+    },
+    
+    onFileSelected : function(e)
+    {
+        e.preventDefault();
+        
+        if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+            return;
+        }
+        
+        var file = this.selectorEl.dom.files[0];
+        
+        if(this.fireEvent('inspect', this, file) != false){
+            this.prepare(file);
+        }
+        
     },
     
     trash : function(e)
@@ -24351,15 +24406,15 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
     
     onLoadCanvas : function()
     {   
+        this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+        this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
+        
         this.bodyEl.un('click', this.beforeSelectFile, this);
         
         this.notifyEl.hide();
         this.thumbEl.show();
         this.footerEl.show();
         
-        this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
-        this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
-        
         this.baseRotateLevel();
         
         if(this.isDocument){
@@ -24940,7 +24995,11 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         
         this.cropData = canvas.toDataURL(this.cropType);
         
-        this.fireEvent('crop', this, this.cropData);
+        if(this.fireEvent('crop', this, this.cropData) !== false){
+            this.process(this.file, this.cropData);
+        }
+        
+        return;
         
     },
     
@@ -25171,6 +25230,138 @@ Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
         
     },
     
+    process : function(file, crop)
+    {
+        this.xhr = new XMLHttpRequest();
+        
+        if(typeof(this.file.id) != 'undefined' && this.file.id * 1 > 0){
+            return;
+        }
+        
+        file.xhr = this.xhr;
+
+        this.xhr.open(this.method, this.url, true);
+        
+        var headers = {
+            "Accept": "application/json",
+            "Cache-Control": "no-cache",
+            "X-Requested-With": "XMLHttpRequest"
+        };
+        
+        for (var headerName in headers) {
+            var headerValue = headers[headerName];
+            if (headerValue) {
+                this.xhr.setRequestHeader(headerName, headerValue);
+            }
+        }
+        
+        var _this = this;
+        
+        this.xhr.onload = function()
+        {
+            _this.xhrOnLoad(_this.xhr);
+        }
+        
+        this.xhr.onerror = function()
+        {
+            _this.xhrOnError(_this.xhr);
+        }
+        
+        var formData = new FormData();
+
+        formData.append('returnHTML', 'NO');
+        
+        if(crop){
+            formData.append('crop', crop);
+        }
+        
+        formData.append(this.paramName, file, file.name);
+        
+        if(this.fireEvent('arrange', this, formData) != false){
+            this.xhr.send(formData);
+        };
+    },
+    
+    xhrOnLoad : function(xhr)
+    {
+        if (xhr.readyState !== 4) {
+            this.fireEvent('exception', this, xhr);
+            return;
+        }
+
+        var response = Roo.decode(xhr.responseText);
+        
+        if(!response.success){
+            this.fireEvent('exception', this, xhr);
+            return;
+        }
+        
+        var response = Roo.decode(xhr.responseText);
+        
+        this.fireEvent('upload', this, response);
+        
+    },
+    
+    xhrOnError : function()
+    {
+        Roo.log('xhr on error');
+        
+        var response = Roo.decode(xhr.responseText);
+          
+        Roo.log(response);
+        
+    },
+    
+    uploadFromSource : function(file, crop)
+    {
+        this.xhr = new XMLHttpRequest();
+        
+        this.xhr.open(this.method, this.url, true);
+        
+        var headers = {
+            "Accept": "application/json",
+            "Cache-Control": "no-cache",
+            "X-Requested-With": "XMLHttpRequest"
+        };
+        
+        for (var headerName in headers) {
+            var headerValue = headers[headerName];
+            if (headerValue) {
+                this.xhr.setRequestHeader(headerName, headerValue);
+            }
+        }
+        
+        var _this = this;
+        
+        this.xhr.onload = function()
+        {
+            _this.xhrOnLoad(_this.xhr);
+        }
+        
+        this.xhr.onerror = function()
+        {
+            _this.xhrOnError(_this.xhr);
+        }
+        
+        var formData = new FormData();
+
+        formData.append('returnHTML', 'NO');
+        
+        formData.append('crop', crop);
+        
+        if(typeof(file.filename) != 'undefined'){
+            formData.append('filename', file.filename);
+        }
+        
+        if(typeof(file.mimetype) != 'undefined'){
+            formData.append('mimetype', file.mimetype);
+        }
+        
+        if(this.fireEvent('arrange', this, formData) != false){
+            this.xhr.send(formData);
+        };
+    },
+    
     prepare : function(file)
     {   
         this.file = false;
@@ -25605,10 +25796,8 @@ Roo.apply(Roo.bootstrap.UploadCropbox, {
  * @cfg {String} paramName default 'imageUpload'
  * @cfg {String} method default POST
  * @cfg {String} url action url
- * @cfg {Number} boxes number of boxes default 12
+ * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
  * @cfg {Boolean} multiple multiple upload default true
- * @cfg {Number} minWidth default 300
- * @cfg {Number} minHeight default 300
  * @cfg {Number} thumbSize default 300
  * @cfg {String} fieldLabel
  * @cfg {Number} labelWidth default 4
@@ -25690,10 +25879,8 @@ Roo.bootstrap.DocumentManager = function(config){
 
 Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
     
-    boxes : 12,
+    boxes : 0,
     inputName : '',
-    minWidth : 300,
-    minHeight : 300,
     thumbSize : 300,
     multiple : true,
     files : [],
@@ -25891,13 +26078,13 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
             return;
         }
         
-        if(this.files.length > this.boxes){
+        if(this.boxes > 0 && this.files.length > this.boxes){
             this.files = this.files.slice(0, this.boxes);
         }
         
         this.uploader.show();
         
-        if(this.files.length > this.boxes - 1){
+        if(this.boxes > 0 && this.files.length > this.boxes - 1){
             this.uploader.hide();
         }
         
@@ -25905,6 +26092,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         
         var files = [];
         
+        var docs = [];
+        
         Roo.each(this.files, function(file){
             
             if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
@@ -25913,7 +26102,17 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
                 return;
             }
             
-            this.delegates.push(
+            if(file.type.indexOf('image') != -1){
+                this.delegates.push(
+                    (function(){
+                        _this.process(file);
+                    }).createDelegate(this)
+                );
+        
+                return;
+            }
+            
+            docs.push(
                 (function(){
                     _this.process(file);
                 }).createDelegate(this)
@@ -25923,6 +26122,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         
         this.files = files;
         
+        this.delegates = this.delegates.concat(docs);
+        
         if(!this.delegates.length){
             this.refresh();
             return;
@@ -25958,7 +26159,7 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
     {
         this.uploader.show();
         
-        if(this.files.length > this.boxes - 1){
+        if(this.boxes > 0 && this.files.length > this.boxes - 1){
             this.uploader.hide();
         }
         
@@ -25994,6 +26195,22 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         this.refresh();
     },
     
+    clear : function()
+    {
+        Roo.each(this.files, function(file){
+            if(!file.target){
+                return;
+            }
+            
+            file.target.remove();
+
+        }, this);
+        
+        this.files = [];
+        
+        this.refresh();
+    },
+    
     onClick : function(e, el, o)
     {
         e.preventDefault();
@@ -26208,6 +26425,70 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         file.target.addClass('tall');
         return;
         
+    },
+    
+    uploadFromSource : function(file, crop)
+    {
+        this.xhr = new XMLHttpRequest();
+        
+        this.managerEl.createChild({
+            tag : 'div',
+            cls : 'roo-document-manager-loading',
+            cn : [
+                {
+                    tag : 'div',
+                    tooltip : file.name,
+                    cls : 'roo-document-manager-thumb',
+                    html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
+                }
+            ]
+
+        });
+
+        this.xhr.open(this.method, this.url, true);
+        
+        var headers = {
+            "Accept": "application/json",
+            "Cache-Control": "no-cache",
+            "X-Requested-With": "XMLHttpRequest"
+        };
+        
+        for (var headerName in headers) {
+            var headerValue = headers[headerName];
+            if (headerValue) {
+                this.xhr.setRequestHeader(headerName, headerValue);
+            }
+        }
+        
+        var _this = this;
+        
+        this.xhr.onload = function()
+        {
+            _this.xhrOnLoad(_this.xhr);
+        }
+        
+        this.xhr.onerror = function()
+        {
+            _this.xhrOnError(_this.xhr);
+        }
+        
+        var formData = new FormData();
+
+        formData.append('returnHTML', 'NO');
+        
+        formData.append('crop', crop);
+        
+        if(typeof(file.filename) != 'undefined'){
+            formData.append('filename', file.filename);
+        }
+        
+        if(typeof(file.mimetype) != 'undefined'){
+            formData.append('mimetype', file.mimetype);
+        }
+        
+        if(this.fireEvent('prepare', this, formData) != false){
+            this.xhr.send(formData);
+        };
     }
 });
 
@@ -26388,8 +26669,8 @@ Roo.bootstrap.NavProgressBar = function(config){
 
 Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
     
-    bullets : false,
-    barItems : false,
+    bullets : [],
+    barItems : [],
     
     
     getAutoCreate : function()
@@ -26410,211 +26691,135 @@ Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
         
         if(this.bullets.length){
-            Roo.each(this.bullets, function(i){
-               
+            Roo.each(this.bullets, function(b){
+               this.addItem(b);
             }, this);
         }
         
-        
     },
     
-    initEvents: function() 
+    addItem : function(cfg)
     {
-        Roo.log('items!!!!!!!!!!!1');
-        Roo.log(this.items);
-    }
-//    
-//    
-//    /**
-//    * sets the active Navigation item
-//    * @param {Roo.bootstrap.NavProgressItem} the new current navitem
-//    */
-//    setActiveItem : function(item)
-//    {
-//        var prev = false;
-//        Roo.each(this.items, function(v){
-//            if (v == item) {
-//                return ;
-//            }
-//            if (v.isActive()) {
-//                v.setActive(false, true);
-//                prev = v;
-//                
-//            }
-//            
-//        });
-//
-//        item.setActive(true, true);
-//        this.fireEvent('changed', this, item, prev);
-//    },
-//    
-//    /**
-//    * gets the active Navigation item
-//    * @return {Roo.bootstrap.NavProgressItem} the current navitem
-//    */
-//    getActive : function()
-//    {
-//        var active = false;
-//        
-//        Roo.each(this.items, function(v){
-//            
-//            if (!v.isActive()) {
-//                return;
-//            }
-//            
-//            active = v;
-//            return false;
-//            
-//        });
-//        
-//        return active;
-//    },
-//    
-//    indexOfNav : function(item)
-//    {
-//        var index = false;
-//        
-//        Roo.each(this.items, function(v,i){
-//            
-//            if (v != item) {
-//                return;
-//            }
-//            
-//            index = i;
-//            return false
-//        });
-//        
-//        return index;
-//    },
-//    
-//    /**
-//    * adds a Navigation item
-//    * @param {Roo.bootstrap.NavProgressItem} the NavProgressItem to add
-//    */
-//    addItem : function(cfg)
-//    {
-//        var cn = new Roo.bootstrap.NavProgressItem(cfg);
-//        this.register(cn);
-//        cn.parentId = this.id;
-//        cn.onRender(this.el, null);
-//        return cn;
-//    },
-//    
-//    /**
-//    * register a Navigation item
-//    * @param {Roo.bootstrap.NavItem} the navitem to add
-//    */
-//    register : function(item)
-//    {
-//        this.items.push(item);
-//        item.navId = this.navId;
-//    
-//    },
-//    
-//    /**
-//    * clear all the Navigation item
-//    */
-//   
-//    clearAll : function()
-//    {
-//        this.items = [];
-//        this.el.dom.innerHTML = '';
-//    },
-//    
-//    getNavItem: function(tabId)
-//    {
-//        var ret = false;
-//        Roo.each(this.items, function(e) {
-//            if (e.tabId == tabId) {
-//               ret =  e;
-//               return false;
-//            }
-//            return true;
-//            
-//        });
-//        return ret;
-//    },
-//    
-//    setActiveNext : function()
-//    {
-//        var i = this.indexOfNav(this.getActive());
-//        
-//        if (i > this.items.length) {
-//            return;
-//        }
-//        
-//        this.setActiveItem(this.items[i+1]);
-//    },
-//    
-//    setActivePrev : function()
-//    {
-//        var i = this.indexOfNav(this.getActive());
-//        
-//        if (i  < 1) {
-//            return;
-//        }
-//        
-//        this.setActiveItem(this.items[i-1]);
-//    },
-//    
-//    clearWasActive : function(except) {
-//        Roo.each(this.items, function(e) {
-//            if (e.tabId != except.tabId && e.was_active) {
-//               e.was_active = false;
-//               return false;
-//            }
-//            return true;
-//            
-//        });
-//    },
-//    
-//    getWasActive : function ()
-//    {
-//        var r = false;
-//        Roo.each(this.items, function(e) {
-//            if (e.was_active) {
-//               r = e;
-//               return false;
-//            }
-//            return true;
-//            
-//        });
-//        return r;
-//    }
+        var item = new Roo.bootstrap.NavProgressItem(cfg);
+        
+        item.parentId = this.id;
+        item.render(this.el, null);
+        
+        this.barItems.push(item);
+        
+        this.formatBullets();
+        
+        return item;
+    },
     
+    getActive : function()
+    {
+        var active = false;
+        
+        Roo.each(this.barItems, function(v){
+            
+            if (!v.isActive()) {
+                return;
+            }
+            
+            active = v;
+            return false;
+            
+        });
+        
+        return active;
+    },
     
-});
-
-// 
-//Roo.apply(Roo.bootstrap.NavProgressBar, {
-//    
-//    groups: {},
-//     /**
-//    * register a Navigation Group
-//    * @param {Roo.bootstrap.NavGroup} the navgroup to add
-//    */
-//    register : function(bar)
-//    {
-//        this.groups[bar.navId] = bar;
-//     
-//    },
-//    /**
-//    * fetch a Navigation Bar based on the navigation ID
-//    * @param {string} the nav bar to add
-//    * @returns {Roo.bootstrap.NavProgressBar} the nav bar
-//    */
-//    get: function(navId) 
-//    {
-//        if (typeof(this.groups[navId]) == 'undefined') {
-//            return false;
-//        }
-//        
-//        return this.groups[navId] ;
-//    }
-//    
-//});
+    setActiveItem : function(item)
+    {
+        var prev = false;
+        
+        Roo.each(this.barItems, function(v){
+            if (v.rid == item.rid) {
+                return ;
+            }
+            
+            if (v.isActive()) {
+                v.setActive(false);
+                prev = v;
+            }
+        });
 
- /*
+        item.setActive(true);
+        
+        this.fireEvent('changed', this, item, prev);
+    },
+    
+    getBarItem: function(rid)
+    {
+        var ret = false;
+        
+        Roo.each(this.barItems, function(e) {
+            if (e.rid != rid) {
+                return;
+            }
+            
+            ret =  e;
+            return false;
+        });
+        
+        return ret;
+    },
+    
+    indexOfItem : function(item)
+    {
+        var index = false;
+        
+        Roo.each(this.barItems, function(v, i){
+            
+            if (v.rid != item.rid) {
+                return;
+            }
+            
+            index = i;
+            return false
+        });
+        
+        return index;
+    },
+    
+    setActiveNext : function()
+    {
+        var i = this.indexOfItem(this.getActive());
+        
+        if (i > this.barItems.length) {
+            return;
+        }
+        
+        this.setActiveItem(this.barItems[i+1]);
+    },
+    
+    setActivePrev : function()
+    {
+        var i = this.indexOfItem(this.getActive());
+        
+        if (i  < 1) {
+            return;
+        }
+        
+        this.setActiveItem(this.barItems[i-1]);
+    },
+    
+    formatBullets : function()
+    {
+        if(!this.barItems.length){
+            return;
+        }
+        
+        var width = 100 / this.barItems.length;
+        
+        Roo.each(this.barItems, function(i){
+            i.el.setStyle('width', width + '%');
+        }, this);
+    }
+    
+});
+/*
  * - LGPL
  *
  * Nav Progress Item
@@ -26625,9 +26830,13 @@ Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
  * @class Roo.bootstrap.NavProgressItem
  * @extends Roo.bootstrap.Component
  * Bootstrap NavProgressItem class
+ * @cfg {String} rid the reference id
  * @cfg {Boolean} active (true|false) Is item active default false
  * @cfg {Boolean} disabled (true|false) Is item active default false
  * @cfg {String} html
+ * @cfg {String} position (top|bottom) text position default bottom
+ * @cfg {String} icon show icon instead of number
+ * @cfg {Boolean} forceIcon (true|false) true to force show icon..if set to false, Roo.isTouch showing icon, otherwish number
  * 
  * @constructor
  * Create a new NavProgressItem
@@ -26643,220 +26852,136 @@ Roo.bootstrap.NavProgressItem = function(config){
          * @param {Roo.bootstrap.NavProgressItem} this
          * @param {Roo.EventObject} e
          */
-        "click" : true,
-        /**
-           * @event changed
-           * Fires when the active item active state changes
-           * @param {Roo.bootstrap.NavProgressItem} this
-           * @param {boolean} state the new state
-            
-         */
-        'changed': true
+        "click" : true
     });
    
 };
 
 Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component,  {
     
+    rid : '',
     active : false,
     disabled : false,
     html : '',
+    position : 'bottom',
+    icon : false,
+    forceIcon : false,
     
     getAutoCreate : function()
     {
-         
+        var iconCls = 'roo-navigation-bar-item-icon';
+        
+        if((this.forceIcon && this.icon) || !this.forceIcon && Roo.isTouch){
+            iconCls += ' ' + this.icon;
+        }
+        
         var cfg = {
             tag: 'li',
             cls: 'roo-navigation-bar-item',
             cn : [
+                {
+                    tag : 'i',
+                    cls : iconCls
+                },
                 {
                     tag : 'span',
-                    cls : 'roo-navigation-bar-item-text',
+                    cls : 'roo-navigation-bar-item-text ' + this.position,
                     html : this.html
                 }
             ]
         }
         
-        if (this.active) {
+        if(this.active){
             cfg.cls += ' active';
         }
-        if (this.disabled) {
+        if(this.disabled){
             cfg.cls += ' disabled';
         }
         
         return cfg;
     },
     
+    disable : function()
+    {
+        this.setDisabled(true);
+    },
+    
+    enable : function()
+    {
+        this.setDisabled(false);
+    },
+    
     initEvents: function() 
     {
-        Roo.log('bar item init???');
+        this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
+        this.textEl = this.el.select('.roo-navigation-bar-item-text', true).first();
+        
+        if(Roo.isTouch){
+            this.textEl.setVisibilityMode(Roo.Element.DISPLAY).hide();
+        }
+        
+        this.iconEl.on('click', this.onClick, this);
+        
+    },
+    
+    onClick : function(e)
+    {
+        e.preventDefault();
+        
+        if(this.disabled){
+            return;
+        }
+        
+        if(this.fireEvent('click', this, e) === false){
+            return;
+        };
+        
+        this.parent().setActiveItem(this);
+    },
+    
+    isActive: function () 
+    {
+        return this.active;
+    },
+    
+    setActive : function(state)
+    {
+        if(this.active == state){
+            return;
+        }
+        
+        this.active = state;
+        
+        if (state) {
+            this.el.addClass('active');
+            return;
+        }
+        
+        this.el.removeClass('active');
+        
+        return;
+    },
+    
+    setDisabled : function(state)
+    {
+        if(this.disabled == state){
+            return;
+        }
+        
+        this.disabled = state;
+        
+        if (state) {
+            this.el.addClass('disabled');
+            return;
+        }
+        
+        this.el.removeClass('disabled');
+    },
+    
+    tooltipEl : function()
+    {
+        return this.el.select('.roo-navigation-bar-item-icon', true).first();;
     }
-//    
-//    onClick : function(e)
-//    {
-//        if(
-//                this.preventDefault || 
-//                this.href == '#' 
-//        ){
-//            
-//            e.preventDefault();
-//        }
-//        
-//        if (this.disabled) {
-//            return;
-//        }
-//        
-//        var tg = Roo.bootstrap.TabGroup.get(this.navId);
-//        if (tg && tg.transition) {
-//            Roo.log("waiting for the transitionend");
-//            return;
-//        }
-//        
-//        
-//        
-//        //Roo.log("fire event clicked");
-//        if(this.fireEvent('click', this, e) === false){
-//            return;
-//        };
-//        
-//        if(this.tagtype == 'span'){
-//            return;
-//        }
-//        
-//        //Roo.log(this.href);
-//        var ael = this.el.select('a',true).first();
-//        //Roo.log(ael);
-//        
-//        if(ael && this.animateRef && this.href.indexOf('#') > -1){
-//            //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
-//            if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
-//                return; // ignore... - it's a 'hash' to another page.
-//            }
-//            
-//            e.preventDefault();
-//            this.scrollToElement(e);
-//        }
-//        
-//        
-//        var p =  this.parent();
-//   
-//        if (['tabs','pills'].indexOf(p.type)!==-1) {
-//            if (typeof(p.setActiveItem) !== 'undefined') {
-//                p.setActiveItem(this);
-//            }
-//        }
-//        
-//        // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
-//        if (p.parentType == 'NavHeaderbar' && !this.menu) {
-//            // remove the collapsed menu expand...
-//            p.parent().el.select('.navbar-collapse',true).removeClass('in');  
-//        }
-//    },
-//    
-//    isActive: function () {
-//        return this.active
-//    },
-//    setActive : function(state, fire, is_was_active)
-//    {
-//        if (this.active && !state && this.navId) {
-//            this.was_active = true;
-//            var nv = Roo.bootstrap.NavGroup.get(this.navId);
-//            if (nv) {
-//                nv.clearWasActive(this);
-//            }
-//            
-//        }
-//        this.active = state;
-//        
-//        if (!state ) {
-//            this.el.removeClass('active');
-//        } else if (!this.el.hasClass('active')) {
-//            this.el.addClass('active');
-//        }
-//        if (fire) {
-//            this.fireEvent('changed', this, state);
-//        }
-//        
-//        // show a panel if it's registered and related..
-//        
-//        if (!this.navId || !this.tabId || !state || is_was_active) {
-//            return;
-//        }
-//        
-//        var tg = Roo.bootstrap.TabGroup.get(this.navId);
-//        if (!tg) {
-//            return;
-//        }
-//        var pan = tg.getPanelByName(this.tabId);
-//        if (!pan) {
-//            return;
-//        }
-//        // if we can not flip to new panel - go back to old nav highlight..
-//        if (false == tg.showPanel(pan)) {
-//            var nv = Roo.bootstrap.NavGroup.get(this.navId);
-//            if (nv) {
-//                var onav = nv.getWasActive();
-//                if (onav) {
-//                    onav.setActive(true, false, true);
-//                }
-//            }
-//            
-//        }
-//        
-//        
-//     
-//    },
-//     // this should not be here...
-//    setDisabled : function(state)
-//    {
-//        this.disabled = state;
-//        if (!state ) {
-//            this.el.removeClass('disabled');
-//        } else if (!this.el.hasClass('disabled')) {
-//            this.el.addClass('disabled');
-//        }
-//        
-//    },
-//    
-//    /**
-//     * Fetch the element to display the tooltip on.
-//     * @return {Roo.Element} defaults to this.el
-//     */
-//    tooltipEl : function()
-//    {
-//        return this.el.select('' + this.tagtype + '', true).first();
-//    },
-//    
-//    scrollToElement : function(e)
-//    {
-//        var c = document.body;
-//        
-//        /*
-//         * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
-//         */
-//        if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
-//            c = document.documentElement;
-//        }
-//        
-//        var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
-//        
-//        if(!target){
-//            return;
-//        }
-//
-//        var o = target.calcOffsetsTo(c);
-//        
-//        var options = {
-//            target : target,
-//            value : o[1]
-//        }
-//        
-//        this.fireEvent('scrollto', this, options, e);
-//        
-//        Roo.get(c).scrollTo('top', options.value, true);
-//        
-//        return;
-//    }
 });