1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    9
    Vote Rating
    0
    toriacht is on a distinguished road

      0  

    Default Beginner: Using Icons: Different methods

    Beginner: Using Icons: Different methods


    Hi,

    I'm currently playing round with the samples, trying to incorporate parts of them in my sample projects etc...and have a question about the different ways to add icons..
    Method 1 below is fine... I am unsure as to Method 2 and 3, where they look for the icons etc...

    Method 1:
    This is the most 'java' way and i managed to get this working.No probs.
    Code:
     ToolBar toolBar = new ToolBar();
     Button item = new Button();
     item.setIcon(Resources.ICONS.connect());
     toolBar.add(item);
    Method 2:
    Where does this method look for "icon-connect" or more to point where/what do i configure project so it knows where to look? What is benefit of this way?

    Code:
     ToolBar toolBar = new ToolBar();
     Button item = new Button();
     item.setIcon(IconHelper.createStyle("icon-connect"))
     toolBar.add(item);
    Method 3:
    Similar to 2, but has me perplexed...
    where does it look for "icon" , "user-girl" etc and what exactly is happening here(particularly in getIcon(ModelData model))... How does it figure out/ set the different icons for each type?

    Code:
    public AbstractImagePrototype getIcon(ModelData model) {
    	        if (model.get("icon") != null) {
    	          return IconHelper.createStyle((String) model.get("icon"));
    	        } else {
    	          return null;
    	        }
    	      }


    ....
    Code:
     ModelData m = newItem("Family", null);
    	    store.add(m, false);
    	    tree.setExpanded(m, true);
    
    	    store.add(m, newItem("Bill", "user"), false);
                 store.add(m, newItem("Mary", "user-girl"), false);
    	    store.add(m, newItem("Ronnie", "user-kid"), false);
    Code:
     private ModelData newItem(String text, String iconStyle) {
    	    ModelData m = new BaseModelData();
    	    m.set("name", text);
    	    m.set("icon", iconStyle);
    	    return m;
    	  }
    Thanks
    T

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    4
    Vote Rating
    0
    Eich is on a distinguished road

      0  

    Default


    Method 2 is easy to understand. Just look at the JavaDoc:
    Returns an 16 x 16 image. If the passed parameter is an image path, as defined by @link Util.isImagePath(String), it is treated as an image path. Otherwise, the parameter is treated as a CSS style name.
    This JDoc is for the "create" method which combines the createPath- and the createStyle-method .
    If you choose the sytle-name, you have to create a css-class in your css-file, like:
    Code:
    .icon {
     background-image:(...);
     ...
    }
    Method 3:
    Here you can define multiple images for your defined ModelData. Lets go ahead with a TreeModel-Example:
    Code:
                    if (model instanceof YourOwnTreeModel) {
                        return IconHelper.createStyle("style01");
                    } else if (model instanceof YourNextOwnTreeModel) {
                        return IconHelper.createStyle("style02");
                    } else if (model instanceof ...) {
                        return IconHelper.createStyle("style...");
                    }
                    return null;
    If you added a icon-variable to your ModelItems, you can get the icon from your Model:
    Code:
                    return IconHelper.createStyle((String)model.get("icon"));
    For a better understanding, just read about the Models in GXT (and try it out).

    At least - the IconHelper is not the only "Image-Creator" in GXT/GWT, you can also use the ClientBundle- or the ImageResource-Interface from GWT.

Similar Threads

  1. [not solved]Few beginner questions: MySQL, socket, licences, icons
    By vpxavier in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 8 Aug 2010, 8:35 PM
  2. Please help me beginner!!
    By mushachi71 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 27 May 2010, 10:47 PM
  3. I am the beginner
    By alxwm in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 14 Jan 2010, 1:41 PM
  4. Help Me, I am a beginner
    By Katheeja in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 1 Feb 2008, 10:34 AM
  5. View icons & twistie icons - update
    By captainm1uk in forum Ext.nd for Notes/Domino
    Replies: 2
    Last Post: 16 Oct 2007, 5:25 AM

Thread Participants: 1

Tags for this Thread