Results 1 to 3 of 3

Thread: Sprite zIndex no working properly

    Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Porto Alegre
    Posts
    6
    Vote Rating
    0
      0  

    Default Sprite zIndex no working properly

    I designing a new type o chart by using only Sprites. But now I'm facing two bugs that are keeping me from finish my task.

    Bug 1: After I create the surface with some sprites (paths, texts, icon and rect types) I added an click event on some text sprites on this event call this funcion

    Code:
        exibirJanelaDetalhes = function (id, posX, posY) {
            var d = dados[id];
            
            var detalhes = [];
            
            if (d.dataInicio != null && d.dataInicio != undefined && d.dataInicio != '') {
                detalhes.push(lbl_data_inicio + parseDate(d.dataInicio, TIPO_GRAFICO_MES));
            }
    
    
            if (d.dataFim != null && d.dataFim != undefined && d.dataFim != '') {
                detalhes.push(lbl_data_fim + parseDate(d.dataFim, TIPO_GRAFICO_MES));
            }        
    
    
            if (d.descricao != null && d.descricao != undefined && d.descricao != '') {
                detalhes.push(lbl_descricao + d.descricao);
            }
            
            /*if (d.funcao != null && d.funcao != undefined && d.funcao != '') {
                detalhes.push({
                    xtype: 'button',
                    text: lbl_botao_mais_detalhes,
                    handler: function() {
                        eval(d.funcao);
                    }
                });
            }*/
            /*
            Ext.create('Ext.Window', {
                x: posX,
                y: posY,
                height: 200,
                width: 400,
                title: d.titulo,
                modal: true,
                items: [
                    Ext.create('Ext.form.Panel',{
                        x: 5,
                        y: 5,
                        height: '78%',
                        width: '88%',
                        layout: 'vbox',
                        items: [detalhes]
                    })
                ]
            }).show().focus();
            */
            var textoBalao = '';
            for (var i = 0; i < detalhes.length; i++) {
                textoBalao += (i > 0 ? '\n' : '') + detalhes[i];
            }
            
            //console.log('textoBalao ' + textoBalao);
    
    
            textoBalaoSprite = Ext.create('Ext.draw.Sprite', {
                type: 'text',
                //stroke: '#000',
                surface: papel.surface,
                x: posX,
                y: posY+20,
                font: 'font-family: Arial; font-style: normal;font-size:11px;',
                text: textoBalao,
                zIndex: 2000,
                zIndexDirty: true,
                group: 'balao',
                listeners: {
                    click: {
                        fn: function() {
                            console.log('deveria ter destruido');
                            papel.surface.getGroup('balao').destroy();
                            
                        }
                    }
                }
            }).show(true);
            textoBalaoSprite.setAttributes({
                zIndex: 2000
            }, true);
    
    
            var dimensoes = textoBalaoSprite.getBBox();
            fundo = Ext.create('Ext.draw.Sprite', {
                type: 'rect',
                
                surface: papel.surface,
                x: posX-5,
                y: posY+12,
                fill: '#FFF',
                width: dimensoes.width+10,
                height: dimensoes.height,
                group: 'balao1',
                zIndex: 1000,
                radius: 10,
                listeners: {
                    click: {
                        fn: function() {
                            console.log('deveria ter destruido');
                            papel.surface.getGroup('balao').destroy();
                            
                        }
                    }
                }
            }).show(true);
            fundo.setAttributes({
                zIndex: 1000
            }, true);
    
    
        }
    And this is what happens

    addspritesontheflybug.png

    The new text and rect sprites show behind the older sprites. I tried a lot of different ways getting rid if this issue but zIndex seems just to ignore me.

    The second bug I found is due events on sprites the text sprite that actually calls the method above is this one:

    Code:
                objetos.push(Ext.create('Ext.draw.Sprite', {
                    type: 'text',
                    x: posX+23,
                    y: posY+10,
                    zIndex: 11,
                    font: 'font-family: Arial; font-style: italic;font-size:11px',
                    text: d.titulo,
                    idDadoLinhaVida: i,
                    listeners: {
                        click: {
                            fn: function() {
                                exibirJanelaDetalhes(this.idDadoLinhaVida, this.x, this.y);
                            }
                        }/*,
                        mouseover: {
                            fn: function() {
                                console.log('entered');
                                this.setAttributes({font: 'font-family: Arial; font-style: italic;font-size:13px'}, true);
                            }
                        }*/,
                        mouseout: {
                            fn: function() {
                                console.log('left');
                                this.setAttributes({font: 'font-family: Arial; font-style: italic;font-size:11px'}, true);
                                if (textoBalaoSprite != undefined) {
                                    textoBalaoSprite.destroy();
                                }
                                if (fundo != undefined) {
                                    fundo.destroy();
                                }
                            }
                        }
                    }
                }));
    If I uncomment the mouseover event, click and mouseout just stops working. I really just can't explain.

    Let me know if you need more information about this bugs. And if I can do anything to help those issues.


    Thanks in advance for your help.


    Best regards,
    Cludio Engelsdorff

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,318
    Vote Rating
    1291
      0  

    Default

    Can I get locally runable code?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
      0  

    Default I think it's a bug in applyZIndex in SVG.js

    Sprites are kept in sorted order in the surface. However, when you change a zIndex with setAttributes on a sprite, the sprite isn't moved to the correct new location in the surface even though it's DOM element is moved.

    In addition if you change the zIndex, the element order becomes unordered which causes successive elements to be added in the wrong order since a binary search is used to locate the position to add.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •