1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
    technorodent is on a distinguished road

      0  

    Default Custom Tree Icons Possible?

    Custom Tree Icons Possible?


    Where in the [Architect] documentation is the procedure for changing or assigning custom tree icons? I can find no entry point for the solution to this problem in the Architect documentation, and documentation for EXT JS doesn't seem to match the way the procedures are structured in Architect.

    Any signpost or suggestion to a solution would be most appreciated.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
    technorodent is on a distinguished road

      0  

    Default One Solution for Tree Icons

    One Solution for Tree Icons


    After grappling around for a few hours, I have solved it adequately enough for me.

    1. Add a field named "iconCls" to the Model used in populating the tree. In the "Simple Tasks" example, that would be the "List" model.

    2. Next, in the appropriate Store, edit the root to include something like the following:

    iconCls: 'myFolder'

    Again, if you are in the "Simple Tasks" example, that would be the "Lists" Store, and the code behind the "Lists" icon in the Project Inspector would be as follows:

    Ext.define('SimpleTasks.store.Lists', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.lists',


    requires: [
    'SimpleTasks.model.List'
    ],


    constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
    autoLoad: false,
    storeId: 'Lists',
    model: 'SimpleTasks.model.List',
    root: {
    expanded: true,
    id: -1,
    name: 'Root Intersection',
    iconCls: 'myFolder',
    oType: 0
    }
    }, cfg)]);
    }
    });

    3. In the CSS file under Resources>>Library in the Project Inspector, add something like the following:

    .myFolder {
    background-image: url('../images/<whateverIcon.png>') !important;
    }
    .x-grid-tree-node-expanded .myFolder {
    background-image: url('../images/<whateverIcon.png>') !important;
    }

    That will take care of both expanded and collapsed modes.

    Save and test the file and you will see whatever your icon is displayed in the root.

    To assign icons as the user builds the tree, add the iconCls field to each node. For example, if you are again using the "Simple Tasks" tutorial, you would add the field to the 'newList' object in the code behind Controllers>>Lists>>addList of the Property Inspector.

    Otherwise, setting the icon can be accessed through the node.set() function. For example--again with the "Simple Tasks" tutorial and in the code behind Controllers>>Lists>>addList:

    Change:

    parentList.appendChild(newList);

    to:

    debugger;
    var myObj = parentList.appendChild(newList);
    myObj.set('iconCls', '<my CSS icon reference>');

    Hope this helps someone. . . .

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,198
    Vote Rating
    120
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    The above is the correct way of doing it.

    Thanks for posting!
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi