1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    India
    Posts
    35
    Vote Rating
    2
    tanmayasahu is on a distinguished road

      0  

    Default ExtJS 4.1.3 UX for creating Icon with icon text(Like Desktop Icon)

    ExtJS 4.1.3 UX for creating Icon with icon text(Like Desktop Icon)


    Hi everyone,
    I have created a ux for creating icon with a image and having a icon name just below the image. It is looking like a desktop icon. If you are needing it, you copy the code from here.....

    Code:
    Ext.define('APP.icon.tIconPanel' ,{
        extend: 'Ext.panel.Panel',
        alias: 'widget.toolsIcon',
    	border : false,
    	layout: {
            type: 'vbox',
            pack: "center",
            align: "middle"
        },
    	animCollapse : true,
    	height : 50,
    	width : 40,
    	margin : '3 3 2 5',
    	padding : '2 2 2 2',
    	bodyStyle: 'background:transparent; padding:3px;',
    	frame : false,
    	listeners: {
    		beforerender: function(){
    			if(this.iconText == 'true' || this.iconText){
    				this.items.getAt(0).src = this.src;
    				this.items.getAt(1).html = this.iconName;
    				this.items.getAt(0).iconName = this.iconName;
    				this.items.getAt(0).callOnClick = this.callOnClick;
    				if(this.iconName.length > 5 && this.iconName.length < 7){
    					this.items.getAt(0).margin = '0 0 0 7';	
    				}
    				else if(this.iconName.length >= 7){	
    					this.items.getAt(0).margin = '0 0 0 13';	
    				}
    
    
    				if(this.iconName.length < 4){	
    					this.padding = '2 2 2 10'	
    				}
    				else if(this.iconName.length == 4){	
    					this.padding = '2 2 2 6'	
    				}
    				else if(this.iconName.length == 5){	
    					this.padding = '2 2 2 10'	
    				}
    				this.doLayout();
    			}
    			else{	
    				this.items.getAt(0).src = this.src;
    				this.items.getAt(1).html = this.iconName;
    				this.items.getAt(0).iconName = this.iconName;
    				this.items.getAt(0).callOnClick = this.callOnClick;
    
    
    				this.items.getAt(0).margin = '0 0 0 0';	
    				this.padding = '1 1 1 1';	
    
    
    				this.items.getAt(1).hide();
    				this.items.getAt(0).flex = 1;
    				this.layout = 'fit';
    				this.doLayout();
    			}	
    		},
    		render : function(){
    			var thisPan = this;	
    			this.el.on('mouseover', function() {	
    				thisPan.addCls('iconMouseOver');
    			});	
    			this.el.on('mouseout', function() {
    				thisPan.removeCls('iconMouseOver');
    			});	
    			this.el.set({'data-qtip' : this.iconName});
    		},
    		afterrender : function(){
    			var callOnClickFunc = this.callOnClick;
    			this.el.on('click', function() {
    				callOnClickFunc();
    			});	
    		}
    	},
    	items : [
    		{
    			xtype : 'image',
    			src : '',
    			margin : '2 2 2 2',
    			flex : 1.1
    		},{
    			xtype : 'label',
    			html : 'Example',
    			cls : 'iconTextDecor',
    			flex : .9	
    		}	
    	]
    });
    
    
    and the below code shows how you will use it by using xtype :
    
    {
             xtype : 'toolsIcon',
             src : 'resources/images/24x24/expandall_24x24.png',
             iconName : 'Expand',
             iconText : true,
             flex : 1,	
             callOnClick : function(p) {
                      //This will be called on cliking over the icon....you can write your code here for the click event
             }	
    }
    Hope it will help someone......
    Thanks
    Last edited by scottmartin; 4 Dec 2013 at 12:53 PM. Reason: Format your code

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thanks for sharing your code.

Thread Participants: 1

Tags for this Thread