1. #1
    Ext User papasi's Avatar
    Join Date
    Mar 2007
    Posts
    129
    Vote Rating
    0
    papasi is on a distinguished road

      0  

    Default Image bundle

    Image bundle


    http://code.google.com/p/google-web-...geBundleDesign

    This got me thinking. Is there a way to automate the process of creating image strip for Ext?

    Someone mentioned that there's an effort to merge images manually, but that would be a moving target, since Jack is adding new widgets all the time.

    It would be cool if there is a way to do this just like jsbuilder does for the js files.
    papasi

  2. #2
    Ext User GalaxySong's Avatar
    Join Date
    May 2007
    Posts
    51
    Vote Rating
    0
    GalaxySong is on a distinguished road

      0  

    Talking


    I have made a simple class for icons only. Given a image in which a group of icons lay in one and only row, pass the url of this image and width of each icon to new IconGroup. It will detect the height.
    Every icon must have a name for reference, especially useful to toolbar icons. Define the names in IconGroup.aIconIndex in strict sequence.
    When the image is loaded, this IconGroup will call listener 'on.Ready' (my style).
    Hope Ext team will release a better and official edition of such class.
    HTML Code:
    <style>
    .icon{
        border: 1px solid blue;
    }
        </style>
        <script type="text/javascript" src="http://extjs.com/deploy/ext/adapter/yui/yui-utilities.js"></script>
        <script type="text/javascript" src="http://extjs.com/deploy/ext/adapter/yui/ext-yui-adapter.js"></script>
        <script type="text/javascript" src="http://extjs.com/deploy/ext/ext-all.js"></script>
        <script type="text/javascript">
    
    function IconGroup(sUrl, nWidth, imgICON, sClassName){
        var _this = this;
    /* API in */
        _this.aIconIndex = [];
    
    /* listener */
        _this.on = {
            Ready: function(){}
        };
    
    /* global */
        var nNaturalWidth, nHeight, nLength;
    
    /* initiate */
        var imgCache = new Image();
        imgCache.src = sUrl;
    
        Ext.EventManager.addListener(imgCache, 'load', function (){
            nNaturalWidth = imgCache.naturalWidth;
            nHeight = imgCache.naturalHeight;
            nLength = nNaturalWidth / nWidth;
            if(imgICON){
                for(var i = 0; i < _this.aIconIndex.length; i++){
                    imgICON[_this.aIconIndex[i]] = get(i);
                }
            }
            _this.on.Ready();
        });
    
    /* function */
        function get(nIndex){
            if(nIndex >= nLength){
                console.error('nIndex ' + nIndex + 'is too big!');///
            }
            var img = new Image();
            img.src = Ext.BLANK_IMAGE_URL;
            img.className = sClassName;
            img = Ext.get(img);
            img.setWidth(nWidth);
            img.setHeight(nHeight);
            img.setStyle({
                backgroundImage: 'url(' + sUrl + ')',
                backgroundPosition: -(nIndex * nWidth)
            });
            return img;
        }//get
    
    /* API out */
        _this.get = get;
    }
    
    Ext.onReady(function (){
        var sUrl = 'http://code.google.com/images/code_sm.png';
        var imgICON = {};//to be filled with img Elements
        var oIconGroup = new IconGroup(sUrl, 60, imgICON, 'icon');
        oIconGroup.aIconIndex = ['a', 'b', 'C', 'D', 'E'];//Define names for reference
        oIconGroup.on.Ready = function(){
            document.body.innerHTML = '<h1>Here are icons: 0-a, 1-b, 0-a, 3-D, 2-C</h1>';
            oIconGroup.get(0).appendTo(document.body);//0-a
            imgICON.b.appendTo(document.body);//1-b
            imgICON.a.appendTo(document.body);//0-a
            oIconGroup.get(3).appendTo(document.body);//3-D
            imgICON['C'].appendTo(document.body);//2-C
        };
    });
        </script>

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


    Ext.util.SpriteManager extension:
    http://extjs.com/forum/showthread.php?t=5547

  4. #4
    Ext User GalaxySong's Avatar
    Join Date
    May 2007
    Posts
    51
    Vote Rating
    0
    GalaxySong is on a distinguished road

      0  

    Default


    Will Ext add similar class?

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Np plans for it right now. I would suggest working together with the poster on the other thread to create an extension for the community of you're interested.